From 18ce7c8f2f385e812d1b3c459f19a04b1c8480c9 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Wed, 18 Sep 2024 03:21:46 +0530
Subject: [PATCH] fix(mobile): minor changes

---
 frontend/src/App.tsx                       | 4 ++--
 frontend/src/Navigation.tsx                | 2 +-
 frontend/src/conversation/Conversation.tsx | 8 ++++----
 frontend/src/index.css                     | 3 ++-
 frontend/src/settings/index.tsx            | 2 +-
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c4f8e8b7..0537e695 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -18,10 +18,10 @@ function MainLayout() {
   const [navOpen, setNavOpen] = useState(!isMobile);
 
   return (
-    <div className="dark:bg-raisin-black relative h-full">
+    <div className="dark:bg-raisin-black relative h-screen overflow-auto">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <div
-        className={`h-full ${
+        className={`h-[calc(100dvh-64px)] sm:h-screen ${
           !isMobile
             ? `ml-0 ${!navOpen ? 'md:mx-auto lg:mx-auto' : 'md:ml-72'}`
             : 'ml-0 md:ml-16'
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index dbb3d4e6..87cbbe51 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -381,7 +381,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </div>
         </div>
       </div>
-      <div className="fixed z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
+      <div className="sticky z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
         <button
           className="mt-5 ml-6 h-6 w-6 md:hidden"
           onClick={() => setNavOpen(true)}
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index d6568acb..d6ef59b7 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -191,7 +191,7 @@ export default function Conversation() {
     };
   }, []);
   return (
-    <div className="flex flex-col gap-1 h-[92%] sm:h-full justify-end">
+    <div className="flex flex-col gap-1 h-full justify-end">
       {conversationId && (
         <>
           {' '}
@@ -222,7 +222,7 @@ export default function Conversation() {
         ref={conversationRef}
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex justify-center w-full overflow-y-auto h-auto min-h-full"
+        className="flex justify-center w-full overflow-y-auto h-screen sm:mt-12"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -239,12 +239,12 @@ export default function Conversation() {
         )}
 
         {queries.length > 0 ? (
-          <div className="w-full h-full md:w-8/12">
+          <div className="w-full md:w-8/12 px-1">
             {queries.map((query, index) => {
               return (
                 <Fragment key={index}>
                   <ConversationBubble
-                    className={'mb-1 last:mb-28 md:mb-7 first:mt-40'}
+                    className={'first:mt-5'}
                     key={`${index}QUESTION`}
                     message={query.prompt}
                     type="QUESTION"
diff --git a/frontend/src/index.css b/frontend/src/index.css
index a63ab16c..cfc784fb 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -71,7 +71,8 @@ body {
 Avoid changing height in mobile browsers
 */
 @media only screen and (max-width: 500px) {
-  body,html {
+  body,
+  html {
     height: 100%;
     position: fixed;
     width: 100%;
diff --git a/frontend/src/settings/index.tsx b/frontend/src/settings/index.tsx
index 65771d6d..ef5434aa 100644
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -57,7 +57,7 @@ export default function Settings() {
     setActiveTab(t('settings.general.label'));
   }, [i18n.language]);
   return (
-    <div className="p-4 pt-20 md:p-12 h-[100dvh] overflow-auto">
+    <div className="p-4 md:p-12 h-full overflow-auto">
       <p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">
         {t('settings.label')}
       </p>