Merge pull request #993 from siiddhantt/fix/input-bar-hidden-safari

fix: input field covered by url bar in safari
arc53 · Jun 13, 2024 · 558ecd8 · 558ecd8
2 parents 3df745d + bd5d93a
commit 558ecd8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DocsGPT 🦖</title>
-      <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
-  </head>
-  <body>
-    <div id="root" class="h-screen"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <title>DocsGPT 🦖</title>
+  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+</head>
+
+<body>
+  <div id="root" class="h-screen"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
@@ -23,7 +23,7 @@ export default function Hero({
 
         <div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
       </div>
-      <div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:text-sm  lg:grid-cols-2">
+      <div className="mb-16 grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6  md:mb-0 md:text-sm lg:grid-cols-2">
         {demos?.map(
           (demo: { header: string; query: string }, key: number) =>
             demo.header &&

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
@@ -137,13 +137,13 @@ export default function Conversation() {
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex h-[85vh] w-full justify-center overflow-y-auto p-4"
+        className="flex h-[90%] w-full justify-center overflow-y-auto p-4 md:h-[84vh]"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
             onClick={scrollIntoView}
             aria-label="scroll to bottom"
-            className="fixed bottom-32 right-14 z-10 flex h-7 w-7  items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
+            className="fixed bottom-40 right-14 z-10 flex h-7 w-7  items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
           >
             <img
               src={ArrowDown}
@@ -173,8 +173,8 @@ export default function Conversation() {
         )}
         {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
-      <div className="bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black sm:w-6/12 md:fixed">
-        <div className="flex h-full w-full items-center rounded-full border border-silver">
+      <div className="bottom-safe fixed flex w-11/12 flex-col items-end self-center rounded-2xl pb-1 sm:w-6/12 bg-opacity-0">
+        <div className="flex h-full w-full items-center rounded-full border border-silver bg-white dark:bg-raisin-black">
           <div
             id="inputbox"
             ref={inputRef}
@@ -196,7 +196,7 @@ export default function Conversation() {
           {status === 'loading' ? (
             <img
               src={isDarkTheme ? SpinnerDark : Spinner}
-              className="relative right-[38px] bottom-[15px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
+              className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
             ></img>
           ) : (
             <div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000">

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -408,3 +408,7 @@ template {
 ::-webkit-scrollbar {
   width: 0;
 }
+
+.bottom-safe {
+  bottom: env(safe-area-inset-bottom, 0);
+}