From f07d7c393e95bc05a223a818004cf50219533da3 Mon Sep 17 00:00:00 2001
From: bkennedy <bryan@mysteryexperience.com>
Date: Mon, 13 Jul 2026 16:48:31 +0000
Subject: [PATCH] style(action-page): PROG-120 center sidebar titles within the
 rail
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The right-rail section headers (Action/Step Status, Focus, Arc, Due
date, Priority, Estimate, Tags) were left-aligned and their shared look
was duplicated across the status panel and the Field component. Center
them within the sidebar and hoist the treatment into one
SIDEBAR_TITLE_CLS constant (color stays per-use) so the titles can't
drift apart again — the v04.3 experience-consistency goal.
---
 src/client/pages/ActionPage.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/client/pages/ActionPage.tsx b/src/client/pages/ActionPage.tsx
index 13f73e2..37a256e 100644
--- a/src/client/pages/ActionPage.tsx
+++ b/src/client/pages/ActionPage.tsx
@@ -52,6 +52,12 @@ const fmtTime = (iso: string) =>
 const FIELD_ACTION_CLS =
   "flex min-h-11 items-center text-xs text-adobe hover:underline sm:block sm:min-h-0";
 
+// The one sidebar-title treatment (PROG-120): every section header in the
+// right rail — the status panel's and each Field's — shares this string, so
+// the titles can't drift apart again. Centered within the rail; the color is
+// per-use (adobe for the status panel, faint ink for plain fields).
+const SIDEBAR_TITLE_CLS = "text-center text-xs font-medium uppercase tracking-wide font-mono";
+
 export default function ActionPage({
   snapshot,
   keyParam,
@@ -178,7 +184,7 @@ export default function ActionPage({
               link is retired). The header names which kind of thing this page
               shows: a Step is an action with a parent (PROG-106 chain). */}
           <div className="rounded-lg border border-adobe-wash bg-adobe-wash/30 p-3">
-            <p className="mb-2 text-xs font-medium uppercase tracking-wide font-mono text-adobe-deep">
+            <p className={`mb-2 ${SIDEBAR_TITLE_CLS} text-adobe-deep`}>
               {action.parentActionId ? "Step Status" : "Action Status"}
             </p>
             {/* The buttons live inside IconSelect's control column (PROG-110)
@@ -574,9 +580,7 @@ function CheckGlyph() {
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div>
-      <p className="mb-1 text-xs font-medium uppercase tracking-wide font-mono text-ink-faint">
-        {label}
-      </p>
+      <p className={`mb-1 ${SIDEBAR_TITLE_CLS} text-ink-faint`}>{label}</p>
       {children}
     </div>
   );