diff --git a/web/DetailHeader.tsx b/web/DetailHeader.tsx
index f5d879a..19024a0 100644
--- a/web/DetailHeader.tsx
+++ b/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
- * what you do after editing anything, and a header is the one piece of chrome every panel already has.
+ * Build and Publish were, briefly. They belong to the panel rather than to the workspace's chrome: the
+ * 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 />
     </>
   );
 };
diff --git a/web/DetailPanel.tsx b/web/DetailPanel.tsx
index 0835f36..42ecddd 100644
--- a/web/DetailPanel.tsx
+++ b/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>
   );