draft mobile layout

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

@@ -13,6 +13,9 @@ import useGetImageByUuid from 'features/gallery/hooks/useGetImageByUuid';
 import { isEqual } from 'lodash';
 import { APP_CONTENT_HEIGHT } from 'theme/util/constants';
 import ParametersPanel from './ParametersPanel';
+import MediaQuery from 'react-responsive';
+import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
+import { isMobile } from 'theme/util/isMobile';
 
 const workareaSelector = createSelector(
   [uiSelector, activeTabNameSelector],
@@ -54,12 +57,31 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
   };
 
   return (
-    <Flex {...rest} pos="relative" w="full" h={APP_CONTENT_HEIGHT} gap={4}>
-      <ParametersPanel>{parametersPanelContent}</ParametersPanel>
-      <Box pos="relative" w="100%" h="100%" onDrop={handleDrop}>
-        {children}
-      </Box>
-    </Flex>
+    <>
+      <MediaQuery minDeviceWidth={768}>
+        <Flex {...rest} pos="relative" w="full" h={APP_CONTENT_HEIGHT} gap={4}>
+          <ParametersPanel>{parametersPanelContent}</ParametersPanel>
+          <Box pos="relative" w="100%" h="100%" onDrop={handleDrop}>
+            {children}
+          </Box>
+        </Flex>
+      </MediaQuery>
+      <MediaQuery maxDeviceWidth={768}>
+        <Flex
+          {...rest}
+          display="block"
+          pos="relative"
+          w="full"
+          h={APP_CONTENT_HEIGHT}
+        >
+          <Box pos="sticky" w="full" h="70%" onDrop={handleDrop}>
+            {children}
+          </Box>
+          <ParametersPanel>{parametersPanelContent}</ParametersPanel>
+          {isMobile && <ImageGalleryPanel />}
+        </Flex>
+      </MediaQuery>
+    </>
   );
 };
 

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

@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 
 import { memo, ReactNode } from 'react';
@@ -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 MediaQuery from 'react-responsive';
 
 const parametersPanelSelector = createSelector(
   [uiSelector, activeTabNameSelector, lightboxSelector],
@@ -89,40 +90,49 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
     []
   );
   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}
-    >
-      <Flex flexDir="column" position="relative" h="full" w="full">
-        {!shouldPinParametersPanel && (
-          <Flex
-            paddingTop={1.5}
-            paddingBottom={4}
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <InvokeAILogoComponent />
-            <PinParametersPanelButton />
+    <>
+      <MediaQuery minDeviceWidth={768}>
+        <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}
+        >
+          <Flex flexDir="column" position="relative" h="full" w="full">
+            {!shouldPinParametersPanel && (
+              <Flex
+                paddingTop={1.5}
+                paddingBottom={4}
+                justifyContent="space-between"
+                alignItems="center"
+              >
+                <InvokeAILogoComponent />
+                <PinParametersPanelButton />
+              </Flex>
+            )}
+            <Scrollable>{children}</Scrollable>
+            {shouldPinParametersPanel && (
+              <PinParametersPanelButton
+                sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
+              />
+            )}
           </Flex>
-        )}
-        <Scrollable>{children}</Scrollable>
-        {shouldPinParametersPanel && (
-          <PinParametersPanelButton
-            sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
-          />
-        )}
-      </Flex>
-    </ResizableDrawer>
+        </ResizableDrawer>
+      </MediaQuery>
+      <MediaQuery maxDeviceWidth={768}>
+        <Box flexDir="column" w="full" h="50rem">
+          {children}
+        </Box>
+      </MediaQuery>
+    </>
   );
 };
 

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageContent.tsx

@@ -4,6 +4,7 @@ import { useAppSelector } from 'app/storeHooks';
 import ImageUploadButton from 'common/components/ImageUploaderButton';
 import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
 import InitImagePreview from './InitImagePreview';
+import MediaQuery from 'react-responsive';
 
 const workareaSplitViewStyle: ChakraProps['sx'] = {
   flexDirection: 'column',
@@ -28,22 +29,44 @@ const ImageToImageContent = () => {
   );
 
   return (
-    <Grid
-      sx={{
-        w: '100%',
-        h: '100%',
-        gridTemplateColumns: '1fr 1fr',
-        borderRadius: 'base',
-        bg: 'base.850',
-      }}
-    >
-      <Flex sx={{ ...workareaSplitViewStyle, paddingInlineEnd: 2 }}>
-        {imageToImageComponent}
-      </Flex>
-      <Flex sx={{ ...workareaSplitViewStyle, paddingInlineStart: 2 }}>
-        <CurrentImageDisplay />
-      </Flex>
-    </Grid>
+    <>
+      <MediaQuery minDeviceWidth={768}>
+        <Grid
+          sx={{
+            w: '100%',
+            h: '100%',
+            gridTemplateColumns: '1fr 1fr',
+            borderRadius: 'base',
+            bg: 'base.850',
+          }}
+        >
+          <Flex sx={{ ...workareaSplitViewStyle, paddingInlineEnd: 2 }}>
+            {imageToImageComponent}
+          </Flex>
+          <Flex sx={{ ...workareaSplitViewStyle, paddingInlineStart: 2 }}>
+            <CurrentImageDisplay />
+          </Flex>
+        </Grid>
+      </MediaQuery>
+      <MediaQuery maxDeviceWidth={768}>
+        <Grid
+          sx={{
+            w: '100%',
+            h: '100%',
+            gridTemplateColumns: '1fr 3fr',
+            borderRadius: 'base',
+            bg: 'base.850',
+          }}
+        >
+          <Flex sx={{ ...workareaSplitViewStyle, paddingInlineEnd: 2 }}>
+            {imageToImageComponent}
+          </Flex>
+          <Flex sx={{ ...workareaSplitViewStyle, paddingInlineStart: 2 }}>
+            <CurrentImageDisplay />
+          </Flex>
+        </Grid>
+      </MediaQuery>
+    </>
   );
 };
 

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageContent.tsx

@@ -1,20 +1,39 @@
 import { Box, Flex } from '@chakra-ui/react';
 import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
+import MediaQuery from 'react-responsive';
 
 const TextToImageContent = () => {
   return (
-    <Box
-      sx={{
-        width: '100%',
-        height: '100%',
-        borderRadius: 'base',
-        bg: 'base.850',
-      }}
-    >
-      <Flex sx={{ p: 4, width: '100%', height: '100%' }}>
-        <CurrentImageDisplay />
-      </Flex>
-    </Box>
+    <>
+      <MediaQuery minDeviceWidth={768}>
+        <Box
+          sx={{
+            width: '100%',
+            height: '100%',
+            borderRadius: 'base',
+            bg: 'base.850',
+          }}
+        >
+          <Flex sx={{ p: 4, width: '100%', height: '100%' }}>
+            <CurrentImageDisplay />
+          </Flex>
+        </Box>
+      </MediaQuery>
+      <MediaQuery maxDeviceWidth={768}>
+        <Box
+          sx={{
+            position: 'relative',
+            width: 'full',
+            height: 'full',
+            bg: 'base.850',
+          }}
+        >
+          <Flex sx={{ height: '100%' }}>
+            <CurrentImageDisplay />
+          </Flex>
+        </Box>
+      </MediaQuery>
+    </>
   );
 };