From 5b17fa5ddaea213cae4eff0f0cbe73fba0f3105a Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sat, 3 Aug 2024 13:05:29 +0530
Subject: [PATCH] Set home, chat page height so footer, header visible w/o
 scroll on phone

Set dynamic view height of page to 100%
---
 src/interface/web/app/chat/chat.module.css                 | 3 +--
 .../web/app/components/chatInputArea/chatInputArea.tsx     | 2 +-
 src/interface/web/app/page.module.css                      | 7 ++-----
 src/interface/web/app/page.tsx                             | 2 +-
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/interface/web/app/chat/chat.module.css b/src/interface/web/app/chat/chat.module.css
index 9ed5efc1..0b475881 100644
--- a/src/interface/web/app/chat/chat.module.css
+++ b/src/interface/web/app/chat/chat.module.css
@@ -1,5 +1,5 @@
 div.main {
-    height: 100vh;
+    height: 100dvh;
     color: hsla(var(--foreground));
 }
 
@@ -120,5 +120,4 @@ div.agentIndicator {
         gap: 0;
         grid-template-columns: 1fr;
     }
-
 }
diff --git a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
index 089bc27f..d7461686 100644
--- a/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
+++ b/src/interface/web/app/components/chatInputArea/chatInputArea.tsx
@@ -359,7 +359,7 @@ export default function ChatInputArea(props: ChatInputProps) {
                     </Popover>
                 </div>
             }
-            <div className={`${styles.actualInputArea} flex items-center justify-between dark:bg-neutral-700`}>
+            <div className={`${styles.actualInputArea} items-center justify-between dark:bg-neutral-700`}>
                 <input
                     type="file"
                     multiple={true}
diff --git a/src/interface/web/app/page.module.css b/src/interface/web/app/page.module.css
index 4d881d54..0d5cc37d 100644
--- a/src/interface/web/app/page.module.css
+++ b/src/interface/web/app/page.module.css
@@ -1,5 +1,5 @@
 div.main {
-    height: 100vh;
+    height: 100dvh;
     color: hsla(var(--foreground));
 }
 
@@ -15,7 +15,6 @@ div.inputBox {
     border: 1px solid var(--border-color);
     border-radius: 16px;
     margin-bottom: 20px;
-    gap: 12px;
     align-content: center;
 }
 
@@ -86,13 +85,11 @@ div.homeGreetings {
     grid-template-rows: 1fr 2fr;
 }
 
-
 div.sidePanel {
     position: fixed;
     height: 100%;
 }
 
-
 @media screen and (max-width: 768px) {
     div.inputBox {
         margin-bottom: 0px;
@@ -123,6 +120,6 @@ div.sidePanel {
     }
 
     div.homeGreetings {
-        grid-template-rows: auto;
+        grid-template-rows: auto 1fr;
     }
 }
diff --git a/src/interface/web/app/page.tsx b/src/interface/web/app/page.tsx
index 5c16eb41..43cec669 100644
--- a/src/interface/web/app/page.tsx
+++ b/src/interface/web/app/page.tsx
@@ -244,7 +244,7 @@ function ChatBodyData(props: ChatBodyDataProps) {
                 props.isMobileWidth &&
                 <>
                     <div className={`${styles.inputBox} w-full shadow-md dark:bg-neutral-700 bg-background align-middle items-center justify-center pb-3 px-1`}>
-                        <div className="flex gap-2 items-center justify-left pt-2 pb-4 px-10">
+                        <div className="flex gap-2 items-center justify-left pt-1 pb-2 px-10">
                             {agentIcons.map((icon, index) => (
                                 <Card
                                     key={`${index}-${agents[index].slug}`}