Build and Publish get their own bar, pinned above the scroll

They were in the workspace's chrome header for an afternoon. Two things were wrong with that.

That header is shared furniture — every panel in the app draws it the same way — and these two buttons
belong to this plugin and to the site it administers, not to the frame around it.

And the panels scroll their own contents now. Anything drawn inside one leaves the screen as soon as
somebody reads to the bottom, which is exactly when they reach for Publish.

So the bar is a sibling of the scrolling region rather than the first thing inside it: `shrink-0` above
a `min-h-0 flex-1`, which is the same arrangement that makes the panels scroll at all.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-30 23:18:19 +01:00
co-authored by Claude Opus 5
parent 9fd5ffd925
commit e8ce6bc830
2 changed files with 22 additions and 7 deletions
+17
View File
@@ -4,6 +4,7 @@ import { AdministrationPanel } from './AdministrationPanel';
import { MediaPanel } from './MediaPanel';
import { HomePanel } from './sections/HomePanel';
import { GalleriesPanel } from './sections/GalleriesPanel';
import { PublishButton } from './PublishButton';
import { AboutPanel } from './sections/AboutPanel';
import { RecordsPanel } from './sections/RecordsPanel';
import { COLLABS_CONFIG, DROPS_CONFIG, GALLERY_CONFIG } from './sections/records';
@@ -86,6 +87,22 @@ export const DetailPanel = () => {
return (
<div className="flex size-full flex-col overflow-hidden">
{/*
The site's own actions, pinned above whatever the section is showing.
OUTSIDE the scroll area on purpose. Every panel scrolls its own contents, so anything drawn
inside one leaves the screen as soon as somebody reads to the bottom — and Publish is what you
reach for AFTER reading to the bottom. It sits here instead, as a sibling of the scrolling
region rather than the first thing inside it.
Not in the workspace's chrome header either, where it lived for an afternoon. That header is
shared furniture drawn the same way by every panel in the app; these two buttons belong to this
plugin and to the site it administers.
*/}
<div className="flex shrink-0 items-center justify-end gap-2 border-b border-border px-4 py-2">
<PublishButton />
</div>
<div className="min-h-0 flex-1">{Panel ? <Panel /> : <PlannedSection section={current} />}</div>
</div>
);