From f6b51ae7d4d674f876f3326dbd96fe66dcabe7ec Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Wed, 25 Mar 2026 21:25:20 +1100
Subject: [PATCH] Fix AddOnOption alignment + quieten "View more" link
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Centre-align heading row so switch aligns with short headings (Flowers edge case)
- Remove margin between heading and price — tucks directly underneath
- "View more" link: caption size + text.secondary colour + weight 400 (both components)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/molecules/AddOnOption/AddOnOption.tsx  | 11 +++++------
 .../molecules/ServiceOption/ServiceOption.tsx         |  4 ++--
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/molecules/AddOnOption/AddOnOption.tsx b/src/components/molecules/AddOnOption/AddOnOption.tsx
index ffbbc07..0d28088 100644
--- a/src/components/molecules/AddOnOption/AddOnOption.tsx
+++ b/src/components/molecules/AddOnOption/AddOnOption.tsx
@@ -99,11 +99,11 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
           ...(Array.isArray(sx) ? sx : [sx]),
         ]}
       >
-        {/* Top row: name + switch pinned top-right */}
+        {/* Top row: name + switch */}
         <Box
           sx={{
             display: 'flex',
-            alignItems: 'flex-start',
+            alignItems: 'center',
             justifyContent: 'space-between',
             gap: 2,
           }}
@@ -127,12 +127,11 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
           />
         </Box>
 
-        {/* Price — own row below heading */}
+        {/* Price — tucks directly under heading */}
         {price != null && (
           <Typography
             variant="body2"
             color="text.secondary"
-            sx={{ mt: 0.5 }}
           >
             ${price.toLocaleString('en-AU')}
           </Typography>
@@ -160,12 +159,12 @@ export const AddOnOption = React.forwardRef<HTMLDivElement, AddOnOptionProps>(
             {maxDescriptionLines && isClamped && (
               <Link
                 component="button"
-                variant="body2"
+                variant="caption"
                 onClick={(e: React.MouseEvent) => {
                   e.stopPropagation();
                   setExpanded((prev) => !prev);
                 }}
-                sx={{ mt: 0.5, fontSize: 'inherit' }}
+                sx={{ mt: 0.5, color: 'text.secondary', fontWeight: 400 }}
               >
                 {expanded ? 'View less' : 'View more'}
               </Link>
diff --git a/src/components/molecules/ServiceOption/ServiceOption.tsx b/src/components/molecules/ServiceOption/ServiceOption.tsx
index bb206d4..3bce4a8 100644
--- a/src/components/molecules/ServiceOption/ServiceOption.tsx
+++ b/src/components/molecules/ServiceOption/ServiceOption.tsx
@@ -136,12 +136,12 @@ export const ServiceOption = React.forwardRef<HTMLDivElement, ServiceOptionProps
             {maxDescriptionLines && isClamped && (
               <Link
                 component="button"
-                variant="body2"
+                variant="caption"
                 onClick={(e: React.MouseEvent) => {
                   e.stopPropagation();
                   setExpanded((prev) => !prev);
                 }}
-                sx={{ mt: 0.5, fontSize: 'inherit' }}
+                sx={{ mt: 0.5, color: 'text.secondary', fontWeight: 400 }}
               >
                 {expanded ? 'View less' : 'View more'}
               </Link>