From 61db867e8289ed605d782f3464ccb97d1bc5e7fe Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Thu, 23 Apr 2026 14:07:45 +1000
Subject: [PATCH] PackageDetail: keep CTAs side-by-side on mobile, size medium
 on xs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Make Arrangement + Compare buttons stacked vertically on xs because
flexDirection was responsive. At size="large" (48px) the labels didn't
fit a ~360px mobile column side-by-side, which forced the stack. Drop
to size="medium" (40px) on xs and keep flexDirection fixed to row — the
two CTAs now sit beside each other on every viewport.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../organisms/PackageDetail/PackageDetail.tsx   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/organisms/PackageDetail/PackageDetail.tsx b/src/components/organisms/PackageDetail/PackageDetail.tsx
index 03c499d..e3d2d11 100644
--- a/src/components/organisms/PackageDetail/PackageDetail.tsx
+++ b/src/components/organisms/PackageDetail/PackageDetail.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import Box from '@mui/material/Box';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import type { SxProps, Theme } from '@mui/material/styles';
@@ -140,6 +142,11 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
     },
     ref,
   ) => {
+    // CTA buttons stay side-by-side on all viewports; size down on xs so
+    // "Make Arrangement" + "Compare" fit a ~360px mobile column without wrap.
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+    const ctaSize = isMobile ? 'medium' : 'large';
     return (
       <Box
         ref={ref}
@@ -206,13 +213,11 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
             </Box>
           )}
 
-          {/* CTA buttons */}
-          <Box
-            sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 1.5, mt: 2.5 }}
-          >
+          {/* CTA buttons — always side-by-side */}
+          <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1.5, mt: 2.5 }}>
             <Button
               variant="contained"
-              size="large"
+              size={ctaSize}
               fullWidth
               disabled={arrangeDisabled}
               onClick={onArrange}
@@ -227,7 +232,7 @@ export const PackageDetail = React.forwardRef<HTMLDivElement, PackageDetailProps
               <Button
                 variant="soft"
                 color="secondary"
-                size="large"
+                size={ctaSize}
                 loading={compareLoading}
                 endIcon={inCart ? <CheckRoundedIcon /> : undefined}
                 onClick={onCompare}