Fixes responsive images (omg finally), removes app padding

frontend/src/app/App.scss

@@ -2,20 +2,18 @@
 
 .App {
   display: grid;
-  width: max-content;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--background-color);
 }
 
 .app-content {
   display: grid;
-  row-gap: 1rem;
+  row-gap: 0.5rem;
-  margin: 0.6rem;
+  padding: $app-padding;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  background-color: var(--background-color);
   grid-auto-rows: max-content;
   width: $app-width;
   height: $app-height;
-  min-width: min-content;
 }
 
 .app-console {

frontend/src/features/gallery/CurrentImageDisplay.scss

@@ -7,9 +7,6 @@
   row-gap: 1rem;
   background-color: var(--background-color-secondary);
   border-radius: 0.5rem;
-  &[data-tab-name='txt2img'] {
-    height: $app-text-to-image-height;
-  }
 }
 
 .current-image-options {
@@ -24,25 +21,22 @@
   }
 }
 
-.current-image-viewer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
 .current-image-preview {
   position: relative;
   justify-content: center;
   align-items: center;
   display: flex;
   width: 100%;
-  // height: 100%;
+  height: 100%;
-  height: $app-text-to-image-height;
 
   img {
     background-color: var(--img2img-img-bg-color);
     border-radius: 0.5rem;
     object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    position: absolute;
   }
 }
 

frontend/src/features/gallery/CurrentImageDisplay.tsx

@@ -2,7 +2,6 @@ import { RootState, useAppSelector } from '../../app/store';
 import CurrentImageButtons from './CurrentImageButtons';
 import { MdPhoto } from 'react-icons/md';
 import CurrentImagePreview from './CurrentImagePreview';
-import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
 import { tabMap } from '../tabs/InvokeTabs';
 import { GalleryState } from './gallerySlice';
 import { OptionsState } from '../options/optionsSlice';
@@ -37,7 +36,6 @@ const CurrentImageDisplay = () => {
     currentImage,
     intermediateImage,
     activeTabName,
-    shouldShowImageDetails,
   } = useAppSelector(currentImageDisplaySelector);
 
   const imageToDisplay = intermediateImage || currentImage;
