🎨 UI: improve mobile UI

ethansocal · Jan 20, 2024 · d0a0e5a · d0a0e5a
1 parent fc19b1e
commit d0a0e5a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
@@ -29,8 +29,8 @@ export async function POST(req: Request) {
         content: input.message,
     });
 
-    // TODO: Will be included in the next release
-    await insertMessageToDB(threadId, createdMessage);
+
+    // await insertMessageToDB(threadId, createdMessage);
 
     return experimental_AssistantResponse(
         { threadId, messageId: createdMessage.id },

diff --git a/app/chat/Chat.tsx b/app/chat/Chat.tsx
@@ -53,8 +53,8 @@ export default ({
     }, []);
 
     return (
-        <div className="flex flex-col h-screen">
-            <ScrollArea className="flex rounded-md w-screen flex-grow justify-center pt-6 mt-16">
+        <div className="flex flex-col h-[calc(100dvh-4rem)]">
+            <ScrollArea className="flex flex-grow w-screen justify-center mt-4">
                 <div className="container mx-auto md:w-9/12 lg:w-5/12">
                     {messages.map((message: Message, k: number) => {
                         const isUser = message.role === "user";

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -28,6 +28,13 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: ReactNode }) {
     return (
         <html lang="en" className={GeistSans.className}>
+            <head>
+                <meta
+                    name="viewport"
+                    content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
+                ></meta>
+            </head>
+
             <body className="bg-background text-foreground">
                 <header className="flex flex-col items-center justify-center w-full py-3 px-4 fixed top-0 border-b border-gray-900">
                     <div className="flex flex-row items-center justify-between w-full h-full">
@@ -69,7 +76,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
                     </div>
                 </header>
 
-                <main className="flex flex-col items-center">
+                <main className="flex flex-col items-center mt-16">
                     <ThemeProvider
                         attribute="class"
                         defaultTheme="dark"