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:
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user