Merge pull request #69 from N1ck/nickl-fix-updated-gh-styles

GitHub, pls stop breaking my extension 😭

src/components/giphy-toolbar-item.js

@@ -2,9 +2,9 @@
 import React from 'dom-chef'
 
 export default (
-  <details class="details-reset details-overlay toolbar-item select-menu select-menu-modal-right ghg-trigger btn-octicon">
+  <details class=" details-reset details-overlay toolbar-item select-menu select-menu-modal-right ghg-trigger">
     <summary
-      class="menu-target p-2 p-md-1 mx-1"
+      class="menu-target Button Button--iconOnly Button--invisible Button--medium"
       aria-label="Insert a GIF"
       aria-haspopup="menu"
     >

src/main.js

@@ -79,9 +79,7 @@ function addToolbarButton() {
   )) {
     const form = toolbar.closest('form')
 
-    const reviewChangesModal = toolbar.closest(
-      '#review-changes-modal .SelectMenu-modal'
-    )
+    const reviewChangesModal = toolbar.closest('#review-changes-modal')
     const reviewChangesList = toolbar.closest(
       '#review-changes-modal .SelectMenu-list'
     )
@@ -90,6 +88,19 @@ function addToolbarButton() {
     // Otherwise the GIF selection popover will not be visible.
     if (reviewChangesModal !== null) {
       reviewChangesModal.classList.add('ghg-in-review-changes-modal')
+
+      // The Review changes modal sets an inline width of min(640px, 100vw - 2rem);
+      // our button takes up another 32px so we need to adjust the inline style to account for that, otherwise it's hidden.
+      const currentWidth = reviewChangesModal.style.width
+      if (currentWidth.includes('px')) {
+        // Extracts the value from the string (e.g., 640 from "min(640px, 100vw - 2rem)")
+        const widthValue = Number.parseInt(currentWidth.match(/\d+/)[0], 10)
+        const modifiedWidth = currentWidth.replace(
+          widthValue + 'px',
+          `${widthValue + 32}px`
+        )
+        reviewChangesModal.style.width = modifiedWidth
+      }
     }
 
     if (reviewChangesList !== null) {

src/style.css

@@ -29,8 +29,6 @@
 }
 
 .ghg-in-review-changes-modal {
-  /* Fixes the GIF button dropping to a new line in the review modal */
-  width: 678px !important;
   /* Fixes the GIF dropdown being hidden by the review modal's overflow */
   overflow: unset !important;
 }