fix(mobile): vertical overflows

frontend/src/App.tsx

@@ -16,11 +16,12 @@ inject();
 function MainLayout() {
   const { isMobile } = useMediaQuery();
   const [navOpen, setNavOpen] = useState(!isMobile);
+
   return (
-    <div className="dark:bg-raisin-black">
+    <div className="dark:bg-raisin-black relative h-full">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <div
-        className={`min-h-screen ${
+        className={`h-full ${
           !isMobile
             ? `ml-0 ${!navOpen ? 'md:mx-auto lg:mx-auto' : 'md:ml-72'}`
             : 'ml-0 md:ml-16'
@@ -35,7 +36,7 @@ function MainLayout() {
 export default function App() {
   useDarkTheme();
   return (
-    <>
+    <div className="h-full relative overflow-auto">
       <Routes>
         <Route element={<MainLayout />}>
           <Route index element={<Conversation />} />
@@ -45,6 +46,6 @@ export default function App() {
         <Route path="/share/:identifier" element={<SharedConversation />} />
         <Route path="/*" element={<PageNotFound />} />
       </Routes>
-    </>
+    </div>
   );
 }

frontend/src/Hero.tsx

@@ -19,7 +19,7 @@ export default function Hero({
   }>;
   return (
     <div
-      className={`mb-1 mt-16 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full md:mb-10 lg:mt-6`}
+      className={`pt-20 sm:pt-0 pb-6 sm:pb-12 flex h-full  w-full flex-col  text-black-1000 dark:text-bright-gray sm:w-full px-2 sm:px-0`}
     >
       <div className="flex h-full w-full flex-col items-center justify-center">
         <div className="flex items-center">

frontend/src/conversation/Conversation.tsx

@@ -191,15 +191,16 @@ export default function Conversation() {
     };
   }, []);
   return (
-    <div className="flex h-[90vh] flex-col gap-7 pb-2 sm:h-[85vh]">
+    <div className="flex flex-col gap-1 h-[92%] sm:h-full justify-end">
       {conversationId && (
         <>
+          {' '}
           <button
             title="Share"
             onClick={() => {
               setShareModalState(true);
             }}
-            className="fixed top-4 right-20 z-0 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
+            className="absolute top-4 right-20 z-20 rounded-full hover:bg-bright-gray dark:hover:bg-[#28292E]"
           >
             <img
               className="m-2 h-5 w-5 filter dark:invert"
@@ -221,7 +222,7 @@ export default function Conversation() {
         ref={conversationRef}
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex h-[90%] w-full flex-1 justify-center overflow-y-auto p-4 md:h-[83vh]"
+        className="flex justify-center w-full overflow-y-auto h-auto min-h-full"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -237,13 +238,13 @@ export default function Conversation() {
           </button>
         )}
 
-        {queries.length > 0 && (
-          <div className="mt-16 w-full md:w-8/12">
+        {queries.length > 0 ? (
+          <div className="w-full h-full md:w-8/12">
             {queries.map((query, index) => {
               return (
                 <Fragment key={index}>
                   <ConversationBubble
-                    className={'mb-1 last:mb-28 md:mb-7'}
+                    className={'mb-1 last:mb-28 md:mb-7 first:mt-40'}
                     key={`${index}QUESTION`}
                     message={query.prompt}
                     type="QUESTION"
@@ -255,12 +256,12 @@ export default function Conversation() {
               );
             })}
           </div>
+        ) : (
+          <Hero handleQuestion={handleQuestion} />
         )}
-
-        {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
 
-      <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-1/2">
+      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-[62%] h-auto">
         <div className="flex w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
           <textarea
             id="inputbox"

frontend/src/index.css

@@ -67,7 +67,17 @@ body {
   overflow-x: hidden;
   font-family: 'Inter', sans-serif;
 }
-
+/*
+Avoid changing height in mobile browsers
+*/
+@media only screen and (max-width: 500px) {
+  body,html {
+    height: 100%;
+    position: fixed;
+    width: 100%;
+    overflow-y: none;
+  }
+}
 /**
  * Render the `main` element consistently in IE.
  */
@@ -427,7 +437,7 @@ template {
 }
 
 ::-webkit-scrollbar {
-  width: 0;
+  width: 10;
 }
 
 input:-webkit-autofill {

frontend/src/settings/index.tsx

@@ -57,11 +57,11 @@ export default function Settings() {
     setActiveTab(t('settings.general.label'));
   }, [i18n.language]);
   return (
-    <div className="wa p-4 pt-20 md:p-12">
+    <div className="p-4 pt-20 md:p-12 h-[100dvh] overflow-auto">
       <p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">
         {t('settings.label')}
       </p>
-      <div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
+      <div className="mt-6 flex flex-row items-center space-x-4 overflow-auto md:space-x-8 ">
         <div className="md:hidden">
           <button
             onClick={() => scrollTabs(-1)}
@@ -70,7 +70,7 @@ export default function Settings() {
             <img src={ArrowLeft} alt="left-arrow" className="h-6 w-6" />
           </button>
         </div>
-        <div className="flex flex-nowrap space-x-4 overflow-x-auto md:space-x-8">
+        <div className="flex flex-nowrap space-x-4 overflow-x-auto no-scrollbar md:space-x-8">
           {tabs.map((tab, index) => (
             <button
               key={index}