MapProviderDrawer: fix verified-icon alignment + header padding

- 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>
This commit is contained in:
2026-04-23 11:11:37 +10:00
parent 01751f5886
commit 4404de5908

View File

@@ -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,
}}