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)' }, '&:hover': { bgcolor: 'var(--fa-color-surface-subtle)' },
}} }}
> >
{/* Verified-icon slot — height tuned to the name's line-box so the {/* Verified-icon slot — reserved width + fixed line-height so the icon
tick aligns with the title top, empty slot keeps other names sits on the name's line-box regardless of location/rating meta
left-aligned on the same x-origin. */} below. Mirrors desktop ClusterPopup's treatment (D043 refinement). */}
<Box <Box
sx={{ sx={{
width: 18, width: 18,
height: '1.25em', height: '1.25em',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center',
flexShrink: 0, flexShrink: 0,
}} }}
> >
@@ -78,6 +79,7 @@ const ClusterRow: React.FC<{
sx={{ sx={{
fontWeight: 600, fontWeight: 600,
color: p.verified ? 'primary.main' : 'text.primary', color: p.verified ? 'primary.main' : 'text.primary',
lineHeight: 1.25,
mb: 0.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 {/* 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 <Box
sx={{ sx={{
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
minHeight: 40, minHeight: 40,
px: 1.5, px: 2,
py: 0.5, py: 0.5,
gap: 1, gap: 1,
}} }}