draft mobile layout

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -233,6 +233,7 @@ const IAICanvasToolbar = () => {
     <Flex
       sx={{
         alignItems: 'center',
+        flexWrap: 'wrap',
         gap: 2,
       }}
     >

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

@@ -409,6 +409,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
         justifyContent: 'center',
         alignItems: 'center',
         columnGap: '0.5em',
+        flexWrap: 'wrap',
       }}
       {...props}
     >

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

@@ -7,6 +7,7 @@ import { MdPhoto } from 'react-icons/md';
 import { gallerySelector } from '../store/gallerySelectors';
 import CurrentImageButtons from './CurrentImageButtons';
 import CurrentImagePreview from './CurrentImagePreview';
+import { isMobile } from 'theme/util/isMobile';
 
 export const currentImageDisplaySelector = createSelector(
   [gallerySelector],
@@ -36,7 +37,7 @@ const CurrentImageDisplay = () => {
         flexDirection: 'column',
         height: '100%',
         width: '100%',
-        rowGap: 4,
+        rowGap: isMobile ? 0 : 4,
         borderRadius: 'base',
       }}
     >

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

@@ -26,6 +26,8 @@ import {
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
 import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
+import { isMobile } from 'theme/util/isMobile';
+import MediaQuery from 'react-responsive';
 
 const GALLERY_TAB_WIDTHS: Record<
   InvokeTabName,
@@ -147,6 +149,7 @@ export default function ImageGalleryPanel() {
   );
 
   const IMAGE_SIZE_STEP = 32;
+  const screenWidth = window.innerWidth;
 
   useHotkeys(
     'shift+up',
@@ -179,24 +182,35 @@ export default function ImageGalleryPanel() {
   );
 
   return (
-    <ResizableDrawer
-      direction="right"
-      isResizable={isResizable || !shouldPinGallery}
-      isOpen={shouldShowGallery}
-      onClose={handleCloseGallery}
-      isPinned={shouldPinGallery && !isLightboxOpen}
-      minWidth={
-        shouldPinGallery
-          ? GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
-          : 200
-      }
-      maxWidth={
-        shouldPinGallery
-          ? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
-          : undefined
-      }
-    >
-      <ImageGalleryContent />
-    </ResizableDrawer>
+    <>
+      <MediaQuery minDeviceWidth={768}>
+        <ResizableDrawer
+          direction="right"
+          isResizable={isResizable || !shouldPinGallery}
+          isOpen={shouldShowGallery}
+          onClose={handleCloseGallery}
+          isPinned={shouldPinGallery && !isLightboxOpen}
+          minWidth={
+            shouldPinGallery
+              ? isMobile
+                ? screenWidth
+                : GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
+              : 200
+          }
+          maxWidth={
+            shouldPinGallery
+              ? isMobile
+                ? screenWidth
+                : GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
+              : undefined
+          }
+        >
+          <ImageGalleryContent />
+        </ResizableDrawer>
+      </MediaQuery>
+      <MediaQuery maxDeviceWidth={768}>
+        <ImageGalleryContent />
+      </MediaQuery>
+    </>
   );
 }

invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx

@@ -23,7 +23,7 @@ export default function InvokeAccordionItem(props: InvokeAccordionItemProps) {
   return (
     <AccordionItem>
       <AccordionButton>
-        <Flex width="100%" gap={2} align="center">
+        <Flex width="100vw" gap={2} align="center">
           <Box flexGrow={1} textAlign="start">
             {header}
           </Box>

invokeai/frontend/web/src/features/parameters/components/PromptInput/PromptInput.tsx

@@ -15,6 +15,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { isEqual } from 'lodash';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
+import { isMobile } from 'theme/util/isMobile';
 
 const promptInputSelector = createSelector(
   [(state: RootState) => state.generation, activeTabNameSelector],
@@ -76,7 +77,7 @@ const PromptInput = () => {
           onKeyDown={handleKeyDown}
           resize="vertical"
           ref={promptRef}
-          minH={40}
+          minH={isMobile ? 20 : 40}
         />
       </FormControl>
     </Box>

invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx

@@ -2,6 +2,7 @@ import { Flex, Text, Image } from '@chakra-ui/react';
 import { RootState } from 'app/store';
 import { useAppSelector } from 'app/storeHooks';
 import InvokeAILogoImage from 'assets/images/logo.png';
+import MediaQuery from 'react-responsive';
 
 const InvokeAILogoComponent = () => {
   const appVersion = useAppSelector(
@@ -11,18 +12,20 @@ const InvokeAILogoComponent = () => {
   return (
     <Flex alignItems="center" gap={3} ps={1}>
       <Image src={InvokeAILogoImage} alt="invoke-ai-logo" w="32px" h="32px" />
-      <Text fontSize="xl">
-        invoke <strong>ai</strong>
-      </Text>
-      <Text
-        sx={{
-          fontWeight: 300,
-          marginTop: 1,
-        }}
-        variant="subtext"
-      >
-        {appVersion}
-      </Text>
+      <MediaQuery minDeviceWidth={768}>
+        <Text fontSize="xl">
+          invoke <strong>ai</strong>
+        </Text>
+        <Text
+          sx={{
+            fontWeight: 300,
+            marginTop: 1,
+          }}
+          variant="subtext"
+        >
+          {appVersion}
+        </Text>
+      </MediaQuery>
     </Flex>
   );
 };

invokeai/frontend/web/src/features/system/components/SiteHeader.tsx

@@ -1,127 +1,63 @@
-import { Flex, Grid, Link } from '@chakra-ui/react';
-
-import { FaBug, FaCube, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
-
-import IAIIconButton from 'common/components/IAIIconButton';
-
-import HotkeysModal from './HotkeysModal/HotkeysModal';
-
-import ModelManagerModal from './ModelManager/ModelManagerModal';
+import { Box, Flex, Grid } from '@chakra-ui/react';
+import React, { useState } from 'react';
 import ModelSelect from './ModelSelect';
-import SettingsModal from './SettingsModal/SettingsModal';
 import StatusIndicator from './StatusIndicator';
-import ThemeChanger from './ThemeChanger';
 
-import LanguagePicker from './LanguagePicker';
-
-import { useTranslation } from 'react-i18next';
-import { MdSettings } from 'react-icons/md';
 import InvokeAILogoComponent from './InvokeAILogoComponent';
+import MediaQuery from 'react-responsive';
+import SiteHeaderMenu from './SiteHeaderMenu';
+import { FaBars } from 'react-icons/fa';
 
 /**
- * Header, includes color mode toggle, settings button, status message.
+ * Header, includes logo, model select and status message.
  */
 const SiteHeader = () => {
-  const { t } = useTranslation();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const handleMenuToggle = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
 
   return (
-    <Grid gridTemplateColumns="auto max-content">
-      <InvokeAILogoComponent />
+    <>
+      <MediaQuery minDeviceWidth={768}>
+        <Grid gridTemplateColumns="auto max-content">
+          <InvokeAILogoComponent />
 
-      <Flex alignItems="center" gap={2}>
-        <StatusIndicator />
+          <Flex alignItems="center" gap={2}>
+            <StatusIndicator />
 
-        <ModelSelect />
+            <ModelSelect />
 
-        <ModelManagerModal>
-          <IAIIconButton
-            aria-label={t('modelManager.modelManager')}
-            tooltip={t('modelManager.modelManager')}
-            size="sm"
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            icon={<FaCube />}
-          />
-        </ModelManagerModal>
+            <SiteHeaderMenu />
+          </Flex>
+        </Grid>
+      </MediaQuery>
+      <MediaQuery maxDeviceWidth={768}>
+        <Flex>
+          <InvokeAILogoComponent />
 
-        <HotkeysModal>
-          <IAIIconButton
-            aria-label={t('common.hotkeysLabel')}
-            tooltip={t('common.hotkeysLabel')}
-            size="sm"
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            icon={<FaKeyboard />}
-          />
-        </HotkeysModal>
+          <Flex alignItems="center" gap={3} marginLeft="2rem">
+            <StatusIndicator />
 
-        <ThemeChanger />
-
-        <LanguagePicker />
-
-        <Link
-          isExternal
-          href="http://github.com/invoke-ai/InvokeAI/issues"
-          marginBottom="-0.25rem"
-        >
-          <IAIIconButton
-            aria-label={t('common.reportBugLabel')}
-            tooltip={t('common.reportBugLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaBug />}
-          />
-        </Link>
-
-        <Link
-          isExternal
-          href="http://github.com/invoke-ai/InvokeAI"
-          marginBottom="-0.25rem"
-        >
-          <IAIIconButton
-            aria-label={t('common.githubLabel')}
-            tooltip={t('common.githubLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaGithub />}
-          />
-        </Link>
-
-        <Link
-          isExternal
-          href="https://discord.gg/ZmtBAhwWhy"
-          marginBottom="-0.25rem"
-        >
-          <IAIIconButton
-            aria-label={t('common.discordLabel')}
-            tooltip={t('common.discordLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={20}
-            size="sm"
-            icon={<FaDiscord />}
-          />
-        </Link>
-
-        <SettingsModal>
-          <IAIIconButton
-            aria-label={t('common.settingsLabel')}
-            tooltip={t('common.settingsLabel')}
-            variant="link"
-            data-variant="link"
-            fontSize={22}
-            size="sm"
-            icon={<MdSettings />}
-          />
-        </SettingsModal>
-      </Flex>
-    </Grid>
+            <ModelSelect />
+          </Flex>
+          <Box
+            onClick={handleMenuToggle}
+            sx={{
+              marginLeft: '20px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <FaBars />
+          </Box>
+        </Flex>
+        {isMenuOpen && <SiteHeaderMenu />}
+      </MediaQuery>
+    </>
   );
 };
 

invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx

@@ -0,0 +1,120 @@
+import { Flex, Grid, Link } from '@chakra-ui/react';
+
+import { FaBug, FaCube, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
+
+import IAIIconButton from 'common/components/IAIIconButton';
+
+import HotkeysModal from './HotkeysModal/HotkeysModal';
+
+import ModelManagerModal from './ModelManager/ModelManagerModal';
+import SettingsModal from './SettingsModal/SettingsModal';
+import ThemeChanger from './ThemeChanger';
+
+import LanguagePicker from './LanguagePicker';
+
+import { useTranslation } from 'react-i18next';
+import { MdSettings } from 'react-icons/md';
+
+/**
+ * HeaderMenu, includes color mode toggle, settings button.
+ */
+const SiteHeaderMenu = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Grid gridTemplateColumns="auto max-content">
+      <Flex alignItems="center" gap={2}>
+        <ModelManagerModal>
+          <IAIIconButton
+            aria-label={t('modelManager.modelManager')}
+            tooltip={t('modelManager.modelManager')}
+            size="sm"
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            icon={<FaCube />}
+          />
+        </ModelManagerModal>
+
+        <HotkeysModal>
+          <IAIIconButton
+            aria-label={t('common.hotkeysLabel')}
+            tooltip={t('common.hotkeysLabel')}
+            size="sm"
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            icon={<FaKeyboard />}
+          />
+        </HotkeysModal>
+
+        <ThemeChanger />
+
+        <LanguagePicker />
+
+        <Link
+          isExternal
+          href="http://github.com/invoke-ai/InvokeAI/issues"
+          marginBottom="-0.25rem"
+        >
+          <IAIIconButton
+            aria-label={t('common.reportBugLabel')}
+            tooltip={t('common.reportBugLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            size="sm"
+            icon={<FaBug />}
+          />
+        </Link>
+
+        <Link
+          isExternal
+          href="http://github.com/invoke-ai/InvokeAI"
+          marginBottom="-0.25rem"
+        >
+          <IAIIconButton
+            aria-label={t('common.githubLabel')}
+            tooltip={t('common.githubLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            size="sm"
+            icon={<FaGithub />}
+          />
+        </Link>
+
+        <Link
+          isExternal
+          href="https://discord.gg/ZmtBAhwWhy"
+          marginBottom="-0.25rem"
+        >
+          <IAIIconButton
+            aria-label={t('common.discordLabel')}
+            tooltip={t('common.discordLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            size="sm"
+            icon={<FaDiscord />}
+          />
+        </Link>
+
+        <SettingsModal>
+          <IAIIconButton
+            aria-label={t('common.settingsLabel')}
+            tooltip={t('common.settingsLabel')}
+            variant="link"
+            data-variant="link"
+            fontSize={22}
+            size="sm"
+            icon={<MdSettings />}
+          />
+        </SettingsModal>
+      </Flex>
+    </Grid>
+  );
+};
+
+SiteHeaderMenu.displayName = 'SiteHeaderMenu';
+export default SiteHeaderMenu;

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>
+    </>
   );
 };