richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CompareBar: bump bottom offset to clear HelpBar properly

Browse Source 
Previous offset used theme.spacing(9) assuming 8px MUI default base —
but the FA theme uses a 4px base, so spacing(9) was only 36px and
the pill still sat 3px below the ~40px HelpBar. Bumped to spacing(16)
(64px) for a clean 25px gap above HelpBar on both mobile and desktop.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-04-23 11:46:27 +10:00
parent 4de8a916af
commit c1a3b30e91
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/molecules/CompareBar/CompareBar.tsx
View File

@@ -62,9 +62,10 @@ export const CompareBar = React.forwardRef<HTMLDivElement, CompareBarProps>(
sx={[ sx={[
(theme: Theme) => ({ (theme: Theme) => ({
position: 'fixed', position: 'fixed',
// Clear the sticky HelpBar (~56px + 16px breathing) so the // Clear the sticky HelpBar (~40px tall) with ~25px of
// pill doesn't overlap it. // breathing space. FA theme.spacing uses a 4px base, so
bottom: theme.spacing(9), // spacing(16) = 64px.
bottom: theme.spacing(16),
// Centre via auto-margin rather than `left:50%; translateX(-50%)` // Centre via auto-margin rather than `left:50%; translateX(-50%)`
// — Slide (the wrapper) animates via transform, which would // — Slide (the wrapper) animates via transform, which would
// otherwise clobber the centering transform. // otherwise clobber the centering transform.