From c1a3b30e91a12f6afca15bc0b5ad0314fd756041 Mon Sep 17 00:00:00 2001 From: Richie Date: Thu, 23 Apr 2026 11:46:27 +1000 Subject: [PATCH] CompareBar: bump bottom offset to clear HelpBar properly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/components/molecules/CompareBar/CompareBar.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/molecules/CompareBar/CompareBar.tsx b/src/components/molecules/CompareBar/CompareBar.tsx index 1bcd6dc..ee00b29 100644 --- a/src/components/molecules/CompareBar/CompareBar.tsx +++ b/src/components/molecules/CompareBar/CompareBar.tsx @@ -62,9 +62,10 @@ export const CompareBar = React.forwardRef( 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.