From 1ec1eff57edacb502c199ebf3fbe86b6bffbabae Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Tue, 10 Dec 2024 19:03:57 -0800
Subject: [PATCH] Improve mobile header, reduce title bar padding and add conv
 title

---
 src/interface/web/app/chat/page.tsx                       | 8 ++++----
 .../web/app/components/navMenu/navMenu.module.css         | 4 ++--
 .../web/app/components/sidePanel/chatHistorySidePanel.tsx | 4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx
index 04835b6b..ed73e66f 100644
--- a/src/interface/web/app/chat/page.tsx
+++ b/src/interface/web/app/chat/page.tsx
@@ -386,7 +386,7 @@ export default function Chat() {
             <title>
                 {`${defaultTitle}${!!title && title !== defaultTitle ? `: ${title}` : ""}`}
             </title>
-            <div>
+            <div className={isMobileWidth ? "h-1" : "h-auto"}>
                 <SidePanel
                     conversationId={conversationId}
                     uploadedFiles={[]}
@@ -395,9 +395,9 @@ export default function Chat() {
             </div>
             <div className={styles.chatBox}>
                 <div className={styles.chatBoxBody}>
-                    {!isMobileWidth && conversationId && (
+                    {conversationId && (
                         <div
-                            className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mr-8 pt-6 col-auto h-fit`}
+                            className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mx-2 md:mr-8 md:pt-6 col-auto h-fit`}
                         >
                             {title && (
                                 <h2
@@ -409,7 +409,7 @@ export default function Chat() {
                             <ChatSessionActionMenu
                                 conversationId={conversationId}
                                 setTitle={setTitle}
-                                sizing="md"
+                                sizing={isMobileWidth ? "sm" : "md"}
                             />
                         </div>
                     )}
diff --git a/src/interface/web/app/components/navMenu/navMenu.module.css b/src/interface/web/app/components/navMenu/navMenu.module.css
index a8debe78..aab37b5b 100644
--- a/src/interface/web/app/components/navMenu/navMenu.module.css
+++ b/src/interface/web/app/components/navMenu/navMenu.module.css
@@ -52,7 +52,7 @@ div.settingsMenuOptions {
     grid-auto-flow: row;
     position: absolute;
     background-color: var(--background-color);
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     top: 64px;
     text-align: left;
     padding: 8px;
@@ -69,6 +69,6 @@ div.settingsMenuOptions {
     }
 
     div.titleBar {
-        padding: 8px;
+        padding: 4px;
     }
 }
diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
index 498ec197..51fdf9db 100644
--- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
+++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
@@ -965,7 +965,7 @@ export default function SidePanel(props: SidePanelProps) {
                         }}
                     >
                         <DrawerTrigger>
-                            <Sidebar className="h-8 w-8 mx-2" weight="thin" />
+                            <Sidebar className="h-6 w-6 mx-2" weight="thin" />
                         </DrawerTrigger>
                         <DrawerContent>
                             <DrawerHeader>
@@ -1037,7 +1037,7 @@ export default function SidePanel(props: SidePanelProps) {
                     </div>
                 )}
                 {props.isMobileWidth && (
-                    <Link href="/" className="content-center">
+                    <Link href="/" className="content-center h-fit self-center">
                         <KhojLogoType />
                     </Link>
                 )}