From 11969c2e2ebbbced0b72eb940f8ea99643b41683 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 21 Nov 2022 20:56:48 +1100
Subject: [PATCH] Fixes gallery width on lightbox, fixes gallery button
 expansion

---
 .../gallery/components/ImageGallery.scss      |  2 +-
 .../gallery/components/ImageGallery.tsx       | 34 +++++++++++++++----
 .../gallery/store/gallerySliceSelectors.ts    |  5 +++
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/gallery/components/ImageGallery.scss b/frontend/src/features/gallery/components/ImageGallery.scss
index e3dc5bc2f0..f12fcd418a 100644
--- a/frontend/src/features/gallery/components/ImageGallery.scss
+++ b/frontend/src/features/gallery/components/ImageGallery.scss
@@ -43,7 +43,7 @@
     border-radius: 0.5rem;
     border-left-width: 0.3rem;
 
-    border-color: var(--resizeable-handle-border-color);
+    border-color: var(--tab-list-text-inactive);
 
     &[data-resize-alert='true'] {
       border-color: var(--status-bad-color);
diff --git a/frontend/src/features/gallery/components/ImageGallery.tsx b/frontend/src/features/gallery/components/ImageGallery.tsx
index 123d151565..9e6934d79b 100644
--- a/frontend/src/features/gallery/components/ImageGallery.tsx
+++ b/frontend/src/features/gallery/components/ImageGallery.tsx
@@ -56,6 +56,8 @@ const GALLERY_TAB_WIDTHS: Record<
   postprocess: { galleryMinWidth: 200, galleryMaxWidth: 500 },
 };
 
+const LIGHTBOX_GALLERY_WIDTH = 400;
+
 export default function ImageGallery() {
   const dispatch = useAppDispatch();
 
@@ -76,10 +78,16 @@ export default function ImageGallery() {
     galleryWidth,
     isLightBoxOpen,
     isStaging,
+    shouldEnableResize,
   } = useAppSelector(imageGallerySelector);
 
-  const { galleryMinWidth, galleryMaxWidth } =
-    GALLERY_TAB_WIDTHS[activeTabName];
+  console.log(isLightBoxOpen);
+  const { galleryMinWidth, galleryMaxWidth } = isLightBoxOpen
+    ? {
+        galleryMinWidth: LIGHTBOX_GALLERY_WIDTH,
+        galleryMaxWidth: LIGHTBOX_GALLERY_WIDTH,
+      }
+    : GALLERY_TAB_WIDTHS[activeTabName];
 
   const [shouldShowButtons, setShouldShowButtons] = useState<boolean>(
     galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH
@@ -92,6 +100,12 @@ export default function ImageGallery() {
   const galleryContainerRef = useRef<HTMLDivElement>(null);
   const timeoutIdRef = useRef<number | null>(null);
 
+  useEffect(() => {
+    if (galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH) {
+      setShouldShowButtons(false);
+    }
+  }, [galleryWidth]);
+
   const handleSetShouldPinGallery = () => {
     dispatch(setShouldPinGallery(!shouldPinGallery));
     dispatch(setDoesCanvasNeedScaling(true));
@@ -256,10 +270,16 @@ export default function ImageGallery() {
       >
         <Resizable
           minWidth={galleryMinWidth}
-          maxWidth={shouldPinGallery ? galleryMaxWidth : undefined}
+          maxWidth={shouldPinGallery ? galleryMaxWidth : window.innerWidth}
           className={'image-gallery-popup'}
-          handleStyles={{ left: { width: '15px' } }}
-          enable={{ left: true }}
+          handleStyles={{
+            left: {
+              width: '15px',
+            },
+          }}
+          enable={{
+            left: shouldEnableResize,
+          }}
           size={{
             width: galleryWidth,
             height: shouldPinGallery ? '100%' : '100vh',
@@ -316,7 +336,9 @@ export default function ImageGallery() {
             const newWidth = _.clamp(
               Number(galleryWidth) + delta.width,
               galleryMinWidth,
-              Number(galleryMaxWidth)
+              Number(
+                shouldPinGallery ? galleryMaxWidth : 0.95 * window.innerWidth
+              )
             );
 
             if (
diff --git a/frontend/src/features/gallery/store/gallerySliceSelectors.ts b/frontend/src/features/gallery/store/gallerySliceSelectors.ts
index e62c9b5e69..ccb97172d6 100644
--- a/frontend/src/features/gallery/store/gallerySliceSelectors.ts
+++ b/frontend/src/features/gallery/store/gallerySliceSelectors.ts
@@ -49,6 +49,11 @@ export const imageGallerySelector = createSelector(
       galleryWidth,
       isLightBoxOpen,
       isStaging,
+      shouldEnableResize:
+        isLightBoxOpen ||
+        (activeTabName === 'unifiedCanvas' && shouldPinGallery)
+          ? false
+          : true,
     };
   },
   {