@@ -47,15 +45,7 @@ const CurrentImageDisplay = () => {
       {imageToDisplay ? (
         <>
           <CurrentImageButtons image={imageToDisplay} />
-          <div className="current-image-viewer">
           <CurrentImagePreview imageToDisplay={imageToDisplay} />
-            {shouldShowImageDetails && (
-              <ImageMetadataViewer
-                image={imageToDisplay}
-                styleClass="current-image-metadata"
-              />
-            )}
-          </div>
         </>
       ) : (
         <div className="current-image-display-placeholder">

frontend/src/features/gallery/CurrentImagePreview.tsx

@@ -7,6 +7,7 @@ import * as InvokeAI from '../../app/invokeai';
 import { createSelector } from '@reduxjs/toolkit';
 import _ from 'lodash';
 import { OptionsState } from '../options/optionsSlice';
+import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
 
 export const imagesSelector = createSelector(
   [(state: RootState) => state.gallery, (state: RootState) => state.options],
@@ -72,9 +73,8 @@ export default function CurrentImagePreview(props: CurrentImagePreviewProps) {
     <div className={'current-image-preview'}>
       <Image
         src={imageToDisplay.url}
-        fit="contain"
+        width={imageToDisplay.width}
-        maxWidth={'100%'}
+        height={imageToDisplay.height}
-        maxHeight={'100%'}
       />
       {!shouldShowImageDetails && (
         <div className="current-image-next-prev-buttons">
@@ -108,6 +108,12 @@ export default function CurrentImagePreview(props: CurrentImagePreviewProps) {
           </div>
         </div>
       )}
+      {shouldShowImageDetails && (
+        <ImageMetadataViewer
+          image={imageToDisplay}
+          styleClass="current-image-metadata"
+        />
+      )}
     </div>
   );
 }

frontend/src/features/system/ProgressBar.scss

@@ -1,7 +1,19 @@
+@use '../../styles/Mixins/' as *;
+
 .progress-bar {
   background-color: var(--root-bg-color);
+  height: $progress-bar-thickness !important;
 
   div {
     background-color: var(--progress-bar-color);
+    &[data-indeterminate] {
+      background-color: unset;
+      background-image: linear-gradient(
+        to right,
+        transparent 0%,
+        var(--progress-bar-color) 50%,
+        transparent 100%
+      );
+    }
   }
 }

frontend/src/features/system/ProgressBar.tsx

@@ -28,7 +28,6 @@ const ProgressBar = () => {
 
   return (
     <Progress
-      height="4px"
       value={value}
       isIndeterminate={isProcessing && !currentStatusHasSteps}
       className="progress-bar"

frontend/src/features/system/SiteHeader.scss

@@ -4,10 +4,10 @@
 }
 
 .site-header-left-side {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(2, max-content);
-  column-gap: 0.6rem;
   align-items: center;
+  column-gap: 0.7rem;
+  padding-left: 0.5rem;
 
   img {
     width: 32px;
@@ -20,8 +20,7 @@
 }
 
 .site-header-right-side {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(7, max-content);
   align-items: center;
   column-gap: 0.5rem;
 }

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

@@ -39,16 +39,17 @@
 }
 
 .init-image-preview {
+  position: relative;
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: $app-text-to-image-height;
 
   img {
     border-radius: 0.5rem;
     object-fit: contain;
+    position: absolute;
   }
 }
 

frontend/src/features/tabs/InvokeTabs.scss

@@ -3,7 +3,7 @@
 .app-tabs {
   display: grid !important;
   grid-template-columns: min-content auto;
-  column-gap: 1rem;
+  column-gap: 0.5rem;
 }
 
 .app-tabs-list {

frontend/src/features/tabs/InvokeWorkarea.scss

@@ -7,7 +7,7 @@
 
   .workarea-main {
     display: flex;
-    column-gap: 1rem;
+    column-gap: 0.5rem;
 
     .workarea-options-panel {
       width: $options-bar-max-width;
@@ -19,14 +19,14 @@
       width: 100%;
       display: grid;
       grid-template-columns: 1fr 1fr;
-      height: $app-content-height;
+      // height: $app-content-height;
       background-color: var(--background-color-secondary);
       border-radius: 0.5rem;
     }
 
     .workarea-single-view {
       width: 100%;
-      height: $app-content-height;
+      // height: $app-content-height;
       background-color: var(--background-color-secondary);
       border-radius: 0.5rem;
     }

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

@@ -2,6 +2,7 @@
 
 .text-to-image-area {
   padding: 1rem;
+  height: 100%;
 }
 
 .text-to-image-panel {

frontend/src/styles/Mixins/_Variables.scss

@@ -1,16 +1,20 @@
 // Calc Values
-$app-cutoff: 1.6rem;
+$app-cutoff: 0px;
-$app-content-height-cutoff: 7rem; // default: 7rem
+$app-content-height-cutoff: 4rem; // default: 7rem
 
 // Usage Variables
 // app
+$app-padding: 0.5rem;
+$progress-bar-thickness: 0.3rem;
 $app-width: calc(100vw - $app-cutoff);
-$app-height: calc(100vh - $app-cutoff);
+$app-height: calc(100vh - $progress-bar-thickness);
 $app-content-height: calc(100vh - $app-content-height-cutoff);
 $app-gallery-height: calc(100vh - ($app-content-height-cutoff + 5.5rem));
 $app-gallery-popover-height: calc(100vh - ($app-content-height-cutoff + 6rem));
 $app-metadata-height: calc(100vh - ($app-content-height-cutoff + 4.4rem));
-$app-text-to-image-height: calc(100vh - 9.4375rem - 1.925rem - 1.15rem); // do not touch ffs
+$app-text-to-image-height: calc(
+  100vh - 9.4375rem - 1.925rem - 1.15rem
+); // do not touch ffs
 
 // option bar
 $options-bar-max-width: 22.5rem;

frontend/src/styles/index.scss

@@ -74,6 +74,7 @@ html,
 body {
   @include HideScrollbar;
   background-color: var(--root-bg-color);
+  overflow: hidden;
 }
 
 #root {