fix: no safe-area for iOS browser, input not fixed

This commit is contained in:
Siddhant Rai
2024-08-05 19:05:34 +05:30
parent bd5fa83fe0
commit 22b7445ac4
3 changed files with 8 additions and 4 deletions

View File

@@ -19,7 +19,7 @@ export default function Hero({
}>;
return (
<div
className={`mt-16 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
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`}
>
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="flex items-center">

View File

@@ -211,7 +211,7 @@ export default function Conversation() {
};
}, []);
return (
<div className="flex h-screen flex-col gap-7 pb-2">
<div className="flex h-[90vh] flex-col gap-7 pb-2 sm:h-[85vh]">
{conversationId && (
<>
<button
@@ -279,7 +279,7 @@ export default function Conversation() {
{queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
</div>
<div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-8/12">
<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-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
<textarea
id="inputbox"
@@ -311,7 +311,7 @@ export default function Conversation() {
)}
</div>
<p className="text-gray-595959 hidden w-[100vw] self-center bg-white bg-transparent py-2 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
<p className="text-gray-595959 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-bright-gray md:inline md:w-full">
{t('tagline')}
</p>
</div>

View File

@@ -429,3 +429,7 @@ template {
padding-left: 36px;
padding-right: 36px;
}
.bottom-safe {
bottom: env(safe-area-inset-bottom, 0);
}