help(ui): Basic responsive updates to demonstrate

Made some basic responsive changes to demonstrate how to go about making changes.

There are a bunch of problems not addressed yet. Like dealing with the resizeable component and etc.

invokeai/frontend/web/src/app/App.tsx

@@ -41,7 +41,12 @@ const App = (props: PropsWithChildren) => {
           h={APP_HEIGHT}
         >
           {props.children || <SiteHeader />}
-          <Flex gap={4} w="full" h="full">
+          <Flex
+            gap={4}
+            w="full"
+            h="full"
+            flexDir={{ base: 'column', xl: 'row' }}
+          >
             <InvokeTabs />
             <ImageGalleryPanel />
           </Flex>

invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx

@@ -26,6 +26,7 @@ import {
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
+import useResolution from 'common/hooks/useResolution';
 
 const GALLERY_TAB_WIDTHS: Record<
   InvokeTabName,
@@ -96,6 +97,8 @@ export default function ImageGalleryPanel() {
     shouldPinGallery && dispatch(requestCanvasRescale());
   };
 
+  const resolution = useResolution();
+
   useHotkeys(
     'g',
     () => {
@@ -178,6 +181,11 @@ export default function ImageGalleryPanel() {
     [galleryImageMinimumWidth]
   );
 
+  const calcGalleryMinHeight = () => {
+    if (resolution == 'desktop') return;
+    return 600;
+  };
+
   return (
     <ResizableDrawer
       direction="right"
@@ -195,6 +203,7 @@ export default function ImageGalleryPanel() {
           ? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
           : undefined
       }
+      minHeight={calcGalleryMinHeight()}
     >
       <ImageGalleryContent />
     </ResizableDrawer>

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -174,8 +174,10 @@ export default function InvokeTabs() {
         dispatch(setActiveTab(index));
       }}
       flexGrow={1}
+      flexDir={{ base: 'column', xl: 'row' }}
+      gap={{ base: 4 }}
     >
-      <TabList>{tabs}</TabList>
+      <TabList flexDir={{ base: 'row', xl: 'column' }}>{tabs}</TabList>
       <TabPanels>{tabPanels}</TabPanels>
     </Tabs>
   );

invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, Flex } from '@chakra-ui/react';
+import { Box, BoxProps, Flex, Grid, GridItem } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { setInitialImage } from 'features/parameters/store/generationSlice';
@@ -54,12 +54,26 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
   };
 
   return (
-    <Flex {...rest} pos="relative" w="full" h={APP_CONTENT_HEIGHT} gap={4}>
+    <Grid
+      {...rest}
+      gridTemplateAreas={{
+        base: `'workarea-display' 'workarea-panel'`,
+        md: `'workarea-panel workarea-display'`,
+      }}
+      gridAutoRows={{ base: 'maxcontent auto' }}
+      gridAutoColumns={{ md: 'max-content auto' }}
+      pos="relative"
+      w="full"
+      h={APP_CONTENT_HEIGHT}
+      gap={4}
+    >
       <ParametersPanel>{parametersPanelContent}</ParametersPanel>
-      <Box pos="relative" w="100%" h="100%" onDrop={handleDrop}>
+      <GridItem gridArea="workarea-display">
-        {children}
+        <Box pos="relative" w="100%" h="100%" onDrop={handleDrop}>
-      </Box>
+          {children}
-    </Flex>
+        </Box>
+      </GridItem>
+    </Grid>
   );
 };
 

invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx

@@ -19,6 +19,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { activeTabNameSelector, uiSelector } from '../store/uiSelectors';
 import { isEqual } from 'lodash';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
+import useResolution from 'common/hooks/useResolution';
 
 const parametersPanelSelector = createSelector(
   [uiSelector, activeTabNameSelector, lightboxSelector],
@@ -58,6 +59,8 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
     dispatch(setShouldShowParametersPanel(false));
   };
 
+  const resolution = useResolution();
+
   useHotkeys(
     'o',
     () => {
@@ -88,21 +91,9 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
     },
     []
   );
-  return (
+
-    <ResizableDrawer
+  const parametersPanelContent = () => {
-      direction="left"
+    return (
-      isResizable={isResizable || !shouldPinParametersPanel}
-      isOpen={shouldShowParametersPanel}
-      onClose={closeParametersPanel}
-      isPinned={shouldPinParametersPanel || isLightboxOpen}
-      sx={{
-        borderColor: 'base.700',
-        p: shouldPinParametersPanel ? 0 : 4,
-        bg: 'base.900',
-      }}
-      initialWidth={PARAMETERS_PANEL_WIDTH}
-      minWidth={PARAMETERS_PANEL_WIDTH}
-    >
       <Flex flexDir="column" position="relative" h="full" w="full">
         {!shouldPinParametersPanel && (
           <Flex
@@ -122,8 +113,37 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
           />
         )}
       </Flex>
-    </ResizableDrawer>
+    );
-  );
+  };
+
+  const resizableParametersPanelContent = () => {
+    return (
+      <ResizableDrawer
+        direction="left"
+        isResizable={isResizable || !shouldPinParametersPanel}
+        isOpen={shouldShowParametersPanel}
+        onClose={closeParametersPanel}
+        isPinned={shouldPinParametersPanel || isLightboxOpen}
+        sx={{
+          borderColor: 'base.700',
+          p: shouldPinParametersPanel ? 0 : 4,
+          bg: 'base.900',
+        }}
+        initialWidth={PARAMETERS_PANEL_WIDTH}
+        minWidth={PARAMETERS_PANEL_WIDTH}
+      >
+        {parametersPanelContent()}
+      </ResizableDrawer>
+    );
+  };
+
+  const renderParametersPanel = () => {
+    if (['mobile', 'tablet'].includes(resolution))
+      return parametersPanelContent();
+    return resizableParametersPanelContent();
+  };
+
+  return resizableParametersPanelContent();
 };
 
 export default memo(ParametersPanel);