From 9d5480d8862269952e294fa37498e89254764a57 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Thu, 19 Dec 2024 20:33:53 -0800
Subject: [PATCH] Improve mobile friendlinses across chat and home pages.

---
 src/interface/web/app/chat/page.tsx                        | 4 ++--
 src/interface/web/app/components/appSidebar/appSidebar.tsx | 4 ++--
 src/interface/web/app/page.module.css                      | 4 ----
 src/interface/web/app/page.tsx                             | 2 +-
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/interface/web/app/chat/page.tsx b/src/interface/web/app/chat/page.tsx
index cdca175e..46d74bf1 100644
--- a/src/interface/web/app/chat/page.tsx
+++ b/src/interface/web/app/chat/page.tsx
@@ -149,7 +149,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                 />
             </div>
             <div
-                className={`${styles.inputBox} p-1 md:px-2 shadow-md bg-background align-middle items-center justify-center dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-t-2xl rounded-b-none md:rounded-xl h-fit ${chatHistoryCustomClassName} mr-auto ml-auto`}
+                className={`${styles.inputBox} p-1 md:px-2 shadow-md bg-background align-middle items-center justify-center dark:bg-neutral-700 dark:border-0 dark:shadow-sm rounded-2xl md:rounded-xl h-fit ${chatHistoryCustomClassName} mr-auto ml-auto`}
             >
                 <ChatInputArea
                     agentColor={agentMetadata?.color}
@@ -395,7 +395,7 @@ export default function Chat() {
                     <div className={styles.chatBoxBody}>
                         {conversationId && (
                             <div
-                                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`}
+                                className={`${styles.chatTitleWrapper} text-nowrap text-ellipsis overflow-hidden max-w-screen-md grid items-top font-bold mx-2 md:mr-8 pt-1 md:pt-6 col-auto h-fit`}
                             >
                                 {title && (
                                     <h2
diff --git a/src/interface/web/app/components/appSidebar/appSidebar.tsx b/src/interface/web/app/components/appSidebar/appSidebar.tsx
index 2f0f8c66..b66d91b9 100644
--- a/src/interface/web/app/components/appSidebar/appSidebar.tsx
+++ b/src/interface/web/app/components/appSidebar/appSidebar.tsx
@@ -82,14 +82,14 @@ export function AppSidebar(props: AppSidebarProps) {
     }, []);
 
     return (
-        <Sidebar collapsible={"icon"}>
+        <Sidebar collapsible={"icon"} variant="sidebar">
             <SidebarHeader>
                 <SidebarMenu className="p-0 m-0">
                     <SidebarMenuItem className="p-0 m-0">
                         <SidebarMenuButton asChild>
                             <a className="flex items-center gap-2 no-underline" href="/">
                                 <KhojLogo className="w-14 h-auto" />
-                                <span className="text-2xl">Khoj</span>
+                                <span className="text-lg">Khoj</span>
                             </a>
                         </SidebarMenuButton>
                     </SidebarMenuItem>
diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css
index 2d5dd025..faa59e72 100644
--- a/src/interface/web/app/page.module.css
+++ b/src/interface/web/app/page.module.css
@@ -93,10 +93,6 @@ div.sidePanel {
 }
 
 @media screen and (max-width: 768px) {
-    div.inputBox {
-        margin-bottom: 0px;
-    }
-
     div.chatBody {
         grid-template-columns: 0fr 1fr;
     }
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index 8d841278..43e5e7e7 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -367,7 +367,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
             {props.isMobileWidth && (
                 <>
                     <div
-                        className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1 rounded-t-2xl rounded-b-none`}
+                        className={`${styles.inputBox} pt-1 shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1)] dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 mx-1 rounded-2xl mb-2`}
                     >
                         <ScrollArea className="w-full max-w-[85vw]">
                             <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-12">