layout improvements

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

@@ -35,7 +35,7 @@ const App = (props: PropsWithChildren) => {
         <ProgressBar />
         <Grid
           gap={4}
-          p={4}
+          p={{ base: 1, lg: 4 }}
           gridAutoRows="min-content auto"
           w={APP_WIDTH}
           h={APP_HEIGHT}
@@ -43,7 +43,7 @@ const App = (props: PropsWithChildren) => {
           {props.children || <SiteHeader />}
           <Flex
             gap={4}
-            w="full"
+            w={{ base: '100vw', xl: 'full' }}
             h="full"
             flexDir={{ base: 'column', xl: 'row' }}
           >

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

@@ -406,6 +406,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
   return (
     <Flex
       sx={{
+        flexWrap: 'wrap',
         justifyContent: 'center',
         alignItems: 'center',
         columnGap: '0.5em',

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

@@ -27,6 +27,7 @@ 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';
+import { Flex } from '@chakra-ui/react';
 
 const GALLERY_TAB_WIDTHS: Record<
   InvokeTabName,
@@ -182,30 +183,47 @@ export default function ImageGalleryPanel() {
   );
 
   const calcGalleryMinHeight = () => {
-    if (resolution == 'desktop') return;
+    if (resolution === 'desktop') return;
-    return 600;
+    return 300;
   };
 
-  return (
+  const imageGalleryContent = () => {
-    <ResizableDrawer
+    return (
-      direction="right"
+      <Flex w="100vw" h="100vh">
-      isResizable={isResizable || !shouldPinGallery}
+        <ImageGalleryContent />;
-      isOpen={shouldShowGallery}
+      </Flex>
-      onClose={handleCloseGallery}
+    );
-      isPinned={shouldPinGallery && !isLightboxOpen}
+  };
-      minWidth={
+
-        shouldPinGallery
+  const resizableImageGalleryContent = () => {
-          ? GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
+    return (
-          : 200
+      <ResizableDrawer
-      }
+        direction="right"
-      maxWidth={
+        isResizable={isResizable || !shouldPinGallery}
-        shouldPinGallery
+        isOpen={shouldShowGallery}
-          ? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
+        onClose={handleCloseGallery}
-          : undefined
+        isPinned={shouldPinGallery && !isLightboxOpen}
-      }
+        minWidth={
-      minHeight={calcGalleryMinHeight()}
+          shouldPinGallery
-    >
+            ? GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
-      <ImageGalleryContent />
+            : 200
-    </ResizableDrawer>
+        }
-  );
+        maxWidth={
+          shouldPinGallery
+            ? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
+            : undefined
+        }
+        minHeight={calcGalleryMinHeight()}
+      >
+        <ImageGalleryContent />
+      </ResizableDrawer>
+    );
+  };
+
+  const renderImageGallery = () => {
+    if (['mobile', 'tablet'].includes(resolution)) return imageGalleryContent();
+    return resizableImageGalleryContent();
+  };
+
+  return renderImageGallery();
 }

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

@@ -76,7 +76,7 @@ const PromptInput = () => {
           onKeyDown={handleKeyDown}
           resize="vertical"
           ref={promptRef}
-          minH={40}
+          minH={{ base: 20, lg: 40 }}
         />
       </FormControl>
     </Box>

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

@@ -11,18 +11,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">
+      <Flex gap={3} display={{ base: 'none', sm: 'inherit' }}>
-        invoke <strong>ai</strong>
+        <Text fontSize="xl">
-      </Text>
+          invoke <strong>ai</strong>
-      <Text
+        </Text>
-        sx={{
+        <Text
-          fontWeight: 300,
+          sx={{
-          marginTop: 1,
+            fontWeight: 300,
-        }}
+            marginTop: 1,
-        variant="subtext"
+          }}
-      >
+          variant="subtext"
-        {appVersion}
+        >
-      </Text>
+          {appVersion}
+        </Text>
+      </Flex>
     </Flex>
   );
 };

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

@@ -1,28 +1,21 @@
-import { Flex, Grid, Link } from '@chakra-ui/react';
+import { Flex, Grid } from '@chakra-ui/react';
-
+import { useState } from '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 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 SiteHeaderMenu from './SiteHeaderMenu';
+import useResolution from 'common/hooks/useResolution';
+import { FaBars } from 'react-icons/fa';
 
 /**
  * Header, includes color mode toggle, settings button, status message.
  */
 const SiteHeader = () => {
-  const { t } = useTranslation();
+  const [menuOpened, setMenuOpened] = useState(false);
+  const resolution = useResolution();
+
+  const isMobile = ['mobile', 'tablet'].includes(resolution);
 
   return (
     <Grid gridTemplateColumns="auto max-content">
@@ -33,94 +26,12 @@ const SiteHeader = () => {
 
         <ModelSelect />
 
-        <ModelManagerModal>
+        {!isMobile && <SiteHeaderMenu />}
-          <IAIIconButton
+        <Flex>
-            aria-label={t('modelManager.modelManager')}
+          {isMobile && <FaBars onClick={() => setMenuOpened(!menuOpened)} />}
-            tooltip={t('modelManager.modelManager')}
+        </Flex>
-            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>
+      <Flex>{isMobile && menuOpened && <SiteHeaderMenu />}</Flex>
     </Grid>
   );
 };

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

@@ -0,0 +1,109 @@
+import { Flex, Link } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { FaCube, FaKeyboard, FaBug, FaGithub, FaDiscord } from 'react-icons/fa';
+import { MdSettings } from 'react-icons/md';
+import HotkeysModal from './HotkeysModal/HotkeysModal';
+import LanguagePicker from './LanguagePicker';
+import ModelManagerModal from './ModelManager/ModelManagerModal';
+import SettingsModal from './SettingsModal/SettingsModal';
+import ThemeChanger from './ThemeChanger';
+import IAIIconButton from 'common/components/IAIIconButton';
+
+const SiteHeaderMenu = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <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>
+    </>
+  );
+};
+
+SiteHeaderMenu.displayName = 'SiteHeaderMenu';
+export default SiteHeaderMenu;

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

@@ -58,7 +58,7 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
       {...rest}
       gridTemplateAreas={{
         base: `'workarea-display' 'workarea-panel'`,
-        md: `'workarea-panel workarea-display'`,
+        xl: `'workarea-panel workarea-display'`,
       }}
       gridAutoRows={{ base: 'maxcontent auto' }}
       gridAutoColumns={{ md: 'max-content auto' }}
@@ -69,7 +69,12 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
     >
       <ParametersPanel>{parametersPanelContent}</ParametersPanel>
       <GridItem gridArea="workarea-display">
-        <Box pos="relative" w="100%" h="100%" onDrop={handleDrop}>
+        <Box
+          pos="relative"
+          w={{ base: '100vw', xl: 'full' }}
+          h="100%"
+          onDrop={handleDrop}
+        >
           {children}
         </Box>
       </GridItem>

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

@@ -94,7 +94,12 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
 
   const parametersPanelContent = () => {
     return (
-      <Flex flexDir="column" position="relative" h="full" w="full">
+      <Flex
+        flexDir="column"
+        position="relative"
+        h="full"
+        w={{ sm: 'full', lg: '100vw', xl: 'full' }}
+      >
         {!shouldPinParametersPanel && (
           <Flex
             paddingTop={1.5}
@@ -143,7 +148,7 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
     return resizableParametersPanelContent();
   };
 
-  return resizableParametersPanelContent();
+  return renderParametersPanel();
 };
 
 export default memo(ParametersPanel);

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

@@ -32,7 +32,7 @@ const ImageToImageContent = () => {
       sx={{
         w: '100%',
         h: '100%',
-        gridTemplateColumns: '1fr 1fr',
+        gridTemplateColumns: { base: '1fr 4fr', xl: '1fr 1fr' },
         borderRadius: 'base',
         bg: 'base.850',
       }}