From 7e2ae96eb14c112af066dbbdbf60cb7fc4e94e76 Mon Sep 17 00:00:00 2001
From: Techie Sam <blessingabolade15@gmail.com>
Date: Sat, 9 Aug 2025 00:14:45 +0100
Subject: [PATCH] fix: improve UI responsiveness on small devices, resolved
 layout and padding issues caused by a fixed-position element.

---
 frontend/components/Chat.tsx      | 32 ++++++++++++-------------
 frontend/components/ChatInput.tsx |  4 ++--
 frontend/components/Messages.tsx  | 39 +++++++++++++++++++------------
 pnpm-workspace.yaml               |  8 +++++++
 4 files changed, 50 insertions(+), 33 deletions(-)
 create mode 100644 pnpm-workspace.yaml

diff --git a/frontend/components/Chat.tsx b/frontend/components/Chat.tsx
index 60ae42c..64e1491 100644
--- a/frontend/components/Chat.tsx
+++ b/frontend/components/Chat.tsx
@@ -69,10 +69,24 @@ export default function Chat({ threadId, initialMessages }: ChatProps) {
   });
 
   return (
-    <div className="relative w-full">
+    <div className="w-full overflow-hidden h-screen">
       <ChatSidebarTrigger />
+      <ThemeToggler />
+      <Button
+        onClick={handleToggleNavigator}
+        variant="outline"
+        size="icon"
+        className="fixed right-16 top-4 z-20"
+        aria-label={
+          isNavigatorVisible
+            ? 'Hide message navigator'
+            : 'Show message navigator'
+        }
+      >
+        <MessageSquareMore className="h-5 w-5" />
+      </Button>
       <main
-        className={`flex flex-col w-full max-w-3xl pt-10 pb-44 mx-auto transition-all duration-300 ease-in-out`}
+        className={`flex flex-col w-full mx-auto relative transition-all duration-300 ease-in-out max-h-screen h-screen`}
       >
         <Messages
           threadId={threadId}
@@ -93,20 +107,6 @@ export default function Chat({ threadId, initialMessages }: ChatProps) {
           stop={stop}
         />
       </main>
-      <ThemeToggler />
-      <Button
-        onClick={handleToggleNavigator}
-        variant="outline"
-        size="icon"
-        className="fixed right-16 top-4 z-20"
-        aria-label={
-          isNavigatorVisible
-            ? 'Hide message navigator'
-            : 'Show message navigator'
-        }
-      >
-        <MessageSquareMore className="h-5 w-5" />
-      </Button>
 
       <ChatNavigator
         threadId={threadId}
diff --git a/frontend/components/ChatInput.tsx b/frontend/components/ChatInput.tsx
index 0630f3b..7d6e17a 100644
--- a/frontend/components/ChatInput.tsx
+++ b/frontend/components/ChatInput.tsx
@@ -132,9 +132,9 @@ function PureChatInput({
   };
 
   return (
-    <div className="fixed bottom-0 w-full max-w-3xl">
+    <div className="absolute w-full px- max-w-3xl m-auto bottom-0 md:left-1/2 md:-translate-x-[51%] shadow-xl">
       <div className="bg-secondary rounded-t-[20px] p-2 pb-0 w-full">
-        <div className="relative">
+        <div className="relative border">
           <div className="flex flex-col">
             <div className="bg-secondary overflow-y-auto max-h-[300px]">
               <Textarea
diff --git a/frontend/components/Messages.tsx b/frontend/components/Messages.tsx
index 3ffa20f..0a26c3f 100644
--- a/frontend/components/Messages.tsx
+++ b/frontend/components/Messages.tsx
@@ -26,21 +26,30 @@ function PureMessages({
   registerRef: (id: string, ref: HTMLDivElement | null) => void;
 }) {
   return (
-    <section className="flex flex-col space-y-12">
-      {messages.map((message, index) => (
-        <PreviewMessage
-          key={message.id}
-          threadId={threadId}
-          message={message}
-          isStreaming={status === 'streaming' && messages.length - 1 === index}
-          setMessages={setMessages}
-          reload={reload}
-          registerRef={registerRef}
-          stop={stop}
-        />
-      ))}
-      {status === 'submitted' && <MessageLoading />}
-      {error && <Error message={error.message} />}
+    <section
+      className="max-h-screen h-screen w-full xl:px-3 m-auto pb-18 md:pb-22 overflow-y-scroll"
+      style={{
+        height: 'calc(100vh - 10rem)',
+      }}
+    >
+      <div className="px-4 m-auto py-2 flex flex-col w-full md:max-w-xl lg:max-w-2xl border-y empty:hidden space-y-12">
+        {messages.map((message, index) => (
+          <PreviewMessage
+            key={message.id}
+            threadId={threadId}
+            message={message}
+            isStreaming={
+              status === 'streaming' && messages.length - 1 === index
+            }
+            setMessages={setMessages}
+            reload={reload}
+            registerRef={registerRef}
+            stop={stop}
+          />
+        ))}
+        {status === 'submitted' && <MessageLoading />}
+        {error && <Error message={error.message} />}
+      </div>
     </section>
   );
 }
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..8505a93
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,8 @@
+ignoredBuiltDependencies:
+  - sharp
+  - unrs-resolver
+  - workerd
+
+onlyBuiltDependencies:
+  - '@tailwindcss/oxide'
+  - esbuild