From 4bad948542ed3aacd15228c5e928f5bfdbe49b80 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 14 May 2026 10:48:08 -0600
Subject: [PATCH] Improve mobile layout and spacing

---
 web/src/components/chat/ChatSettings.tsx      |  4 ++--
 web/src/components/chat/ChatStartingState.tsx |  4 +++-
 web/src/pages/Chat.tsx                        | 10 +++++-----
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/web/src/components/chat/ChatSettings.tsx b/web/src/components/chat/ChatSettings.tsx
index 5b3dd64290..0f68ef22d6 100644
--- a/web/src/components/chat/ChatSettings.tsx
+++ b/web/src/components/chat/ChatSettings.tsx
@@ -35,12 +35,12 @@ export default function ChatSettings({
 
   const trigger = (
     <Button
-      className="flex items-center gap-2"
+      className="flex items-center md:gap-2"
       aria-label={t("settings.title")}
       size="sm"
     >
       <FaCog className="text-secondary-foreground" />
-      {t("settings.title")}
+      <span className="hidden md:inline">{t("settings.title")}</span>
     </Button>
   );
 
diff --git a/web/src/components/chat/ChatStartingState.tsx b/web/src/components/chat/ChatStartingState.tsx
index e6b611bf9a..a0a3a044c8 100644
--- a/web/src/components/chat/ChatStartingState.tsx
+++ b/web/src/components/chat/ChatStartingState.tsx
@@ -54,7 +54,9 @@ export function ChatStartingState({ onSendMessage }: ChatStartingStateProps) {
     <div className="flex size-full flex-col items-center justify-center gap-6 p-8">
       <div className="flex flex-col items-center gap-2">
         <h1 className="text-4xl font-bold text-foreground">{t("title")}</h1>
-        <p className="text-muted-foreground">{t("subtitle")}</p>
+        <p className="text-center text-muted-foreground md:text-left">
+          {t("subtitle")}
+        </p>
       </div>
 
       <div className="flex w-full max-w-2xl flex-col items-center gap-4">
diff --git a/web/src/pages/Chat.tsx b/web/src/pages/Chat.tsx
index ee881d127b..970fa3d364 100644
--- a/web/src/pages/Chat.tsx
+++ b/web/src/pages/Chat.tsx
@@ -165,16 +165,16 @@ export default function ChatPage() {
 
   return (
     <div className="flex size-full flex-col">
-      <div className="flex shrink-0 items-center justify-end gap-2 px-2 pt-2 md:px-4 md:pt-4">
+      <div className="flex shrink-0 items-center justify-end gap-2 px-2 pb-3 pt-2 md:px-4 md:pt-4">
         {hasStarted && (
           <Button
-            className="flex items-center gap-2"
+            className="flex items-center md:gap-2"
             aria-label={t("new_chat")}
             size="sm"
             onClick={startNewChat}
           >
             <LuMessageSquarePlus className="text-secondary-foreground" />
-            {t("new_chat")}
+            <span className="hidden md:inline">{t("new_chat")}</span>
           </Button>
         )}
         <ChatSettings
@@ -191,7 +191,7 @@ export default function ChatPage() {
         <div className="flex flex-1 justify-center px-2 md:px-4">
           <div className="flex w-full flex-col xl:w-[50%] 3xl:w-[35%]">
             {hasStarted ? (
-              <div className="flex w-full flex-1 flex-col gap-3 pb-3 pt-3">
+              <div className="flex w-full flex-1 flex-col gap-3 pb-3">
                 {messages.map((msg, i) => {
                   const isLastAssistant =
                     i === messages.length - 1 && msg.role === "assistant";
@@ -295,7 +295,7 @@ export default function ChatPage() {
         </div>
       </div>
       {hasStarted && (
-        <div className="flex shrink-0 justify-center px-2 pb-2 md:px-4 md:pb-4">
+        <div className="flex shrink-0 justify-center p-2 md:px-4 md:pb-4">
           <div className="flex w-full xl:w-[50%] 3xl:w-[35%]">
             <ChatEntry
               input={input}