feat(ui): improve UI on smaller screens

- responsive changes were causing a lot of weird layout issues, had to remove the rest of them
- canvas (non-beta) toolbar now wraps
- reduces minH for prompt boxes a bit

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

@@ -76,18 +76,21 @@ const App = ({
         {isLightboxEnabled && <Lightbox />}
         <ImageUploader>
           <Grid
-            gap={4}
+            sx={{
-            p={4}
+              gap: 4,
-            gridAutoRows="min-content auto"
+              p: 4,
-            w={APP_WIDTH}
+              gridAutoRows: 'min-content auto',
-            h={APP_HEIGHT}
+              w: 'full',
+              h: 'full',
+            }}
           >
             {headerComponent || <SiteHeader />}
             <Flex
-              gap={4}
+              sx={{
-              w={{ base: '100vw', xl: 'full' }}
+                gap: 4,
-              h="full"
+                w: 'full',
-              flexDir={{ base: 'column', xl: 'row' }}
+                h: 'full',
+              }}
             >
               <InvokeTabs />
             </Flex>

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

@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex } from '@chakra-ui/react';
+import { Box, ButtonGroup, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
@@ -210,16 +210,19 @@ const IAICanvasToolbar = () => {
       sx={{
         alignItems: 'center',
         gap: 2,
+        flexWrap: 'wrap',
       }}
     >
-      <IAISelect
+      <Box w={24}>
-        tooltip={`${t('unifiedCanvas.layer')} (Q)`}
+        <IAISelect
-        tooltipProps={{ hasArrow: true, placement: 'top' }}
+          tooltip={`${t('unifiedCanvas.layer')} (Q)`}
-        value={layer}
+          tooltipProps={{ hasArrow: true, placement: 'top' }}
-        validValues={LAYER_NAMES_DICT}
+          value={layer}
-        onChange={handleChangeLayer}
+          validValues={LAYER_NAMES_DICT}
-        isDisabled={isStaging}
+          onChange={handleChangeLayer}
-      />
+          isDisabled={isStaging}
+        />
+      </Box>
 
       <IAICanvasMaskOptions />
       <IAICanvasToolChooserOptions />

invokeai/frontend/web/src/features/nodes/components/FieldTypeLegend.tsx

@@ -6,7 +6,7 @@ import { memo } from 'react';
 
 const FieldTypeLegend = () => {
   return (
-    <Flex gap={2} flexDirection={{ base: 'column', xl: 'row' }}>
+    <Flex sx={{ gap: 2, flexDir: 'column' }}>
       {map(FIELDS, ({ title, description, color }, key) => (
         <Tooltip key={key} label={description}>
           <Badge

invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx

@@ -11,7 +11,7 @@ const NodeEditor = () => {
       sx={{
         position: 'relative',
         width: 'full',
-        height: { base: '100vh', xl: 'full' },
+        height: 'full',
         borderRadius: 'md',
         bg: 'base.850',
       }}

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamNegativeConditioning.tsx

@@ -25,6 +25,7 @@ const ParamNegativeConditioning = () => {
           borderColor: 'error.600',
         }}
         fontSize="sm"
+        minH={16}
       />
     </FormControl>
   );

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx

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

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

@@ -13,22 +13,16 @@ const InvokeAILogoComponent = () => {
       <Image
         src={InvokeAILogoImage}
         alt="invoke-ai-logo"
-        w="32px"
+        sx={{
-        h="32px"
+          w: '32px',
-        minW="32px"
+          h: '32px',
-        minH="32px"
+          minW: '32px',
-        userSelect="none"
+          minH: '32px',
-      />
-      <Flex
-        gap={3}
-        display={{
-          base: 'inherit',
-          sm: 'none',
-          md: 'inherit',
           userSelect: 'none',
         }}
-      >
+      />
-        <Text fontSize="xl">
+      <Flex sx={{ gap: 3 }}>
+        <Text sx={{ fontSize: 'xl', userSelect: 'none' }}>
           invoke <strong>ai</strong>
         </Text>
         <Text

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

@@ -1,66 +1,138 @@
-import { Flex, Grid } from '@chakra-ui/react';
+import { Flex, Spacer } from '@chakra-ui/react';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 import StatusIndicator from './StatusIndicator';
 
-import InvokeAILogoComponent from './InvokeAILogoComponent';
+import { Link } from '@chakra-ui/react';
-import SiteHeaderMenu from './SiteHeaderMenu';
-import useResolution from 'common/hooks/useResolution';
-import { FaBars } from 'react-icons/fa';
-import { useTranslation } from 'react-i18next';
 import IAIIconButton from 'common/components/IAIIconButton';
+import { useTranslation } from 'react-i18next';
+import { FaBug, FaCube, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
+import { MdSettings } from 'react-icons/md';
+import HotkeysModal from './HotkeysModal/HotkeysModal';
+import InvokeAILogoComponent from './InvokeAILogoComponent';
+import LanguagePicker from './LanguagePicker';
+import ModelManagerModal from './ModelManager/ModelManagerModal';
+import SettingsModal from './SettingsModal/SettingsModal';
+import ThemeChanger from './ThemeChanger';
+import { useFeatureStatus } from '../hooks/useFeatureStatus';
 
-/**
- * Header, includes color mode toggle, settings button, status message.
- */
 const SiteHeader = () => {
-  const [menuOpened, setMenuOpened] = useState(false);
-  const resolution = useResolution();
   const { t } = useTranslation();
 
+  const isModelManagerEnabled =
+    useFeatureStatus('modelManager').isFeatureEnabled;
+  const isLocalizationEnabled =
+    useFeatureStatus('localization').isFeatureEnabled;
+  const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
+  const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
+  const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
+
   return (
-    <Grid
+    <Flex
-      gridTemplateColumns={{ base: 'auto', sm: 'auto max-content' }}
+      sx={{
-      paddingRight={{ base: 10, xl: 0 }}
+        gap: 2,
-      gap={2}
+        alignItems: 'center',
+      }}
     >
-      <Flex justifyContent={{ base: 'center', sm: 'start' }}>
+      <InvokeAILogoComponent />
-        <InvokeAILogoComponent />
+      <Spacer />
-      </Flex>
+      <StatusIndicator />
-      <Flex
-        alignItems="center"
-        gap={2}
-        justifyContent={{ base: 'center', sm: 'start' }}
-      >
-        <StatusIndicator />
 
-        {resolution === 'desktop' ? (
+      {isModelManagerEnabled && (
-          <SiteHeaderMenu />
+        <ModelManagerModal>
-        ) : (
           <IAIIconButton
-            icon={<FaBars />}
+            aria-label={t('modelManager.modelManager')}
-            aria-label={t('accessibility.menu')}
+            tooltip={t('modelManager.modelManager')}
-            background={menuOpened ? 'base.800' : 'none'}
+            size="sm"
-            _hover={{ background: menuOpened ? 'base.800' : 'none' }}
+            variant="link"
-            onClick={() => setMenuOpened(!menuOpened)}
+            data-variant="link"
-            p={0}
+            fontSize={20}
-          ></IAIIconButton>
+            icon={<FaCube />}
-        )}
+          />
-      </Flex>
+        </ModelManagerModal>
-
-      {resolution !== 'desktop' && menuOpened && (
-        <Flex
-          position="absolute"
-          right={6}
-          top={{ base: 28, sm: 16 }}
-          backgroundColor="base.800"
-          padding={4}
-          borderRadius={4}
-          zIndex={{ base: 99, xl: 0 }}
-        >
-          <SiteHeaderMenu />
-        </Flex>
       )}
-    </Grid>
+
+      <HotkeysModal>
+        <IAIIconButton
+          aria-label={t('common.hotkeysLabel')}
+          tooltip={t('common.hotkeysLabel')}
+          size="sm"
+          variant="link"
+          data-variant="link"
+          fontSize={20}
+          icon={<FaKeyboard />}
+        />
+      </HotkeysModal>
+
+      <ThemeChanger />
+
+      {isLocalizationEnabled && <LanguagePicker />}
+
+      {isBugLinkEnabled && (
+        <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>
+      )}
+
+      {isGithubLinkEnabled && (
+        <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>
+      )}
+
+      {isDiscordLinkEnabled && (
+        <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>
   );
 };
 

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

@@ -152,16 +152,18 @@ const InvokeTabs = () => {
       onChange={(index: number) => {
         dispatch(setActiveTab(index));
       }}
-      flexGrow={1}
+      sx={{
-      flexDir={{ base: 'column', xl: 'row' }}
+        flexGrow: 1,
-      gap={{ base: 4 }}
+        gap: 4,
+      }}
       isLazy
     >
       <TabList
-        pt={2}
+        sx={{
-        gap={4}
+          pt: 2,
-        flexDir={{ base: 'row', xl: 'column' }}
+          gap: 4,
-        justifyContent={{ base: 'center', xl: 'start' }}
+          flexDir: 'column',
+        }}
       >
         {tabs}
         <Spacer />

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

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