the detail panels scroll

Four sections could not be scrolled: About, and Gallery, Drops and Collabs, which are three
configurations of one panel. Both of those panels were written yesterday with `overflow-auto` and no
height, so they grew to fit their content and ran off the bottom of the workspace instead of scrolling
inside it.

`overflow-auto` only does something on an element with a height to overflow. DetailPanel gives its
child `min-h-0 flex-1` inside a `size-full` column, so a panel that says `size-full` fills exactly that
box and scrolls within it — which is what Home, Galleries and Administration were already doing and
what these two were copied from without.

Messages had the same fault in a different shape. Its list is a flex child with `flex-1 overflow-auto`,
and a flex child defaults to `min-height: auto` — it refuses to shrink below its content, so the list
grew the panel rather than scrolling. `min-h-0` is what lets it shrink, and therefore what makes the
overflow mean anything.

Audited the rest rather than fixing the reported ones: every panel with an `overflow-auto` now pairs it
with a height, and the two that have none are centred single screens with nothing to scroll.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-30 22:37:23 +01:00
co-authored by Claude Opus 5
parent 0dce8fcb3c
commit 9fd5ffd925
3 changed files with 6 additions and 3 deletions
+1 -1
View File
@@ -117,7 +117,7 @@ export const AboutPanel = () => {
);
return (
<div className="flex flex-col gap-4 overflow-auto p-4">
<div className="flex size-full flex-col gap-4 overflow-auto p-4">
<p className="text-xs text-muted-foreground">
The About page, in the order it is shown: a header, the text about you, the product, and the
manifesto.
+1 -1
View File
@@ -209,7 +209,7 @@ export const RecordsPanel = ({ config }: { config: RecordsConfig }) => {
const field = (key: string, value: string) => setDraft((current) => ({ ...current, [key]: value }));
return (
<div className="flex flex-col gap-4 overflow-auto p-4">
<div className="flex size-full flex-col gap-4 overflow-auto p-4">
<p className="text-xs text-muted-foreground">{config.blurb}</p>
{/* The list, and the one field that makes another. A record is created with a title alone and