Harden disclosure visuals and download toolbar tail

Replace the synthetic disclosure interpolation test with a real Chrome headless run against the existing visual harness, sampling rendered height, transform, opacity, and adjacent row geometry during collapse and expansion.

Group the global downloads disclosure action in a responsive toolbar tail, remove the horizontal toolbar scroll path, and keep the action pinned within the supported 1120 pixel layout while the schedule is open.

Disable the global disclosure action for a truly empty queue and cover the empty model plus responsive DOM boundaries.
This commit is contained in:
Sucukdeluxe
2026-08-22 11:32:23 +02:00
parent a101bd0bed
commit 9cdd0310a5
4 changed files with 354 additions and 94 deletions
@@ -149,10 +149,12 @@ export function DownloadsToolbar({ actions, model }: { actions: DownloadsViewAct
</span>
<span className="downloads-toolbar-divider" />
<button disabled={!hasSelectedPackage} onClick={actions.onMoveSelectionUp} type="button">Nach oben</button>
<button disabled={!hasSelectedPackage} onClick={actions.onMoveSelectionDown} type="button">Nach unten</button>
<button disabled={!hasSelectedPackage} onClick={actions.onMoveSelectionDown} type="button">Nach unten</button>
<button disabled={!onePackage} onClick={actions.onRenameSelection} type="button">Umbenennen</button>
<button disabled={!hasSelection} onClick={actions.onRemoveSelection} type="button">Entfernen</button>
<button className="downloads-toolbar-toggle-all" onClick={actions.onToggleAllPackages} type="button">Alle ein-/ausklappen</button>
<span aria-label="Paketdarstellung" className="downloads-toolbar-tail" role="group">
<button className="downloads-toolbar-toggle-all" disabled={model.empty} onClick={actions.onToggleAllPackages} type="button">Alle ein-/ausklappen</button>
</span>
</div>
);
}
+6 -2
View File
@@ -204,8 +204,10 @@
.downloads-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-height: 52px;
overflow-x: hidden;
padding: 8px 10px;
border-bottom: 1px solid var(--ui-border);
background: var(--ui-surface);
@@ -237,7 +239,10 @@
background: var(--ui-border);
}
.downloads-toolbar-toggle-all {
.downloads-toolbar-tail {
display: flex;
flex: 1 0 auto;
justify-content: flex-end;
margin-left: auto;
}
@@ -945,7 +950,6 @@
}
@media (max-width: 1120px) {
.downloads-toolbar,
.downloads-footer {
overflow-x: auto;
}