mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
zeekayandHanzo Dev
6d805a016a
Three write-once-deploy-4 root causes from the 4-res audit:
1. Horizontal overflow (454px @1280, 38px @1920). The shared layout
Container forced 'min-w-[100vw] lg:min-w-[fit-content]', promoting the
whole page to its ~1734px max-content width so stat/block cards clipped
past the viewport. Make it a fluid column ('w-full min-w-0') and add
'min-w-0' to MainColumn so the flex chain shrinks and inner
overflow-x-auto regions scroll internally -> document.scrollWidth ==
innerWidth at every breakpoint.
2. White-on-white values (block Reward / tx Value / tx Fee /
network-utilization%). These passed legacy Chakra dot-tokens
('text.secondary', 'green.600'...) straight into an inline CSS 'color',
which browsers drop as invalid -> the text inherited white. Add one
resolveColorToken() helper (dot-token -> var(--color-*)), apply it in
SimpleValue (the value chokepoint for Reward/Value/Fee), and point
getNetworkUtilizationParams at real theme vars (bright badge fg shades,
all >=4.5:1 on the light card bg).
3. Broken 'Menu' button: the wallet/settings button stacked a 20px icon
over its label in a bare div inside a 32px overflow-hidden button (the
'51px in 32px' clip that read as a stray hamburger at lg+). Lay the
icon+label out horizontally (flex items-center gap-2, sized icon).
Co-authored-by: Hanzo Dev <[email protected]>
17 lines
665 B
TypeScript
17 lines
665 B
TypeScript
// Resolve a legacy Chakra dot-notation color token (e.g. "text.secondary",
|
|
// "green.600") to the CSS custom property the theme actually defines, so it
|
|
// renders as a real color instead of an invalid `color: text.secondary` that
|
|
// the browser drops (which made values inherit white-on-white).
|
|
//
|
|
// Anything already valid CSS is passed through untouched: var(...), #hex,
|
|
// rgb(...)/hsl(...), a named color, or any bare word with no dot.
|
|
export function resolveColorToken(color?: string): string | undefined {
|
|
if (!color) {
|
|
return undefined;
|
|
}
|
|
if (!color.includes('.')) {
|
|
return color;
|
|
}
|
|
return `var(--color-${ color.replace(/\./g, '-') })`;
|
|
}
|