Le
7ed53050b7
index.css had a hand-written reset (`*, *::before, *::after { margin: 0;
padding: 0; box-sizing: border-box; }`) left over from before Tailwind was
added, sitting outside any `@layer` block. Per the CSS Cascade Layers spec,
unlayered rules always beat layered rules regardless of selector
specificity — since every Tailwind utility class lives inside `@layer
utilities`, this one `*`-selector rule was silently overriding every
single margin/padding utility (p-*, m-*, mx-auto, etc.) across the entire
app. Other properties (colors, borders, gap) weren't affected, which is
why this went unnoticed through the whole Tailwind migration — only
spacing/centering was silently broken, not colors or general layout.
Tailwind's own preflight (already loaded via `@import "tailwindcss"`,
correctly placed inside `@layer base`) provides the identical reset, so
the duplicate unlayered copy was simply deleted.
Also fixed two smaller, related issues found while investigating: an
inline `style={{ maxWidth: '100vw' }}` on Login/Register's auth-card
overrode its CSS class's `max-width: 400px`, stretching it to near full
viewport width on screens wider than ~400px (invisible on mobile, obvious
on laptop/desktop — probably what originally looked like "responsive
wasn't fixed"). And BacktestPage.tsx, unlike every other page, rendered
its `mx-auto`-centered container as a direct child of #root (which has
`display: flex; flex-direction: column`), so flexbox's default
align-items: stretch overrode the centering; wrapped it in the same
min-h-screen container pattern every other page already uses.
Verified via direct getComputedStyle()/getBoundingClientRect() measurement
(screenshots in this environment don't reliably reflect true layout) —
margin-inline resolved to 0px before the fix, 183px (correctly centered)
after. Frontend build clean, 170 backend tests unaffected (CSS-only change).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>