Fix GIF menu rendering in diff view table rows

Author: N1ck

src/main.js

@@ -115,6 +115,13 @@ function addToolbarButton(toolbar) {
     return;
   }
 
+  // Check if the toolbar is inside a table row (e.g., in diff views)
+  const tableRow = toolbar.closest('tr');
+  if (tableRow) {
+    debugLog('Found toolbar inside table row, adding class');
+    tableRow.classList.add('ghg-has-toolbar');
+  }
+
   // Find the toolbar group to add our button to
   const isNewToolbar = toolbar.getAttribute('aria-label') === 'Formatting tools';
   let toolbarGroup;

src/style.css

@@ -60,6 +60,25 @@
   overflow: visible !important;
 }
 
+/*
+ * Fixes the GIF menu not overflowing the toolbar
+ * Allows the GIF dropdown to be visible outside the toolbar container
+ */
+.ghg-has-giphy-field
+[class*="Toolbar-module__toolbar"][class*="prc-ActionBar-Nav"] {
+  overflow: visible !important;
+}
+
+/*
+ * Fixes the GIF menu appearing below the code diff
+ * When the toolbar is inside a table row (e.g., in PR diff views),
+ * this ensures the GIF dropdown appears above other content
+ */
+.ghg-has-toolbar {
+  position: relative;
+  z-index: 5;
+}
+
 /*
  * Override for GitHub's toolbar alignment bug
  *