Skip to content

style(action-page): PROG-120 center all sidebar titles within the sidebar #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bryankennedy merged 2 commits into from
Jul 13, 2026
Merged

style(action-page): PROG-120 center all sidebar titles within the sidebar #92

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f07d7c3
style(action-page): PROG-120 center sidebar titles within the rail
bryankennedy Jul 13, 2026
05d77de
Merge branch 'main' into act/PROG-120
bryankennedy Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/client/pages/ActionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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>
);
Expand Down