fix(mobile): minor changes

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'

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)}

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"

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%;

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>