fix(ui): polish Suivi tab spacing, contrast, and readability - #276
Merged
Conversation
Resolve multiple UI issues on the Applications (Suivi) tab identified during a polish pass: Spacing & rhythm - Bump section gaps from mt-3/mt-4 (12-16px) to mt-5 (20px) between AvailabilityPanel, Pipeline section, and the missions grid. - Increase Pipeline section padding (py-4 -> py-5) for breathing room. - Flatten the nested "Dossier recommande" card (bordered card-in-card) into a subtle bg-blueprint-blue/5 tint, removing the nested-card smell. Contrast (WCAG AA) - Replace text-text-muted (#a6a09b, ~2.8:1 on white) with text-text-subtle (#57534d, ~7.3:1) across all Suivi-flow body text, labels, hints, and meta. Eliminates every low-contrast text node on the tab. Readability - Bump text-micro (10px) to text-caption (11px) for all eyebrows, status badges, evidence labels, hints, and meta throughout the Suivi flow (ApplicationsPage, ApplicationPipelineSummary, AvailabilityPanel, CopilotPanel, OperationalStoryCard, OperationalEmptyState, OperationalStatusBadge). 10px was below the comfortable readability threshold for a 400px side panel. Mobile - Remove the nested max-h-[32rem] overflow-y-auto scroll box on mobile; restrict it to lg breakpoint only so the whole page scrolls naturally on narrow viewports. Verified at 400px side-panel width: 0 horizontal overflow, 0 text below 11px, 0 muted-gray text nodes, consistent 20px section rhythm. Checked both list-only and mission-selected (CopilotPanel rendered) states. Typecheck and lint pass (0 errors).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
There was a problem hiding this comment.
Pull request overview
This PR polishes the Suivi (Applications) tab UI at constrained side-panel widths by improving readability and contrast via Tailwind class updates across several Svelte components.
Changes:
- Increased text readability by replacing
text-microusages withtext-captionin Suivi-related UI components. - Improved contrast by swapping many
text-text-mutedoccurrences totext-text-subtle. - Adjusted layout rhythm and scrolling behavior (e.g., spacing tweaks and applying the missions-column max-height/scroll only at
lg:).
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/extension/src/ui/pages/ApplicationsPage.svelte | Spacing/rhythm adjustments; readability/contrast updates; missions list scroll behavior tweak. |
| apps/extension/src/ui/organisms/CopilotPanel.svelte | Readability/contrast class updates for labels, legends, and helper text. |
| apps/extension/src/ui/organisms/AvailabilityPanel.svelte | Readability/contrast class updates for validation/help text and counters. |
| apps/extension/src/ui/organisms/ApplicationPipelineSummary.svelte | Readability/contrast updates for pipeline summary cards. |
| apps/extension/src/ui/molecules/OperationalStoryCard.svelte | Readability/contrast updates for eyebrow/evidence labels. |
| apps/extension/src/ui/molecules/OperationalEmptyState.svelte | Readability/contrast updates for headings/labels. |
| apps/extension/src/ui/atoms/OperationalStatusBadge.svelte | Increased badge text size (text-micro → text-caption). |
| @@ -201,7 +201,7 @@ | |||
| placeholder="Précisions : rythme, remote, foursquare…" | |||
| class="resize-y rounded-lg border border-border-light bg-surface-white px-3 py-2 text-body-lg leading-relaxed text-text-primary placeholder:text-text-muted focus:border-blueprint-blue focus:outline-none focus:ring-2 focus:ring-blueprint-blue/20" | |||
| <section class="section-card rounded-xl p-3"> | ||
| <div class="flex items-center justify-between px-2 pb-2"> | ||
| <h3 class="text-body-lg font-medium text-text-primary">Missions</h3> | ||
| <span class="text-meta text-text-muted">{trackedMissions.length} suivies</span> |
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
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
The Suivi (Applications) tab had several UI defects at the ~400px side-panel width: cramped vertical rhythm between sections, sub-WCAG body text contrast (
text-text-mutedat ~2.8:1), and undersized typography (text-micro= 10px) used widely for labels and hints. This pass tightens the visual hierarchy so the tab reads cleanly in the constrained side-panel surface.This is a CSS-class-only change across 7 Svelte components in the Suivi flow:
text-text-muted->text-text-subtle(#a6a09b -> #57534d, ~2.8:1 -> ~7.3:1 on white), bringing body/label text to WCAG AA.text-micro->text-caption(10px -> 11px) on eyebrows, badges, labels, and hints throughout the flow.ApplicationsPagefor a consistent ~20px section cadence (e.g.mt-4->mt-5,py-4->py-5on the Pipeline section).border->bg-blueprint-blue/5) per the no-nested-cards rule.max-h-[32rem]on the missions column now only applies atlg:so the panel scrolls naturally on narrow widths.Several of the touched components (
ApplicationPipelineSummary,OperationalStoryCard,OperationalEmptyState,OperationalStatusBadge) are shared across Feed, Profile, Settings, and TJM, so the contrast and size corrections benefit those pages uniformly.Verification
pnpm format:checkpnpm lintpnpm typecheckpnpm test— 26 failures, all pre-existing and unrelated. They live intests/unit/scripts/{canonical-artifact,mv3-artifact,package-sealed-dist,verify-release-artifact}.test.tsand fail with "Descriptor scanner interpreter is not an attested native binary", an environment condition. Reproduced identically ondevelop(the base branch) before this change. This commit only touches.sveltemarkup/class attributes.pnpm buildVisually verified at 400px side-panel width (list-only and mission-selected/CopilotPanel states): 0 horizontal overflow, 0 text nodes below 11px, 0 muted-gray text nodes, consistent 20px section rhythm.
Checklist
core/orshell/changes)