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

3 weeks ago · bd5d93a964
parent abdb80a6be
commit bd5d93a964
4 changed files with 10 additions and 6 deletions
--- 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" />
--- 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 &&
--- 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">
--- 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);
+}