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:
@@ -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,
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user