From 2c84aeea810d8ab10fd3dbd2d4f50543bb135d57 Mon Sep 17 00:00:00 2001
From: Rishabh Gupta <belikerishabh@gmail.com>
Date: Tue, 18 Feb 2025 01:55:03 +0530
Subject: [PATCH] fix: ui home screen mobile view

---
 app/layout.tsx                   |  7 ++++++-
 components/chat.tsx              |  4 ++--
 components/messages.tsx          |  4 ++--
 components/suggested-actions.tsx | 12 ++++++------
 components/ui/sidebar.tsx        |  3 ++-
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index f7e9eb3..887a984 100644
--- a/app/layout.tsx
+++ b/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%)";
diff --git a/components/chat.tsx b/components/chat.tsx
index 6911e66..f1eff1f 100644
--- a/components/chat.tsx
+++ b/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}
diff --git a/components/messages.tsx b/components/messages.tsx
index 1c14b2f..531e8b4 100644
--- a/components/messages.tsx
+++ b/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 {
diff --git a/components/suggested-actions.tsx b/components/suggested-actions.tsx
index a006c21..a274e2f 100644
--- a/components/suggested-actions.tsx
+++ b/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">
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 16e1437..a1def35 100644
--- a/components/ui/sidebar.tsx
+++ b/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';