matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Fix chat content bottom offset when keyboard is open

Browse source
This commit is contained in:
Jon Staab 2025-12-02 17:20:10 -08:00
parent f65a4b0db0
commit 68fe663730
3 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

@ -398,7 +398,7 @@ body.keyboard-open .cb {
@apply bottom-sai; @apply bottom-sai;
} }
body.keyboard-open .bottom-nav { body.keyboard-open .hide-on-keyboard {
display: none; display: none;
} }

5
src/app/components/PrimaryNav.svelte
View file

@ -110,10 +110,11 @@
{@render children?.()} {@render children?.()}
<!-- a little extra something for ios --> <!-- a little extra something for ios -->
<div class="bottom-nav fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden"> <div
class="bottom-nav hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
</div> </div>
<div <div
class="bottom-nav border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden"> class="bottom-nav hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
<div class="content-padding-x content-sizing flex justify-between px-2"> <div class="content-padding-x content-sizing flex justify-between px-2">
<div class="flex gap-2 sm:gap-6"> <div class="flex gap-2 sm:gap-6">
<PrimaryNavItem title="Home" href="/home"> <PrimaryNavItem title="Home" href="/home">

2
src/lib/components/PageContent.svelte
View file

@ -14,6 +14,6 @@
{...props} {...props}
bind:this={element} bind:this={element}
data-component="PageContent" data-component="PageContent"
class="scroll-container cw md:bottom-sai fixed bottom-[calc(var(--saib)+3.5rem)] top-[calc(var(--sait)+3rem)] z-feature overflow-y-auto overflow-x-hidden {props.class}"> class="scroll-container cw cb fixed top-[calc(var(--sait)+3rem)] z-feature overflow-y-auto overflow-x-hidden {props.class}">
{@render children?.()} {@render children?.()}
</div> </div>