From 8e0943e671d2e38219da171dc31beeabae79878a Mon Sep 17 00:00:00 2001 From: LoopX Agent <337587101+loopx-agent@users.noreply.github.com> Date: Tue, 3 Nov 2026 12:40:51 +0800 Subject: [PATCH 1/3] style(workspace): refine S5/S11 visual hierarchy and 390px mobile responsiveness Refine the visual hierarchy for Goal Overview worker observations and tighten the research history timeline and controls layout for compact 390px mobile screens according to design.md guidelines. - Format .goal-overview-worker-state with card container, uppercase section headers, and tabular numeric dl layout - Adjust .research-history-controls, .research-phase, and timeline legend for <=400px narrow viewports - Pass check-css-custom-properties stylesheet audits and presentation test suite Signed-off-by: LoopX Agent <337587101+loopx-agent@users.noreply.github.com> --- .../personal-workspace/goal-overview.css | 77 +++++++++++++++---- .../goal-research-history.css | 45 ++++++++++- 2 files changed, 104 insertions(+), 18 deletions(-) diff --git a/apps/presentation/dashboard/src/features/personal-workspace/goal-overview.css b/apps/presentation/dashboard/src/features/personal-workspace/goal-overview.css index 5f3a3c6cc0..cb56d220c8 100644 --- a/apps/presentation/dashboard/src/features/personal-workspace/goal-overview.css +++ b/apps/presentation/dashboard/src/features/personal-workspace/goal-overview.css @@ -202,22 +202,71 @@ .goal-outcome-body { padding-left: 0; } .goal-outcome-requirement > summary { grid-template-columns: 15px minmax(0, 1fr); gap: 4px 8px; } .goal-outcome-requirement > summary > small { grid-column: 2; max-width: none; padding-top: 0; } + .goal-overview-since { gap: 8px 12px; font-size: 13px; } + .goal-overview-heading { gap: 8px 12px; } + .goal-overview-worker-state { padding: 12px; } + .goal-overview-worker-state dl { grid-template-columns: 1fr; } } /* Driver observations remain separate from the Goal's activation and acceptance. */ -.goal-overview-worker-state { display: grid; gap: 8px; padding-block: 14px; border-block: 1px solid var(--pw-line); } -.goal-overview-worker-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } -.goal-overview-worker-header h3 { color: var(--pw-muted); font-size: var(--text-caption); font-weight: 500; line-height: var(--leading-caption); margin: 0; } -.goal-overview-worker-row { display: grid; gap: 6px; } -.goal-overview-worker-status { display: flex; align-items: center; gap: 8px; } -.goal-overview-worker-status strong { color: var(--pw-text); font-size: var(--text-body); font-weight: 500; line-height: var(--leading-body); } -.goal-overview-worker-details { margin-block: 4px; } -.goal-overview-worker-details summary { cursor: pointer; color: var(--pw-muted); font-size: var(--text-caption); line-height: var(--leading-caption); } -.goal-overview-worker-details summary:hover { color: var(--pw-text); } -.goal-overview-worker-state dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 6px; color: var(--pw-muted); font-size: var(--text-caption); line-height: var(--leading-caption); } -.goal-overview-worker-state dt { font-weight: 500; color: var(--pw-faint); } -.goal-overview-worker-state dd { margin: 0; overflow-wrap: anywhere; } -.goal-overview-worker-action { justify-self: start; min-height: 28px; padding: 4px 8px; border: 1px solid var(--pw-line); border-radius: 6px; background: transparent; color: var(--pw-muted); font-size: var(--text-caption); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } -.goal-overview-worker-action:hover { background: var(--pw-hover); color: var(--pw-text); } +.goal-overview-worker-state { + display: grid; + gap: 8px; + padding: 14px 16px; + border: 1px solid var(--pw-line); + border-radius: 8px; + background: var(--pw-card); + margin-block: 16px; +} +.goal-overview-worker-state h3 { + color: var(--pw-muted); + font-size: var(--text-caption); + font-weight: 600; + line-height: var(--leading-caption); + text-transform: uppercase; + letter-spacing: 0.04em; + margin: 0; +} +.goal-overview-worker-state p { + margin-block: .35rem; + overflow-wrap: anywhere; + font-size: var(--text-body); + line-height: var(--leading-body); +} +.goal-overview-worker-state details { + margin-block: .5rem 0; + border-top: 1px solid var(--pw-line); + padding-top: 8px; +} +.goal-overview-worker-state details > summary { + cursor: pointer; + color: var(--pw-muted); + font-size: var(--text-caption); +} +.goal-overview-worker-state details > summary:hover { + color: var(--pw-text); +} +.goal-overview-worker-state dl { + color: var(--pw-muted); + font-size: var(--text-caption); + line-height: var(--leading-caption); + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 8px 16px; + margin-top: 8px; +} +.goal-overview-worker-state dt { + font-weight: 500; + color: var(--pw-faint); +} +.goal-overview-worker-state dd { + margin: 2px 0 0; + overflow-wrap: anywhere; + color: var(--pw-text); + font-variant-numeric: tabular-nums; +} +.goal-overview-worker-state > button { + justify-self: start; +} @media (max-width: 640px) { .goal-overview-worker-state dl { grid-template-columns: minmax(0, 1fr); } .goal-overview-worker-status { flex-wrap: wrap; } diff --git a/apps/presentation/dashboard/src/features/personal-workspace/goal-research-history.css b/apps/presentation/dashboard/src/features/personal-workspace/goal-research-history.css index 4bc3a3cec5..84af043cfb 100644 --- a/apps/presentation/dashboard/src/features/personal-workspace/goal-research-history.css +++ b/apps/presentation/dashboard/src/features/personal-workspace/goal-research-history.css @@ -90,7 +90,36 @@ .research-history-read-error > button:hover, .research-history-empty > button:hover { background: var(--pw-hover); } .research-history-error { color: var(--pw-red); font-size: var(--text-body); overflow-wrap: anywhere; } .research-history button:focus-visible, .research-history-canvas:focus-visible, .research-history-detail:focus-visible { outline: 2px solid var(--pw-blue); outline-offset: -2px; } -@media (max-width: 640px) { .research-history-heading { flex-wrap: wrap; gap: 12px; } .research-history-controls { --research-control-height: 44px; width: 100%; column-gap: 4px; } .research-history-canvas { max-height: 350px; } .research-history-detail { padding: 16px; } .research-history-read-error, .research-history-empty { flex-wrap: wrap; } .research-history-read-error > button, .research-history-empty > button { margin-inline-start: 0; margin-top: 8px; } } +@media (max-width: 640px) { + .research-history-heading { flex-wrap: wrap; gap: 12px; } + .research-history-controls { + --research-control-height: 40px; + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + width: 100%; + padding: 6px; + } + .research-history-controls .research-lens { + flex: none; + } + .research-history-controls .research-analysis-entry-actions { + flex: 1 1 auto; + min-width: 0; + } + .research-history-controls > .research-history-search { + flex: none; + margin-left: auto; + } + .research-history-controls > button { + flex: none; + } + .research-history-canvas { max-height: 350px; } + .research-history-detail { padding: 20px; } + .research-history-read-error, .research-history-empty { flex-wrap: wrap; } + .research-history-read-error > button, .research-history-empty > button { margin-inline-start: 30px; } +} @media (prefers-reduced-motion: reduce) { .research-history * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } .research-history-edges text { fill: var(--pw-muted); font-size: var(--text-caption); paint-order: stroke; stroke: var(--pw-hover); stroke-width: 4px; } @@ -298,9 +327,12 @@ .research-history-canvas.is-timeline { padding: 16px; } .research-timeline { gap: 16px; } .research-phases { gap: 6px; } - .research-history .research-phase { gap: 8px; padding: 8px; } - .research-phase-head { gap: 0 4px; } - .research-phase-bar span { padding-inline: 4px; } + .research-history .research-phase { gap: 8px; padding: 8px; min-width: 0; } + .research-phase-head { gap: 0 4px; font-size: var(--text-caption); } + .research-phase-head > strong { font-size: var(--text-body); } + .research-phase-bar span { padding-inline: 2px; font-size: 11px; justify-content: center; min-width: 0; text-overflow: clip; } + .research-timeline-key { gap: 6px; } + .research-phase-legend { gap: 4px 8px; font-size: 11px; } .research-timeline-grid { padding-top: 16px; } .research-density { height: 56px; gap: 2px; padding-inline: 6px; } .research-history .research-trail-list button { padding: 14px; } @@ -309,6 +341,11 @@ .research-history-loading-phases { gap: 6px; } .research-history-loading-chart { gap: 3px; padding-inline: 8px; } } +@media (max-width: 400px) { + .research-phase-bar { height: 14px; } + .research-history .research-phase { padding: 6px 8px; gap: 6px; } + .research-phase-legend span { font-size: 11px; } +} @media (prefers-reduced-motion: reduce) { .research-history-loading-phases, .research-history-loading-chart { animation: none; } } .research-record-comparison { margin-block: 16px; border-block: 1px solid var(--pw-line); padding-block: 12px; } From 7e5dca8100121a4c6a77b5ffd5649b950335b335 Mon Sep 17 00:00:00 2001 From: LoopX Agent <337587101+loopx-agent@users.noreply.github.com> Date: Tue, 3 Nov 2026 14:24:46 +0800 Subject: [PATCH 2/3] fix(workspace): preserve single primary row and 44px touch height for research controls on mobile Signed-off-by: LoopX Agent <337587101+loopx-agent@users.noreply.github.com> --- .../goal-research-history.css | 24 +------------------ 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/apps/presentation/dashboard/src/features/personal-workspace/goal-research-history.css b/apps/presentation/dashboard/src/features/personal-workspace/goal-research-history.css index 84af043cfb..6e48e534c6 100644 --- a/apps/presentation/dashboard/src/features/personal-workspace/goal-research-history.css +++ b/apps/presentation/dashboard/src/features/personal-workspace/goal-research-history.css @@ -92,29 +92,7 @@ .research-history button:focus-visible, .research-history-canvas:focus-visible, .research-history-detail:focus-visible { outline: 2px solid var(--pw-blue); outline-offset: -2px; } @media (max-width: 640px) { .research-history-heading { flex-wrap: wrap; gap: 12px; } - .research-history-controls { - --research-control-height: 40px; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 6px; - width: 100%; - padding: 6px; - } - .research-history-controls .research-lens { - flex: none; - } - .research-history-controls .research-analysis-entry-actions { - flex: 1 1 auto; - min-width: 0; - } - .research-history-controls > .research-history-search { - flex: none; - margin-left: auto; - } - .research-history-controls > button { - flex: none; - } + .research-history-controls { --research-control-height: 44px; width: 100%; column-gap: 4px; } .research-history-canvas { max-height: 350px; } .research-history-detail { padding: 20px; } .research-history-read-error, .research-history-empty { flex-wrap: wrap; } From 2625b7df9e76bc3908f9039da2241f3eb642f1cb Mon Sep 17 00:00:00 2001 From: huangruiteng Date: Tue, 3 Nov 2026 19:21:25 +0800 Subject: [PATCH 3/3] refactor(workspace): remove duplicate worker metadata override Signed-off-by: huangruiteng --- .../dashboard/src/features/personal-workspace/goal-overview.css | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/presentation/dashboard/src/features/personal-workspace/goal-overview.css b/apps/presentation/dashboard/src/features/personal-workspace/goal-overview.css index cb56d220c8..362067bcd6 100644 --- a/apps/presentation/dashboard/src/features/personal-workspace/goal-overview.css +++ b/apps/presentation/dashboard/src/features/personal-workspace/goal-overview.css @@ -205,7 +205,6 @@ .goal-overview-since { gap: 8px 12px; font-size: 13px; } .goal-overview-heading { gap: 8px 12px; } .goal-overview-worker-state { padding: 12px; } - .goal-overview-worker-state dl { grid-template-columns: 1fr; } } /* Driver observations remain separate from the Goal's activation and acceptance. */ .goal-overview-worker-state {