From 4404de59081242f198c79989f6e25da36c114243 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Thu, 23 Apr 2026 11:11:37 +1000
Subject: [PATCH] MapProviderDrawer: fix verified-icon alignment + header
 padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cluster rows: mirror desktop ClusterPopup's alignment recipe — add
  justifyContent: 'center' on the verified-icon slot and an explicit
  lineHeight: 1.25 on the name Typography. Before: the slot's 1.25em
  computed off the inherited 16px while the body2 name computed off
  14px, producing a ~2.5px mismatch that put the tick slightly above
  the name's top line. Now the slot's vertical centre matches the
  name's line-box.
- Drawer header padding: px 1.5 → 2 so the "N providers in this area"
  heading aligns horizontally with the row content beneath it
  (rows use px: 2). Previously the heading sat slightly further left.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../MapProviderDrawer/MapProviderDrawer.tsx        | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/molecules/MapProviderDrawer/MapProviderDrawer.tsx b/src/components/molecules/MapProviderDrawer/MapProviderDrawer.tsx
index 82aa174..ecc7b4d 100644
--- a/src/components/molecules/MapProviderDrawer/MapProviderDrawer.tsx
+++ b/src/components/molecules/MapProviderDrawer/MapProviderDrawer.tsx
@@ -57,15 +57,16 @@ const ClusterRow: React.FC<{
       '&:hover': { bgcolor: 'var(--fa-color-surface-subtle)' },
     }}
   >
-    {/* Verified-icon slot — height tuned to the name's line-box so the
-        tick aligns with the title top, empty slot keeps other names
-        left-aligned on the same x-origin. */}
+    {/* Verified-icon slot — reserved width + fixed line-height so the icon
+        sits on the name's line-box regardless of location/rating meta
+        below. Mirrors desktop ClusterPopup's treatment (D043 refinement). */}
     <Box
       sx={{
         width: 18,
         height: '1.25em',
         display: 'flex',
         alignItems: 'center',
+        justifyContent: 'center',
         flexShrink: 0,
       }}
     >
@@ -78,6 +79,7 @@ const ClusterRow: React.FC<{
         sx={{
           fontWeight: 600,
           color: p.verified ? 'primary.main' : 'text.primary',
+          lineHeight: 1.25,
           mb: 0.25,
         }}
       >
@@ -182,13 +184,15 @@ export const MapProviderDrawer = React.forwardRef<HTMLDivElement, MapProviderDra
         ]}
       >
         {/* Header strip — holds the close X (and the cluster count when
-            applicable) so neither sits over the card image below. */}
+            applicable) so neither sits over the card image below.
+            Horizontal padding matches the cluster rows (px: 2) so the
+            heading aligns with the row content beneath. */}
         <Box
           sx={{
             display: 'flex',
             alignItems: 'center',
             minHeight: 40,
-            px: 1.5,
+            px: 2,
             py: 0.5,
             gap: 1,
           }}