draft mobile layout

invokeai/frontend/web/src/theme/components/tabs.ts

@@ -4,6 +4,8 @@ import {
   defineStyle,
 } from '@chakra-ui/styled-system';
 
+import { isMobile } from 'theme/util/isMobile';
+
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
@@ -14,16 +16,26 @@ const invokeAIRoot = defineStyle((_props) => {
   };
 });
 
+const invokeAIRootMobile = defineStyle((_props) => {
+  return {
+    position: 'relative',
+    display: 'block',
+  };
+});
+
 const invokeAITab = defineStyle((_props) => ({}));
 
 const invokeAITablist = defineStyle((_props) => ({
   display: 'flex',
-  flexDirection: 'column',
+  flexDirection: isMobile ? 'row' : 'column',
   gap: 1,
   color: 'base.700',
+  justifyContent: isMobile ? 'center' : '',
   button: {
     fontSize: 'sm',
     padding: 2,
+    paddingLeft: isMobile ? '5vw' : '',
+    paddingRight: isMobile ? '5vw' : '',
     borderRadius: 'base',
     _selected: {
       bg: 'accent.700',
@@ -46,7 +58,7 @@ const invokeAITabpanel = defineStyle((_props) => ({
 }));
 
 const invokeAI = definePartsStyle((props) => ({
-  root: invokeAIRoot(props),
+  root: isMobile ? invokeAIRootMobile(props) : invokeAIRoot(props),
   tab: invokeAITab(props),
   tablist: invokeAITablist(props),
   tabpanel: invokeAITabpanel(props),

invokeai/frontend/web/src/theme/util/isMobile.ts

@@ -0,0 +1,5 @@
+export let isMobile = false;
+
+export function updateIsMobile() {
+  isMobile = window.innerWidth <= 768 || document.body.clientWidth <= 768;
+}