fix: ui home screen mobile view

app/layout.tsx

@@ -12,8 +12,13 @@ export const metadata: Metadata = {
 };
 
 export const viewport = {
-	maximumScale: 1, // Disable auto-zoom on mobile Safari
+	width: 'device-width',
+	initialScale: 1,
+	maximumScale: 1,
+	userScalable: false,
+	viewportFit: 'cover'
 };
+
 
 const LIGHT_THEME_COLOR = "hsl(0 0% 100%)";
 const DARK_THEME_COLOR = "hsl(240deg 10% 3.92%)";

components/chat.tsx

@@ -12,7 +12,7 @@ import { fetcher, generateUUID } from '@/lib/utils';
 import { Block } from './block';
 import { MultimodalInput } from './multimodal-input';
 import { Messages } from './messages';
-import { VisibilityType } from './visibility-selector';
+import type { VisibilityType } from './visibility-selector';
 import { useBlockSelector } from '@/hooks/use-block';
 import { toast } from 'sonner';
 
@@ -66,7 +66,7 @@ export function Chat({
 
   return (
     <>
-      <div className="flex flex-col min-w-0 h-dvh bg-background">
+      <div className="flex flex-col w-full max-w-[100vw] h-dvh bg-background">
         <ChatHeader
           chatId={id}
           selectedModelId={selectedChatModel}

components/messages.tsx

@@ -1,9 +1,9 @@
-import { ChatRequestOptions, Message } from 'ai';
+import type { ChatRequestOptions, Message } from 'ai';
 import { PreviewMessage, ThinkingMessage } from './message';
 import { useScrollToBottom } from './use-scroll-to-bottom';
 import { Overview } from './overview';
 import { memo } from 'react';
-import { Vote } from '@/lib/db/schema';
+import type { Vote } from '@/lib/db/schema';
 import equal from 'fast-deep-equal';
 
 interface MessagesProps {

components/suggested-actions.tsx

@@ -2,7 +2,7 @@
 
 import { motion } from 'framer-motion';
 import { Button } from './ui/button';
-import { ChatRequestOptions, CreateMessage, Message } from 'ai';
+import type { ChatRequestOptions, CreateMessage, Message } from 'ai';
 import { memo } from 'react';
 
 interface SuggestedActionsProps {
@@ -22,13 +22,13 @@ function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
     },
     {
       title: 'Make a Raspberry Pi hat',
-      label: `that controls an epaper display`,
-      action: `Make a Raspberry Pi hat that controls an epaper display`,
+      label: 'that controls an epaper display',
+      action: 'Make a Raspberry Pi hat that controls an epaper display',
     },
     {
       title: 'Design an LED Matrix',
-      label: `with a grid of 5x4 LEDs`,
-      action: `Design an LED Matrix with a grid of 5x4 LEDs`,
+      label: 'with a grid of 5x4 LEDs',
+      action: 'Design an LED Matrix with a grid of 5x4 LEDs',
     },
     {
       title: 'Design a sign',
@@ -58,7 +58,7 @@ function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
                 content: suggestedAction.action,
               });
             }}
-            className="text-left border rounded-xl px-4 py-3.5 text-sm flex-1 gap-1 sm:flex-col w-full h-auto justify-start items-start"
+            className="text-left border rounded-xl px-4 py-3.5 text-sm flex-1 flex-wrap gap-1 sm:flex-col w-full h-auto justify-start items-start"
           >
             <span className="font-medium">{suggestedAction.title}</span>
             <span className="text-muted-foreground">

components/ui/sidebar.tsx

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import { VariantProps, cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
 import { PanelLeft } from 'lucide-react';
 
 import { useIsMobile } from '@/hooks/use-mobile';