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