adjust breakpoints and default window size to account for new chat area width

ui/desktop/src/components/BaseChat.tsx

@@ -354,7 +354,9 @@ function BaseChatContent({
               recipeConfig && (
                 <Splash
                   append={(text: string) => append(text)}
-                  activities={Array.isArray(recipeConfig.activities) ? recipeConfig.activities : null}
+                  activities={
+                    Array.isArray(recipeConfig.activities) ? recipeConfig.activities : null
+                  }
                   title={recipeConfig.title}
                 />
               )
@@ -397,7 +399,9 @@ function BaseChatContent({
             {/* Loading indicator at bottom of messages container */}
             {isLoading && (
               <div className="px-0 -mx-6">
-                <LoadingGoose message={isLoadingSummary ? 'summarizing conversation…' : undefined} />
+                <LoadingGoose
+                  message={isLoadingSummary ? 'summarizing conversation…' : undefined}
+                />
               </div>
             )}
 

ui/desktop/src/hooks/use-mobile.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 930;
 
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);

ui/desktop/src/main.ts

@@ -533,7 +533,7 @@ const createChat = async (
 
   // Load and manage window state
   const mainWindowState = windowStateKeeper({
-    defaultWidth: 1050,
+    defaultWidth: 800,
     defaultHeight: 800,
   });
 
@@ -546,7 +546,7 @@ const createChat = async (
     y: mainWindowState.y,
     width: mainWindowState.width,
     height: mainWindowState.height,
-    minWidth: 650,
+    minWidth: 750,
     resizable: true,
     useContentSize: true,
     icon: path.join(__dirname, '../images/icon'),

ui/desktop/src/styles/main.css

@@ -2,6 +2,10 @@
 @import 'tw-animate-css';
 @plugin '@tailwindcss/typography';
 
+@theme {
+  --breakpoint-md: 930px;
+}
+
 /* Cash Sans */
 
 @custom-variant dark (&:where(.dark, .dark *));