Rework Gallery DIsplay

frontend/src/app/App.scss

@@ -2,6 +2,7 @@
 
 .App {
   display: grid;
+  width: max-content;
 }
 
 .app-content {
@@ -14,6 +15,7 @@
   grid-auto-rows: max-content;
   width: $app-width;
   height: $app-height;
+  min-width: min-content;
 }
 
 .app-console {

frontend/src/features/gallery/ImageGallery.scss

@@ -2,10 +2,15 @@
 
 .image-gallery-area {
   .image-gallery-popup-btn {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    border-radius: 0.5rem 0 0 0.5rem;
+    padding: 0 0.5rem;
     @include Button(
-      $btn-width: 3rem,
-      $btn-height: 3rem,
-      $icon-size: 22px,
+      $btn-width: 1rem,
+      $btn-height: 6rem,
+      $icon-size: 20px,
       $btn-color: var(--btn-grey),
       $btn-color-hover: var(--btn-grey-hover)
     );
@@ -14,15 +19,14 @@
 
 .image-gallery-popup {
   background-color: var(--tab-color);
-  position: fixed !important;
-  top: 0;
-  right: 0;
   padding: 1rem;
   animation: slideOut 0.3s ease-out;
   display: grid;
   grid-auto-rows: max-content;
   row-gap: 1rem;
+  border-radius: 0.5rem;
   border-left-width: 0.2rem;
+  min-width: 300px;
   border-color: var(--gallery-resizeable-color);
 }
 

frontend/src/features/gallery/ImageGallery.tsx

@@ -21,6 +21,10 @@ export default function ImageGallery() {
     shouldShowGallery,
   } = useAppSelector((state: RootState) => state.gallery);
 
+  const activeTab = useAppSelector(
+    (state: RootState) => state.options.activeTab
+  );
+
   const dispatch = useAppDispatch();
 
   const handleShowGalleryToggle = () => {
@@ -77,8 +81,10 @@ export default function ImageGallery() {
         <Resizable
           defaultSize={{ width: '300', height: '100%' }}
           minWidth={'300'}
+          maxWidth={activeTab == 1 ? '300' : '600'}
           className="image-gallery-popup"
         >
+          {/* <div className="image-gallery-popup"></div> */}
           <div className="image-gallery-header">
             <h1>Your Invocations</h1>
             <IconButton

frontend/src/features/tabs/ImageToImage/ImageToImage.scss

@@ -18,17 +18,11 @@
 
 .image-to-image-display-area {
   display: grid;
-  grid-template-areas: 'image-to-image-display-area';
-
-  .image-to-image-display {
-    grid-area: image-to-image-display-area;
-  }
+  column-gap: 0.5rem;
 
   .image-gallery-area {
-    grid-area: image-to-image-display-area;
     z-index: 2;
-    place-self: end;
-    margin: 1rem;
+    height: 100%;
   }
 }
 
@@ -45,6 +39,7 @@
   border-radius: 0.5rem;
   background-color: var(--background-color-secondary);
   display: grid;
+  height: $app-content-height;
 
   .current-image-options {
     grid-auto-columns: max-content;
@@ -68,7 +63,7 @@
 .image-to-image-dual-preview {
   grid-area: img2img-preview;
   display: grid;
-  grid-template-columns: max-content max-content;
+  grid-template-columns: 1fr 1fr;
   column-gap: 0.5rem;
   padding: 0 1rem;
   place-content: center;

frontend/src/features/tabs/ImageToImage/ImageToImage.tsx

@@ -2,12 +2,24 @@ import React from 'react';
 import ImageToImagePanel from './ImageToImagePanel';
 import ImageToImageDisplay from './ImageToImageDisplay';
 import ImageGallery from '../../gallery/ImageGallery';
+import { RootState, useAppSelector } from '../../../app/store';
 
 export default function ImageToImage() {
+  const shouldShowGallery = useAppSelector(
+    (state: RootState) => state.gallery.shouldShowGallery
+  );
+
   return (
     <div className="image-to-image-workarea">
       <ImageToImagePanel />
-      <div className="image-to-image-display-area">
+      <div
+        className="image-to-image-display-area"
+        style={
+          shouldShowGallery
+            ? { gridTemplateColumns: 'auto max-content' }
+            : { gridTemplateColumns: 'auto' }
+        }
+      >
         <ImageToImageDisplay />
         <ImageGallery />
       </div>

frontend/src/features/tabs/TextToImage/TextToImage.scss

@@ -18,16 +18,17 @@
 .text-to-image-display {
   display: grid;
   grid-template-areas: 'text-to-image-display';
+  column-gap: 0.5rem;
 
   .current-image-display,
   .current-image-display-placeholder {
     grid-area: text-to-image-display;
+    height: $app-content-height;
   }
 
   .image-gallery-area {
-    grid-area: text-to-image-display;
+    height: 100%;
     z-index: 2;
     place-self: end;
-    margin: 1rem;
   }
 }

frontend/src/features/tabs/TextToImage/TextToImage.tsx

@@ -2,12 +2,24 @@ import React from 'react';
 import TextToImagePanel from './TextToImagePanel';
 import CurrentImageDisplay from '../../gallery/CurrentImageDisplay';
 import ImageGallery from '../../gallery/ImageGallery';
+import { RootState, useAppSelector } from '../../../app/store';
 
 export default function TextToImage() {
+  const shouldShowGallery = useAppSelector(
+    (state: RootState) => state.gallery.shouldShowGallery
+  );
+
   return (
     <div className="text-to-image-workarea">
       <TextToImagePanel />
-      <div className="text-to-image-display">
+      <div
+        className="text-to-image-display"
+        style={
+          shouldShowGallery
+            ? { gridTemplateColumns: 'auto max-content' }
+            : { gridTemplateColumns: 'auto' }
+        }
+      >
         <CurrentImageDisplay />
         <ImageGallery />
       </div>

frontend/src/styles/Mixins/_Variables.scss

@@ -8,9 +8,7 @@ $app-width: calc(100vw - $app-cutoff);
 $app-height: calc(100vh - $app-cutoff);
 $app-content-height: calc(100vh - $app-content-height-cutoff);
 $app-gallery-height: calc(100vh - ($app-content-height-cutoff + 6rem));
-$app-gallery-popover-height: calc(
-  100vh - ($app-content-height-cutoff - 2.5rem)
-);
+$app-gallery-popover-height: calc(100vh - ($app-content-height-cutoff + 6rem));
 $app-metadata-height: calc(100vh - ($app-content-height-cutoff + 4.4rem));
 
 // option bar