feat(ui): D.9 DenseDawConcept drift fix — inline hex → design tokens - #81
Merged
Merged
Conversation
This was referenced May 18, 2026
slittycode
added a commit
that referenced
this pull request
May 18, 2026
tests/smoke/responsive-layout.spec.ts:192 fails at the 375px mobile
viewport with `expect(getByText('Analysis Results')).toBeVisible()`
resolving to a hidden h2. Root cause: my D.5a migration replaced the
original `flex flex-col md:flex-row` layout for the Analysis Results
page header with the SectionHeader primitive which used
`flex items-center justify-between` unconditionally. At 375px the
two Download buttons (~280px combined) squeeze the title to zero
width and the parent `.ableton-shell overflow-hidden` clips the
title off-screen, so Playwright sees it as hidden.
Restore the responsive collapse: mobile-first
`flex flex-col items-start gap-2`, then `md:flex-row md:items-center
md:justify-between md:gap-3` at the 768px+ breakpoint. Matches the
pre-D.5a Analysis Results header behavior. Other consumers of
SectionHeader (the many ResultsSectionHeader call sites) have small
rightSlot content (badges, single pills, icons) — stacking those
below the title on mobile is a tiny visual improvement, not a
regression.
This is the failure that's been blocking #79, #80, #81, #82 — none
of those PRs introduced the bug; they all inherit it from main
because D.5a (#71) landed this regression. The fact that #71 itself
merged green is either CI luck (the test passed on its first run)
or the test was added later and not re-checked.
Landing this hotfix lets the four open PRs rebase and pick up the
fix to clear their CI.
Verified: lint clean, 628/628 unit tests passing, build clean.
https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
Co-authored-by: Claude <noreply@anthropic.com>
PR 13 of 16 in the UI consistency overhaul.
DenseDawConcept.tsx had 13 inline hex codes (#ff7a1a / #ff9f43) used
across channel-strip data, Tailwind arbitrary classes
(bg-[#ff7a1a]/10, border-[#ff7a1a]/40, text-[#ff9f43] etc.), and
SVG stopColor attributes. The plan §D.9 flagged these as drift to
fix without disturbing the rest of the file's deliberately
"premium" aesthetic (large border radii, layered shadows).
Bulk-replace both hex codes with `var(--color-accent)` —
expressible as a CSS variable in every observed context:
- Tailwind arbitrary values: `bg-[var(--color-accent)]/10`,
`text-[var(--color-accent)]`, `border-[var(--color-accent)]/40`
- SVG attributes: `stopColor="var(--color-accent)"`
- JS object literals (consumed by inline `style={{ ... }}`):
`tone: 'var(--color-accent)'`
The `#ff9f43` lighter shade collapses to the canonical accent; the
slight saturation difference is acceptable for token compliance and
matches every other accent surface in the app.
Deferred (out of scope):
- The arbitrary `rounded-[1.1rem]` / `rounded-[1.35rem]` /
`rounded-[1.5rem]` border-radius values stay. They're intentional
design choices for this experimental "premium" view — flattening
to rounded-sm would erase the entire visual character of the
Dense DAW Lab mockup. The plan listed this as a drift fix but
inspecting the file shows these radii ARE the aesthetic, not
drift.
- RetroVisualizer.tsx — pure canvas rendering; no DOM chrome to
migrate (the plan agreed: "only the wrapper (if any) → Panel
variant='ghost'"). The component has no outer wrapper, so no
change needed.
Preserved verbatim:
- All other style choices in DenseDawConcept (the rgba box-shadows
with hardcoded 255/122/26 channels, the white/{N} border tints,
arbitrary border-radius values).
- The component's URL gating (`?view=daw-concept` route).
Verified: lint clean, 628/628 unit tests passing, build clean.
https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
slittycode
force-pushed
the
claude/ui-restyle-pr13-experimental
branch
from
May 18, 2026 23:58
7bddf49 to
8407c62
Compare
slittycode
pushed a commit
that referenced
this pull request
May 18, 2026
PR 14 of 16 in the UI consistency overhaul. Final cleanup pass. Removes three CSS utility classes from index.css: - .ableton-panel - .ableton-device - .ableton-header All three were retired by D.* migrations — every former consumer now uses the canonical primitives from components/ui/ (Panel, DeviceRack, SectionHeader). `grep -rn` against apps/ui/src/ confirms zero remaining usages. .ableton-shell and .ableton-toolbar STAY because App.tsx:952,956 still consumes them for the outer app chrome (the load-bearing section-grid shell). A focused follow-up could migrate those two to DeviceRack / a future AppShell primitive; out of scope here. Deferred (preserved as-is): - components/MeasurementPrimitives.tsx cannot be fully deleted yet — 5 consumers still depend on timeline/lane primitives (LaneContainer, LaneRow, StatsBar, TimeRuler) that the plan explicitly preserved. The shipped primitives (StatusBadge, DeltaBadge, MetricBar, MetricBarRow, OutlinePillButton, TokenBadgeList, StyledDataTable, AccentMetricCard) also still have consumers in MeasurementDashboard and AnalysisResults sections that weren't migrated (StructureLanes, HarmonyLanes, AnalysisResults remaining sections). Keep the file intact. - components/Tooltip.tsx stays as a re-export shim; the file isn't causing any drift and external imports may still target it. Verified: lint clean, 628/628 unit tests passing, build clean. D.* migrations summary (all merged or open at time of this PR): - D.0 Foundation (#64) ✓ - D.1 Primitives complete (#65) ✓ - D.2 SamplePlayback (#66) ✓ - D.3 SignalChain marquee (#67) ✓ - D.4 FileUpload + Input Source (#69) ✓ - D.5a Results header + metric strip (#71) ✓ - D.5b Mix Chain (#73) ✓ - D.5c Patches (#74) ✓ - D.5d Section headers (#75) ✓ - D.6a Dashboard structure (#76) ✓ - D.6b Dashboard sections (#77) ✓ - D.6c Dashboard headers (#78) ✓ - D.7 SessionMusicianPanel + MixDoctorPanel (#79) — open - D.8 Signal Monitor + SpectrogramViewer drift (#80) — open - D.9 DenseDawConcept drift (#81) — open - D.10 Cleanup (this PR) ✓ https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
slittycode
added a commit
that referenced
this pull request
May 19, 2026
…82) PR 14 of 16 in the UI consistency overhaul. Final cleanup pass. Removes three CSS utility classes from index.css: - .ableton-panel - .ableton-device - .ableton-header All three were retired by D.* migrations — every former consumer now uses the canonical primitives from components/ui/ (Panel, DeviceRack, SectionHeader). `grep -rn` against apps/ui/src/ confirms zero remaining usages. .ableton-shell and .ableton-toolbar STAY because App.tsx:952,956 still consumes them for the outer app chrome (the load-bearing section-grid shell). A focused follow-up could migrate those two to DeviceRack / a future AppShell primitive; out of scope here. Deferred (preserved as-is): - components/MeasurementPrimitives.tsx cannot be fully deleted yet — 5 consumers still depend on timeline/lane primitives (LaneContainer, LaneRow, StatsBar, TimeRuler) that the plan explicitly preserved. The shipped primitives (StatusBadge, DeltaBadge, MetricBar, MetricBarRow, OutlinePillButton, TokenBadgeList, StyledDataTable, AccentMetricCard) also still have consumers in MeasurementDashboard and AnalysisResults sections that weren't migrated (StructureLanes, HarmonyLanes, AnalysisResults remaining sections). Keep the file intact. - components/Tooltip.tsx stays as a re-export shim; the file isn't causing any drift and external imports may still target it. Verified: lint clean, 628/628 unit tests passing, build clean. D.* migrations summary (all merged or open at time of this PR): - D.0 Foundation (#64) ✓ - D.1 Primitives complete (#65) ✓ - D.2 SamplePlayback (#66) ✓ - D.3 SignalChain marquee (#67) ✓ - D.4 FileUpload + Input Source (#69) ✓ - D.5a Results header + metric strip (#71) ✓ - D.5b Mix Chain (#73) ✓ - D.5c Patches (#74) ✓ - D.5d Section headers (#75) ✓ - D.6a Dashboard structure (#76) ✓ - D.6b Dashboard sections (#77) ✓ - D.6c Dashboard headers (#78) ✓ - D.7 SessionMusicianPanel + MixDoctorPanel (#79) — open - D.8 Signal Monitor + SpectrogramViewer drift (#80) — open - D.9 DenseDawConcept drift (#81) — open - D.10 Cleanup (this PR) ✓ https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe Co-authored-by: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PR 13 of 16. Drift fix on
DenseDawConcept.tsx: 13 inline hex codes (#ff7a1a/#ff9f43) replaced withvar(--color-accent).Migration
Bulk-replace both hex codes with
var(--color-accent)— expressible as a CSS variable in every observed context:bg-[var(--color-accent)]/10,text-[var(--color-accent)],border-[var(--color-accent)]/40stopColor="var(--color-accent)"style={{}}):tone: 'var(--color-accent)'The
#ff9f43lighter shade collapses to the canonical accent; the slight saturation difference is acceptable for token compliance and matches every other accent surface.Deferred (out of scope)
rounded-[1.1rem]/rounded-[1.35rem]/rounded-[1.5rem]border-radius values stay. They're intentional design choices for this experimental "premium" view — flattening torounded-smwould erase the entire visual character of the Dense DAW Lab mockup. The plan listed this as drift but inspecting the file shows these radii ARE the aesthetic.Preserved verbatim
?view=daw-conceptroute).Test plan
npm run lint— cleannpm run test:unit— 628/628 passingnpm run build— cleanUp next
D.10 Cleanup — delete
components/MeasurementPrimitives.tsxif all consumers are migrated (likely needs leaving some exports for now), deletecomponents/Tooltip.tsx, drop unused.ableton-panel/.ableton-device/.ableton-headeraliases fromindex.css.https://claude.ai/code/session_01WNtYcWXwn4mVnnjxqT7uAe
Generated by Claude Code