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/features/system/components/InvokeAILogoComponent.tsx

@@ -13,22 +13,16 @@ const InvokeAILogoComponent = () => {
       <Image
         src={InvokeAILogoImage}
         alt="invoke-ai-logo"
-        w="32px"
-        h="32px"
-        minW="32px"
-        minH="32px"
-        userSelect="none"
-      />
-      <Flex
-        gap={3}
-        display={{
-          base: 'inherit',
-          sm: 'none',
-          md: 'inherit',
+        sx={{
+          w: '32px',
+          h: '32px',
+          minW: '32px',
+          minH: '32px',
           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 { memo, useState } from 'react';
+import { Flex, Spacer } from '@chakra-ui/react';
+import { memo } from 'react';
 import StatusIndicator from './StatusIndicator';
 
-import InvokeAILogoComponent from './InvokeAILogoComponent';
-import SiteHeaderMenu from './SiteHeaderMenu';
-import useResolution from 'common/hooks/useResolution';
-import { FaBars } from 'react-icons/fa';
-import { useTranslation } from 'react-i18next';
+import { Link } from '@chakra-ui/react';
 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
-      gridTemplateColumns={{ base: 'auto', sm: 'auto max-content' }}
-      paddingRight={{ base: 10, xl: 0 }}
-      gap={2}
+    <Flex
+      sx={{
+        gap: 2,
+        alignItems: 'center',
+      }}
     >
-      <Flex justifyContent={{ base: 'center', sm: 'start' }}>
-        <InvokeAILogoComponent />
-      </Flex>
-      <Flex
-        alignItems="center"
-        gap={2}
-        justifyContent={{ base: 'center', sm: 'start' }}
-      >
-        <StatusIndicator />
+      <InvokeAILogoComponent />
+      <Spacer />
+      <StatusIndicator />
 
-        {resolution === 'desktop' ? (
-          <SiteHeaderMenu />
-        ) : (
+      {isModelManagerEnabled && (
+        <ModelManagerModal>
           <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>
-
-      {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>
+            aria-label={t('modelManager.modelManager')}
+            tooltip={t('modelManager.modelManager')}
+            size="sm"
+            variant="link"
+            data-variant="link"
+            fontSize={20}
+            icon={<FaCube />}
+          />
+        </ModelManagerModal>
       )}
-    </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>
   );
 };