PackageDetail: keep CTAs side-by-side on mobile, size medium on xs

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>

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 */}
+          {/* CTA buttons — always side-by-side */}
-          <Box
+          <Box sx={{ display: 'flex', flexDirection: 'row', gap: 1.5, mt: 2.5 }}>
-            sx={{ display: 'flex', flexDirection: { xs: 'column', sm: '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}