feat(ui): responsive wip

- Fixed a bunch of padding and margin issues across the app
- Fixed the Invoke logo compressing
- Disabled the visibility of the options panel pin button in tablet and mobile views
- Refined the header menu options in mobile and tablet views
- Refined other site header elements in mobile and tablet views
- Aligned Tab Icons to center in mobile and tablet views

invokeai/frontend/web/public/locales/en.json

@@ -19,7 +19,8 @@
         "toggleAutoscroll": "Toggle autoscroll",
         "toggleLogViewer": "Toggle Log Viewer",
         "showGallery": "Show Gallery",
-        "showOptionsPanel": "Show Options Panel"
+        "showOptionsPanel": "Show Options Panel",
+        "menu": "Menu"
     },
     "common": {
         "hotkeysLabel": "Hotkeys",

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

@@ -35,7 +35,7 @@ const App = (props: PropsWithChildren) => {
         <ProgressBar />
         <Grid
           gap={4}
-          p={{ base: 1, lg: 4 }}
+          p={4}
           gridAutoRows="min-content auto"
           w={APP_WIDTH}
           h={APP_HEIGHT}

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

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

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

@@ -189,8 +189,8 @@ export default function ImageGalleryPanel() {
 
   const imageGalleryContent = () => {
     return (
-      <Flex w="100vw" h="100vh">
-        <ImageGalleryContent />;
+      <Flex w="100vw" h="100vh" paddingRight={{ base: 8, xl: 0 }}>
+        <ImageGalleryContent />
       </Flex>
     );
   };

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

@@ -10,8 +10,15 @@ const InvokeAILogoComponent = () => {
 
   return (
     <Flex alignItems="center" gap={3} ps={1}>
-      <Image src={InvokeAILogoImage} alt="invoke-ai-logo" w="32px" h="32px" />
-      <Flex gap={3} display={{ base: 'none', sm: 'inherit' }}>
+      <Image
+        src={InvokeAILogoImage}
+        alt="invoke-ai-logo"
+        w="32px"
+        h="32px"
+        minW="32px"
+        minH="32px"
+      />
+      <Flex gap={3} display={{ base: 'none', md: 'inherit' }}>
         <Text fontSize="xl">
           invoke <strong>ai</strong>
         </Text>

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

@@ -7,6 +7,8 @@ import InvokeAILogoComponent from './InvokeAILogoComponent';
 import SiteHeaderMenu from './SiteHeaderMenu';
 import useResolution from 'common/hooks/useResolution';
 import { FaBars } from 'react-icons/fa';
+import { IAIIconButton } from 'exports';
+import { useTranslation } from 'react-i18next';
 
 /**
  * Header, includes color mode toggle, settings button, status message.
@@ -14,11 +16,13 @@ import { FaBars } from 'react-icons/fa';
 const SiteHeader = () => {
   const [menuOpened, setMenuOpened] = useState(false);
   const resolution = useResolution();
-
-  const isMobile = ['mobile', 'tablet'].includes(resolution);
+  const { t } = useTranslation();
 
   return (
-    <Grid gridTemplateColumns="auto max-content">
+    <Grid
+      gridTemplateColumns="auto max-content"
+      paddingRight={{ base: 10, xl: 0 }}
+    >
       <InvokeAILogoComponent />
 
       <Flex alignItems="center" gap={2}>
@@ -26,12 +30,33 @@ const SiteHeader = () => {
 
         <ModelSelect />
 
-        {!isMobile && <SiteHeaderMenu />}
-        <Flex>
-          {isMobile && <FaBars onClick={() => setMenuOpened(!menuOpened)} />}
-        </Flex>
+        {resolution === 'desktop' ? (
+          <SiteHeaderMenu />
+        ) : (
+          <IAIIconButton
+            icon={<FaBars />}
+            aria-label={t('accessibility.menu')}
+            background={menuOpened ? 'base.800' : 'none'}
+            _hover={{ background: menuOpened ? 'base.800' : 'none' }}
+            onClick={() => setMenuOpened(!menuOpened)}
+            p={0}
+          ></IAIIconButton>
+        )}
       </Flex>
-      <Flex>{isMobile && menuOpened && <SiteHeaderMenu />}</Flex>
+
+      {resolution !== 'desktop' && menuOpened && (
+        <Flex
+          position="absolute"
+          right={6}
+          top={16}
+          backgroundColor="base.800"
+          padding={4}
+          borderRadius={4}
+          zIndex={{ base: 99, xl: 0 }}
+        >
+          <SiteHeaderMenu />
+        </Flex>
+      )}
     </Grid>
   );
 };

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

@@ -13,7 +13,11 @@ const SiteHeaderMenu = () => {
   const { t } = useTranslation();
 
   return (
-    <>
+    <Flex
+      alignItems="center"
+      flexDirection={{ base: 'column', xl: 'row' }}
+      gap={{ base: 4, xl: 1 }}
+    >
       <ModelManagerModal>
         <IAIIconButton
           aria-label={t('modelManager.modelManager')}
@@ -101,7 +105,7 @@ const SiteHeaderMenu = () => {
           icon={<MdSettings />}
         />
       </SettingsModal>
-    </>
+    </Flex>
   );
 };
 

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

@@ -1,5 +1,6 @@
 import {
   ChakraProps,
+  Flex,
   Icon,
   Tab,
   TabList,
@@ -177,7 +178,12 @@ export default function InvokeTabs() {
       flexDir={{ base: 'column', xl: 'row' }}
       gap={{ base: 4 }}
     >
-      <TabList flexDir={{ base: 'row', xl: 'column' }}>{tabs}</TabList>
+      <TabList
+        flexDir={{ base: 'row', xl: 'column' }}
+        justifyContent={{ base: 'center', xl: 'start' }}
+      >
+        {tabs}
+      </TabList>
       <TabPanels>{tabPanels}</TabPanels>
     </Tabs>
   );

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

@@ -1,4 +1,4 @@
-import { Box, BoxProps, Flex, Grid, GridItem } from '@chakra-ui/react';
+import { Box, BoxProps, Grid, GridItem } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import { setInitialImage } from 'features/parameters/store/generationSlice';
@@ -65,6 +65,7 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
       pos="relative"
       w="full"
       h={APP_CONTENT_HEIGHT}
+      minH={{ base: 1000, xl: 'auto' }}
       gap={4}
     >
       <ParametersPanel>{parametersPanelContent}</ParametersPanel>
@@ -72,6 +73,7 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
         <Box
           pos="relative"
           w={{ base: '100vw', xl: 'full' }}
+          paddingRight={{ base: 8, xl: 0 }}
           h="100%"
           onDrop={handleDrop}
         >

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

@@ -99,6 +99,7 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
         position="relative"
         h="full"
         w={{ sm: 'full', lg: '100vw', xl: 'full' }}
+        paddingRight={{ base: 8, xl: 0 }}
       >
         {!shouldPinParametersPanel && (
           <Flex
@@ -108,11 +109,11 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
             alignItems="center"
           >
             <InvokeAILogoComponent />
-            <PinParametersPanelButton />
+            {resolution == 'desktop' && <PinParametersPanelButton />}
           </Flex>
         )}
         <Scrollable>{children}</Scrollable>
-        {shouldPinParametersPanel && (
+        {shouldPinParametersPanel && resolution == 'desktop' && (
           <PinParametersPanelButton
             sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}
           />

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

@@ -33,6 +33,7 @@ const PinParametersPanelButton = (props: PinParametersPanelButtonProps) => {
         icon={shouldPinParametersPanel ? <BsPinAngleFill /> : <BsPinAngle />}
         variant="ghost"
         size="sm"
+        px={{ base: 10, xl: 0 }}
         sx={{
           color: 'base.700',
           _hover: {