fix: unfixed input bar + safe area inset for Safari (iOS)

arc53 · Jun 12, 2024 · bd5d93a · bd5d93a
1 parent abdb80a
commit bd5d93a
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <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" />

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,7 +137,7 @@ export default function Conversation() {
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex h-[80vh] md: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
@@ -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);
+}