hq/bpist-squalk-forum
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Review scrolling behavior

Browse source
This commit is contained in:
dtonon 2026-05-25 19:10:36 +01:00
parent bf35b5096b
commit d8d8e27687
5 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/ChatSidebar.svelte
View file

@ -146,7 +146,7 @@
<aside
bind:this={asideEl}
class="flex-1 flex-col bg-white px-4 pt-4 pb-20 md:absolute md:top-2 md:right-0 md:z-10 md:h-[calc(100%-0.5rem)] md:flex-none md:rounded-tl-xl md:px-6 md:py-6 md:transition-all md:duration-200 min-[1540px]:rounded-tr-xl
class="flex-1 flex-col bg-white px-4 pt-4 pb-20 md:absolute md:top-6 md:right-0 md:z-10 md:h-[calc(100%-1.5rem)] md:flex-none md:rounded-tl-xl md:px-6 md:py-6 md:transition-all md:duration-200 min-[1540px]:rounded-tr-xl
{mobileActive ? 'flex' : 'hidden'} md:flex
{expanded ? 'md:w-150 md:shadow-2xl' : 'md:w-80 md:shadow-lg'}"
>
@ -181,7 +181,7 @@
<div
bind:this={listEl}
onscroll={onListScroll}
class="-mr-6 flex flex-1 flex-col overflow-y-auto pr-6"
class="no-scrollbar -mr-6 flex flex-1 flex-col overflow-y-auto pr-6"
>
{#if messages.length === 0}
<div class="m-auto py-8 text-center text-sm text-neutral-400">

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

@ -30,7 +30,7 @@
</script>
<aside
class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pl-8 pr-1 pb-8 md:flex"
class="hidden max-w-52 min-w-48 shrink-0 flex-col justify-between pl-8 pr-1 pb-8 md:flex md:pt-6"
>
<div>
<a

20
src/routes/+layout.svelte
View file

@ -95,26 +95,33 @@
</svelte:head>
<div
class="mx-auto flex max-w-[1540px] flex-col md:h-screen md:overflow-hidden md:pt-4 {mobileView ===
class="mx-auto flex max-w-[1540px] flex-col md:h-screen md:overflow-hidden {mobileView ===
'chat'
? 'h-dvh overflow-hidden'
: ''}"
>
<Navbar onMenuToggle={() => (menuOpen = true)} />
<div
class="relative md:flex md:flex-1 md:overflow-hidden md:gap-5 md:pt-2 {mobileView ===
class="relative md:flex md:flex-1 md:overflow-hidden md:gap-5 {mobileView ===
'chat'
? 'flex flex-1 overflow-hidden'
: ''}"
>
<LeftSidebar {mode} {activeRoom} {activeResource} {contactsActive} />
<main
class="min-h-[calc(100dvh_-_4rem)] bg-white px-6 pt-8 pb-20 shadow-lg md:min-h-0 md:overflow-y-auto md:rounded-t-xl md:px-10 md:pt-6 {showDiscussions
class="no-scrollbar md:min-h-0 md:overflow-y-auto {showDiscussions
? 'md:flex-[3]'
: 'md:flex-1'}
{mobileView === 'chat' ? 'hidden md:block' : 'block'}"
>
<!-- Gray top margin lives inside the scroll area, so scrolling collapses
it first and it reappears once the top is reached. Desktop only. -->
<div class="hidden md:block md:h-6" aria-hidden="true"></div>
<div
class="min-h-[calc(100dvh_-_4rem)] bg-white px-6 pt-8 pb-20 shadow-lg md:min-h-full md:rounded-t-xl md:px-10 md:pt-6"
>
{@render children()}
</div>
</main>
{#if showChat}
<div class="hidden w-80 shrink-0 md:block" aria-hidden="true"></div>
@ -127,10 +134,15 @@
<!-- Own panel (40%) so the gray gutter matches the main↔chat gap.
Hidden on mobile — it's supplementary to the main column. -->
<div
class="hidden min-w-0 bg-white px-6 pt-8 pb-20 shadow-lg md:mt-0 md:block md:flex-[2] md:overflow-y-auto md:rounded-t-xl md:px-8 md:pt-6"
class="no-scrollbar hidden min-w-0 md:block md:flex-[2] md:min-h-0 md:overflow-y-auto"
>
<div class="hidden md:block md:h-6" aria-hidden="true"></div>
<div
class="bg-white px-6 pt-8 pb-20 shadow-lg md:min-h-full md:rounded-t-xl md:px-8 md:pt-6"
>
<LatestDiscussions />
</div>
</div>
{/if}
</div>
{#if showChat}

2
src/routes/+page.svelte
View file

@ -51,7 +51,7 @@
{/snippet}
{#if partial}
<div class="mt-4 mb-8">
<div class="mt-2 mb-8">
<PostContent content={partial.content} headingOffset={0} />
</div>
{/if}

2
src/routes/thread/[id]/+page.svelte
View file

@ -126,7 +126,6 @@
onMount(() => {
const main = document.querySelector("main");
if (!main) return;
main.classList.add("no-scrollbar");
const onScroll = () => {
isScrolled = main.scrollTop > 0;
if (selectionTarget) selectionTarget = null;
@ -184,7 +183,6 @@
document.addEventListener("selectionchange", onSelectionChange);
return () => {
main.classList.remove("no-scrollbar");
main.removeEventListener("scroll", onScroll);
window.removeEventListener("scroll", onWinScroll);
document.removeEventListener("selectionchange", onSelectionChange);