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>

web/DetailHeader.tsx

@@ -1,6 +1,5 @@
 import { useSearchParams } from 'react-router';
 import { DEFAULT_SECTION, isSectionKey, sectionFor } from './sections';
-import { PublishButton } from './PublishButton';
 
 /**
  * The detail panel's chrome header — the section's own name, not the word "Detail".
@@ -19,10 +18,12 @@ import { PublishButton } from './PublishButton';
  * "Photos and video the site is built from" is useful in the NAV, where somebody is choosing between
  * ten sections. Repeated above the thing they chose, it is a caption for a decision already made.
  *
- * ── And Publish, on the right ──
+ * ── The actions are NOT here ──
  *
- * The one action that belongs to every section rather than to any of them. It is here because it is
+ * Build and Publish were, briefly. They belong to the panel rather than to the workspace's chrome: the
- * what you do after editing anything, and a header is the one piece of chrome every panel already has.
+ * chrome header scrolls out of reach on a long section, and it is shared furniture that every panel in
+ * the app draws the same way. They live in DetailPanel's own bar now, which is pinned above the scroll
+ * area and always reachable.
  */
 export const DetailHeader = () => {
   const [params] = useSearchParams();
@@ -34,9 +35,6 @@ export const DetailHeader = () => {
     <>
       <Icon className="h-3.5 w-3.5 shrink-0" />
       <span className="flex-1 truncate text-xs font-medium">{section.label}</span>
-      {/* Right of the name, on every section. Publishing is the last step of every edit and it used to
-          live in one card at the bottom of one section — see PublishButton for why that was wrong. */}
-      <PublishButton />
     </>
   );
 };

web/DetailPanel.tsx

@@ -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>
   );