diff --git a/src/main.js b/src/main.js index a2676e1..f289850 100644 --- a/src/main.js +++ b/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; diff --git a/src/style.css b/src/style.css index 02a956b..18412ff 100644 --- a/src/style.css +++ b/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 *