diff --git a/packages/cli/assets/templates/pages/detail-page/page.tsx b/packages/cli/assets/templates/pages/detail-page/page.tsx
index e94d4531f73..5c33994239e 100644
--- a/packages/cli/assets/templates/pages/detail-page/page.tsx
+++ b/packages/cli/assets/templates/pages/detail-page/page.tsx
@@ -48,15 +48,6 @@ import type {CSSProperties} from 'react';
 // "bleed to container edge" prop (#2626). Everything else uses props. Plain
 // inline styles — no StyleX compiler required.
 
-// Dock the tab bar on the header's bottom edge so the active-tab underline
-// meets the header divider. TabList's `isFullBleed` handles the inline bleed;
-// the block-end dock is still hand-tuned because the tab row sits inside
-// nested flex wrappers (StackItem > HStack), where no component prop can
-// reach the header's padding edge (a LayoutHeader docking slot would).
-const tabsRow: CSSProperties = {
-  marginBottom: -16,
-  marginTop: 12,
-};
 // Pull the list items' inner padding back so their content optically aligns
 // with the section heading above (ListItem insets content by ~8px). No
 // edge/inset prop on List (#2626).
@@ -178,7 +169,39 @@ function PageHeader({
   isNarrow: boolean;
 }) {
   return (
-    <LayoutHeader hasDivider padding={4}>
+    <LayoutHeader
+      hasDivider
+      padding={4}
+      bottom={
+      <HStack vAlign="center">
+        <StackItem size="fill">
+          <TabList
+            value={activeTab}
+            onChange={onTabChange}
+            size="lg"
+            isFullBleed>
+            <Tab value="details" label="Details" />
+            <Tab value="invoices" label="Invoices" />
+            <Tab value="timeline" label="Timeline" />
+            <TabMenu
+              label="More"
+              options={[
+                {value: 'customer', label: 'Customer'},
+                {value: 'analysis', label: 'Analysis'},
+              ]}
+            />
+          </TabList>
+        </StackItem>
+        <Button
+          label={isPanelOpen ? 'Hide panel' : 'Show panel'}
+          variant="ghost"
+          size="md"
+          icon={<Icon icon={ViewColumnsIcon} size="sm" />}
+          isIconOnly
+          onClick={onTogglePanel}
+        />
+      </HStack>
+      }>
       <VStack gap={3}>
         <HStack gap={4} vAlign="start">
           <StackItem size="fill">
@@ -260,34 +283,6 @@ function PageHeader({
           </HStack>
         )}
 
-        <HStack vAlign="center" style={tabsRow}>
-          <StackItem size="fill">
-            <TabList
-              value={activeTab}
-              onChange={onTabChange}
-              size="lg"
-              isFullBleed>
-              <Tab value="details" label="Details" />
-              <Tab value="invoices" label="Invoices" />
-              <Tab value="timeline" label="Timeline" />
-              <TabMenu
-                label="More"
-                options={[
-                  {value: 'customer', label: 'Customer'},
-                  {value: 'analysis', label: 'Analysis'},
-                ]}
-              />
-            </TabList>
-          </StackItem>
-          <Button
-            label={isPanelOpen ? 'Hide panel' : 'Show panel'}
-            variant="ghost"
-            size="md"
-            icon={<Icon icon={ViewColumnsIcon} size="sm" />}
-            isIconOnly
-            onClick={onTogglePanel}
-          />
-        </HStack>
       </VStack>
     </LayoutHeader>
   );
diff --git a/packages/core/src/Layout/LayoutHeader.tsx b/packages/core/src/Layout/LayoutHeader.tsx
index d5a3706b76b..8f63bde3ce0 100644
--- a/packages/core/src/Layout/LayoutHeader.tsx
+++ b/packages/core/src/Layout/LayoutHeader.tsx
@@ -62,6 +62,13 @@ const styles = stylex.create({
     '--container-padding-block-start': '0px',
     '--container-padding-block-end': '0px',
   },
+  // ARM A2: a docked block-end slot. Cancels the header's own block-end
+  // padding and supplies its own gap above, because the slot sits outside
+  // `children` and therefore outside any gap the child stack provides.
+  dock: {
+    marginBlockStart: 'var(--container-padding-block-end, 0px)',
+    marginBlockEnd: 'calc(-1 * var(--container-padding-block-end, 0px))',
+  },
   divider: {
     borderBlockEndWidth: 1,
     borderBlockEndStyle: 'solid',
@@ -83,6 +90,13 @@ export interface LayoutHeaderProps extends BaseProps<HTMLDivElement> {
    */
   children?: ReactNode;
 
+  /**
+   * Content docked on the header's block-end edge, below `children`. The
+   * header cancels its own block-end padding for this slot, so a tab strip
+   * rendered here meets the `hasDivider` border with no hand-written margin.
+   */
+  bottom?: ReactNode;
+
   /**
    * Adds a themed border at the bottom edge.
    * When false, spacing collapse is applied automatically for seamless visual flow.
@@ -136,6 +150,7 @@ export interface LayoutHeaderProps extends BaseProps<HTMLDivElement> {
  */
 export function LayoutHeader({
   children,
+  bottom,
   hasDivider,
   height,
   label,
@@ -181,6 +196,7 @@ export function LayoutHeader({
           padding != null && containerPaddingBlockEndVarStyles[padding],
         )}>
         {children}
+        {bottom != null && <div {...stylex.props(styles.dock)}>{bottom}</div>}
       </div>
     </div>
   );