marcel/familienarchiv
1
0
Fork 0
Code Issues 107 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(bulk-upload): add gradient overflow indicators to chip strip

Browse Source 
Adds pointer-events-none left/right gradient fade overlays on the
FileSwitcherStrip track div so mouse-only users can see when more
chips are hidden beyond the visible area. The scrollbar is hidden
(scrollbar-width:none) so gradients are the only overflow signal.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-25 11:17:05 +02:00
parent 0ab85d888b
commit e5fe2fc5c6
1 changed files with 43 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/lib/components/document/FileSwitcherStrip.svelte
View File

@@ -83,6 +83,14 @@ $effect(() => {
>‹</button >‹</button
> >
<!-- Gradient fade overlays signal hidden overflow to pointer-only users -->
<div class="relative flex flex-1 overflow-hidden">
<div
class="pointer-events-none absolute inset-y-0 left-0 z-10 w-6 bg-gradient-to-r from-pdf-ctrl to-transparent"
></div>
<div
class="pointer-events-none absolute inset-y-0 right-0 z-10 w-6 bg-gradient-to-l from-pdf-ctrl to-transparent"
></div>
<div bind:this={trackEl} class="flex flex-1 gap-1 overflow-x-auto" style="scrollbar-width:none"> <div bind:this={trackEl} class="flex flex-1 gap-1 overflow-x-auto" style="scrollbar-width:none">
<ul bind:this={listEl} role="list" class="flex flex-row gap-1 py-1"> <ul bind:this={listEl} role="list" class="flex flex-row gap-1 py-1">
{#each files as entry, i (entry.id)} {#each files as entry, i (entry.id)}
@@ -130,6 +138,7 @@ $effect(() => {
{/each} {/each}
</ul> </ul>
</div> </div>
</div>
<button <button
type="button" type="button"