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

fix: input field covered by url bar in safari
This commit is contained in:
Alex 2024-06-13 14:18:26 +01:00 committed by GitHub
commit 558ecd84a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 25 additions and 17 deletions

View File

@ -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>

View File

@ -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 &&

View File

@ -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">

View File

@ -408,3 +408,7 @@ template {
::-webkit-scrollbar {
width: 0;
}
.bottom-safe {
bottom: env(safe-area-inset-bottom, 0);
}