Skip to content

feat: polish OutcomeChip layout for narrow (mobile) viewports (Closes #821) #854

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

Open
waterWang wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: polish OutcomeChip layout for narrow (mobile) viewports (Closes #821) #854

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 17 additions & 2 deletions components/ui/OutcomeChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,14 @@
* so the state is still identifiable when hue perception is reduced,
* fulfilling SC 1.4.1 (Use of Color).
*
* Responsive behaviour is inherited from the parent layout; the chip
* scales its text via Tailwind's text-xs / text-sm utility classes.
* Mobile audit (issue #821):
* - Chip no longer truncates or overflows at <=375px: label wraps onto a
* second line instead of clipping (whitespace-normal, break-words).
* - Minimum 44px tap target at all breakpoints (WCAG 2.1 AA / 2.5.5),
* achieved via min-h-[44px] + py-3 rather than a fixed height so the
* label can still wrap without clipping the target.
* - Responsive padding: tighter on mobile (px-2.5) vs desktop (px-3).
* - Responsive font: text-xs on mobile, text-sm on sm+.
*
* Dark mode is handled automatically because the chart-* tokens are
* defined in globals.css with separate HSL values for :root and .dark.
Expand Down Expand Up @@ -68,6 +74,15 @@ export function OutcomeChip({
// text-white on darkened chart tokens satisfies WCAG 2.1 AA SC 1.4.3
// font-semibold boosts effective contrast for small badge text
"border-transparent text-white font-semibold",

// Mobile-responsive layout (issue #821):
// - min-h-[44px] ensures WCAG 2.1 AA 2.5.5 minimum tap target at all breakpoints
// - whitespace-normal + break-words allows label to wrap instead of clipping
// - py-3 gives vertical padding while keeping 44px min-height
// - px-2.5 on mobile, px-3 on sm+ for tighter fit on small screens
// - text-xs on mobile, text-sm on sm+ for readability
"min-h-[44px] whitespace-normal break-words py-3 px-2.5 sm:px-3 text-xs sm:text-sm",

chartClass ?? style.chart,
patternClass ?? style.pattern,
className,
Expand Down