From 94ff64dc0ae5a00c2d0a2e60a4e9e4bf821f6992 Mon Sep 17 00:00:00 2001
From: Nick Lockhart <nicko@canva.com>
Date: Sun, 7 Jan 2024 08:10:02 +1300
Subject: [PATCH] Update GIF button not displaying

---
 src/components/giphy-toolbar-item.js |  4 ++--
 src/main.js                          | 12 +++++++++++-
 src/style.css                        |  2 --
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/giphy-toolbar-item.js b/src/components/giphy-toolbar-item.js
index a5e7302..f91fb0f 100644
--- a/src/components/giphy-toolbar-item.js
+++ b/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"
     >
diff --git a/src/main.js b/src/main.js
index 91c3d53..242803f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -80,7 +80,7 @@ function addToolbarButton() {
     const form = toolbar.closest('form')
 
     const reviewChangesModal = toolbar.closest(
-      '#review-changes-modal .SelectMenu-modal'
+      '#review-changes-modal'
     )
     const reviewChangesList = toolbar.closest(
       '#review-changes-modal .SelectMenu-list'
@@ -90,6 +90,16 @@ 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.
+      let currentWidth = reviewChangesModal.style.width;
+      if (currentWidth.includes('px')) {
+          // Extracts the value from the string (e.g., 640 from "min(640px, 100vw - 2rem)")
+          let widthValue = parseInt(currentWidth.match(/\d+/)[0]);
+          let modifiedWidth = currentWidth.replace(widthValue + 'px', `${widthValue + 32}px`);
+          reviewChangesModal.style.width = modifiedWidth;
+      }
     }
 
     if (reviewChangesList !== null) {
diff --git a/src/style.css b/src/style.css
index b5fc3b1..cb44051 100644
--- a/src/style.css
+++ b/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;
 }