noNameWEB/SealShare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Scroll a long file list on the download page on its own

Browse Source 
A share with hundreds of files made the download page as tall as its
list, so the recipient scrolled far past the buttons. The list now sits
in .share-file-list, capped at min(32rem, 60dvh) with its own scroll, as
the upload page's selected-files list already is; the download buttons
stay on the first screen.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-10-08 22:40:34 +02:00
co-authored by Claude Opus 5.5
parent 63bae2d1a6
commit 6c3202a0cf
3 changed files with 47 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+10
View File
@@ -243,6 +243,16 @@
block-size: 100%;
}
/*
* resources/views/livewire/share-download.blade.php: a long file list scrolls on its own, as the
* upload page's does, so the download buttons stay near the top of the page. It is the page's main
* content, so it may take more of the window.
*/
.share-file-list {
max-block-size: min(32rem, 60dvh);
overflow-y: auto;
}
/*
* resources/views/livewire/share-download.blade.php: the private text once the recipient shows it,
* as it was typed — its line breaks kept and a long word or key wrapped rather than overflowing.
resources/views/livewire/share-download.blade.php
+21 -19
View File
@@ -94,25 +94,27 @@
})"
x-on:beforeunload.window="warnBeforeLeaving($event)"
>
<x-list :label="__('Shared Files')">
@foreach ($files as $file)
<x-list-item
:title="$file->relative_path ?: $file->original_name"
icon="description"
wire:key="file-{{ $file->id }}"
>
<x-slot:description><span class="md-tabular">{{ Number::fileSize($file->file_size) }}</span></x-slot:description>
<x-slot:end>
<x-row gap="space100">
<span x-show="isDone({{ $file->id }})" x-cloak data-test="file-downloaded">
<x-icon name="download_done" class="md-ink-success" :label="__('Downloaded')" />
</span>
<x-button icon="download" :link="route('share.download.file', [$share, $file])" no-wire-navigate :aria-label="__('Download :name', ['name' => $file->original_name])" x-on:click="downloaded = true; markDone({{ $file->id }})" />
</x-row>
</x-slot:end>
</x-list-item>
@endforeach
</x-list>
<div class="share-file-list" data-test="share-file-list">
<x-list :label="__('Shared Files')">
@foreach ($files as $file)
<x-list-item
:title="$file->relative_path ?: $file->original_name"
icon="description"
wire:key="file-{{ $file->id }}"
>
<x-slot:description><span class="md-tabular">{{ Number::fileSize($file->file_size) }}</span></x-slot:description>
<x-slot:end>
<x-row gap="space100">
<span x-show="isDone({{ $file->id }})" x-cloak data-test="file-downloaded">
<x-icon name="download_done" class="md-ink-success" :label="__('Downloaded')" />
</span>
<x-button icon="download" :link="route('share.download.file', [$share, $file])" no-wire-navigate :aria-label="__('Download :name', ['name' => $file->original_name])" x-on:click="downloaded = true; markDone({{ $file->id }})" />
</x-row>
</x-slot:end>
</x-list-item>
@endforeach
</x-list>
</div>
<div x-show="running || finished" x-cloak data-test="folder-download">
<x-stack gap="space100">