diff --git a/apps/desktop/src/renderer/desktop/issue-detail.tsx b/apps/desktop/src/renderer/desktop/issue-detail.tsx
index e12acde4a2..15ff16352b 100644
--- a/apps/desktop/src/renderer/desktop/issue-detail.tsx
+++ b/apps/desktop/src/renderer/desktop/issue-detail.tsx
@@ -6,8 +6,10 @@ import {
   BREADCRUMBS_VARIANT,
   Breadcrumbs,
   ConfirmDialog,
+  DetailPage,
   EllipsisIcon,
   IconButton,
+  PAGE_FRAME,
   SKELETON_SHAPE,
   Skeleton,
   SkeletonRegion,
@@ -241,16 +243,21 @@ export function IssueDetail({
   );
   const identifier = issueIdentifier(workspaceName, issue.number);
   return (
-    <section className="automations-view" aria-label={identifier}>
-      <DetailToolbar
-        issueId={issue.id}
-        identifier={identifier}
-        onBack={onBack}
-        onArchive={archiving.ask}
-      />
-      {/* The issue is drawn as a task's document is (`version-view.tsx`): its title, then its body, at the document's measure. */}
-      <div className="desktop-document">
-        <div className="plan-document-scroll scroll-fade">
+    <>
+      <DetailPage
+        frame={PAGE_FRAME.TOOLBAR}
+        label={identifier}
+        toolbar={
+          <DetailToolbar
+            issueId={issue.id}
+            identifier={identifier}
+            onBack={onBack}
+            onArchive={archiving.ask}
+          />
+        }
+      >
+        {/* The issue is drawn as a task's document is (`version-view.tsx`): its title, then its body, at the document's measure. */}
+        <div className="desktop-document issue-document">
           <article className="plan-body">
             <IssueTitle issue={issue} onChange={onChange} />
             <IssueByline issue={issue} />
@@ -267,9 +274,9 @@ export function IssueDetail({
             />
           </article>
         </div>
-      </div>
+      </DetailPage>
       <ConfirmDialog confirm={archiving} question={archiveQuestion(identifier)} />
-    </section>
+    </>
   );
 }
 
@@ -282,31 +289,29 @@ export function IssueDetail({
  */
 export function IssueDetailSkeleton({ label }: { label: string }): React.JSX.Element {
   return (
-    <div className="desktop-document">
-      <div className="plan-document-scroll scroll-fade">
-        <SkeletonRegion label={label}>
-          <div className="plan-body">
-            <div className="markdown task-title">
-              <div className="markdown-heading task-title-text" data-level="1">
-                <Skeleton width={SKELETON_TITLE} />
-              </div>
-            </div>
-            <div className="issue-byline">
-              <Skeleton width={SKELETON_BYLINE} />
-            </div>
-            <div className="issue-properties">
-              {SKELETON_CHIPS.map((width) => (
-                <Skeleton key={width} shape={SKELETON_SHAPE.CONTROL} width={width} />
-              ))}
-            </div>
-            <div>
-              {SKELETON_DESCRIPTION.map((width) => (
-                <Skeleton key={width} width={width} />
-              ))}
+    <div className="desktop-document issue-document">
+      <SkeletonRegion label={label}>
+        <div className="plan-body">
+          <div className="markdown task-title">
+            <div className="markdown-heading task-title-text" data-level="1">
+              <Skeleton width={SKELETON_TITLE} />
             </div>
           </div>
-        </SkeletonRegion>
-      </div>
+          <div className="issue-byline">
+            <Skeleton width={SKELETON_BYLINE} />
+          </div>
+          <div className="issue-properties">
+            {SKELETON_CHIPS.map((width) => (
+              <Skeleton key={width} shape={SKELETON_SHAPE.CONTROL} width={width} />
+            ))}
+          </div>
+          <div>
+            {SKELETON_DESCRIPTION.map((width) => (
+              <Skeleton key={width} width={width} />
+            ))}
+          </div>
+        </div>
+      </SkeletonRegion>
     </div>
   );
 }
diff --git a/apps/desktop/src/renderer/desktop/issues-page.tsx b/apps/desktop/src/renderer/desktop/issues-page.tsx
index c0d4bfd068..64113b3585 100644
--- a/apps/desktop/src/renderer/desktop/issues-page.tsx
+++ b/apps/desktop/src/renderer/desktop/issues-page.tsx
@@ -12,6 +12,7 @@ import {
   COLLECTION_STATE,
   CollectionPage,
   type CollectionState,
+  DetailPage,
   EmptyState,
   ERROR_STATE_PLACEMENT,
   ErrorState,
@@ -323,23 +324,26 @@ function DetailFrame({
 }): React.JSX.Element {
   useAppCommand(APP_COMMAND.EXIT_ISSUES, onBack);
   return (
-    <section className="automations-view" aria-label="Issue">
-      <header className="desktop-toolbar">
-        <div className="desktop-toolbar-heading">
-          <IssueCrumbs onBack={onBack} />
-          <ExperimentTag />
-        </div>
-      </header>
+    <DetailPage
+      frame={PAGE_FRAME.TOOLBAR}
+      label="Issue"
+      toolbar={
+        <header className="desktop-toolbar">
+          <div className="desktop-toolbar-heading">
+            <IssueCrumbs onBack={onBack} />
+            <ExperimentTag />
+          </div>
+        </header>
+      }
+    >
       {failure === undefined ? (
         <IssueDetailSkeleton label={READING_ONE_LINE} />
       ) : (
-        <div className="automations-scroll scroll-fade-top">
-          <ErrorState onRetry={onRetry} placement={ERROR_STATE_PLACEMENT.CENTRED}>
-            {failure === ISSUE_CALL_FAILURE.NOT_FOUND ? GONE_LINE : UNREAD_ONE_LINE}
-          </ErrorState>
-        </div>
+        <ErrorState onRetry={onRetry} placement={ERROR_STATE_PLACEMENT.CENTRED}>
+          {failure === ISSUE_CALL_FAILURE.NOT_FOUND ? GONE_LINE : UNREAD_ONE_LINE}
+        </ErrorState>
       )}
-    </section>
+    </DetailPage>
   );
 }
 
@@ -348,7 +352,7 @@ function DetailFrame({
  * holds it until then, and every change sent through the list, so the list
  * it goes back to already holds what was kept.
  */
-function DetailPage({
+function IssuePage({
   tasks,
   issueId,
   issues,
@@ -473,7 +477,7 @@ function IssuesPages({ tasks }: { tasks: TasksControl }): React.JSX.Element {
         />
       ) : (
         // Keyed by the issue, so another issue's page holds nothing of the last's.
-        <DetailPage
+        <IssuePage
           key={place.issueId}
           tasks={tasks}
           issueId={place.issueId}
diff --git a/apps/desktop/src/renderer/styles/issues.css b/apps/desktop/src/renderer/styles/issues.css
index 55d89ea661..a57386d4b8 100644
--- a/apps/desktop/src/renderer/styles/issues.css
+++ b/apps/desktop/src/renderer/styles/issues.css
@@ -1,7 +1,8 @@
 /* The Issues page (`issues-page.tsx`). Its frame, headings, rows, chips, and
    title are the window's own: the list's page is @luke/ui's CollectionPage
-   under the toolbar, an issue's the Automations page's view and scroll, and
-   Home's sections and rows and a task's heading. Only
+   under the toolbar, an issue's its DetailPage under the toolbar with a
+   task's document inside, and Home's sections and rows and a task's
+   heading. Only
    what an issue adds is drawn here: its group's heading, its identifier, its
    status and priority marks, its properties' row, and its description's
    editor. Tokens only. */
@@ -12,6 +13,17 @@
   display: contents;
 }
 
+/* An issue's document, in its page's main column. It lends the description's
+   editor the plan's accent, which the plan's own scroll sets
+   (`.plan-document-scroll`), so its caret and ring are the plan's. Past the
+   page's own foot it keeps the plan's room for its last line to scroll clear
+   of the captions, which float at the window's foot over a page with no call
+   bar: the page's 40px and these 100px are the plan's 140px. */
+.issue-document {
+  --accent: var(--voice-luke);
+  padding-bottom: 100px; /* off-scale */
+}
+
 /* The list's status groups, a section's gap apart, as Home's are. Note
    that the list and the board set Home's rows at the window's own leading,
    as Home does, rather than at the page's body leading around them. */
diff --git a/packages/ui/src/components/detail-page/detail-page.css b/packages/ui/src/components/detail-page/detail-page.css
index c8b7a59c82..38a3ae55dc 100644
--- a/packages/ui/src/components/detail-page/detail-page.css
+++ b/packages/ui/src/components/detail-page/detail-page.css
@@ -167,6 +167,21 @@
     padding-top: var(--luke-section-gap);
   }
 
+  /* A main column holding nothing but an empty or failed state (an
+     `EmptyState`, or a centred `ErrorState` where the thing could not be
+     read) fills the column, so the state stands a little above the room's
+     middle, as a collection's empty or failed state does. */
+  .luke-detail-page-main:has(> .luke-detail-page-content > .luke-empty-state:only-child) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .luke-detail-page-content:has(> .luke-empty-state:only-child) {
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: column;
+  }
+
   /* Content across the room scrolls sideways in its own column. */
   .luke-detail-page[data-width="full"] .luke-detail-page-main {
     overflow-x: auto;
@@ -190,6 +205,19 @@
       padding-inline: var(--luke-detail-page-side);
     }
 
+    /* A lone empty or failed state fills the one scroll, as it fills the
+       main column above. */
+    .luke-detail-page-body:has(
+        > .luke-detail-page-main > .luke-detail-page-content > .luke-empty-state:only-child
+      ) {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .luke-detail-page-main:has(> .luke-detail-page-content > .luke-empty-state:only-child) {
+      flex: 1 0 auto;
+    }
+
     /* The secondary column follows the main one's end gap, no more. */
     .luke-detail-page[data-frame="toolbar"]
       .luke-detail-page-secondary
diff --git a/packages/ui/src/components/detail-page/detail-page.tsx b/packages/ui/src/components/detail-page/detail-page.tsx
index 4b4e44f635..4d31fd274f 100644
--- a/packages/ui/src/components/detail-page/detail-page.tsx
+++ b/packages/ui/src/components/detail-page/detail-page.tsx
@@ -12,7 +12,10 @@ import { PAGE_FRAME, PAGE_WIDTH, type PageHeading } from "../page-frame/page-fra
  * edge and the header's acts end on the secondary column's. Each scroll
  * reaches the page's edge on its own side, so the wheel works anywhere
  * over the column it moves. In a pane too narrow for two columns, the
- * secondary column follows the main content in the one scroll.
+ * secondary column follows the main content in the one scroll. A main
+ * content that is only an `EmptyState` (or a centred `ErrorState`, where the
+ * thing could not be read) stands it a little above the room's middle, as a
+ * collection's page stands its empty and failed states.
  *
  * Under the window's toolbar (`PAGE_FRAME.TOOLBAR`) the page draws no
  * header: the toolbar stands still above the columns, and the page is named