fix(home): prevent bento grid overflow on narrow viewports
All checks were successful
Deploy / deploy (push) Successful in 2m40s
All checks were successful
Deploy / deploy (push) Successful in 2m40s
CSS grid items default min-width to min-content; the tram widget 3-col subgrid plus its баbadges and long затем text forced its cell wider than 1.1fr, collapsing the outer layout on tablet. Fixes: - outer bento row → gridTemplateColumns: minmax(0, 1fr) minmax(0, 1.1fr) - events+notes row same treatment - TransportWidget inner subgrids: 58px → 52px badge, 1fr → minmax(0, 1fr) - Cell: minWidth: 0, overflow: hidden, затем text trimmed with ellipsis and short м suffix (5м instead of 5 мин) - big number 32→28px, badge 22→20px to fit in denser columns
This commit is contained in:
@@ -45,18 +45,18 @@ function Cell({ arrivals, color }: { arrivals: Arrival[]; color: string }) {
|
||||
const imminent = first.minutes <= 2
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', gap: 12,
|
||||
padding: '10px 14px', borderRadius: 12,
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
padding: '10px 12px', borderRadius: 12,
|
||||
background: imminent ? `color-mix(in srgb, ${color} 10%, var(--surface-2))` : 'var(--surface-2)',
|
||||
border: `1px solid ${imminent ? color : 'var(--border-subtle)'}`,
|
||||
minHeight: 56,
|
||||
minHeight: 56, minWidth: 0, overflow: 'hidden',
|
||||
transition: 'all 0.3s ease',
|
||||
}}>
|
||||
{/* Primary time — big */}
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 4, flexShrink: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'baseline', gap: 3, flexShrink: 0 }}>
|
||||
<div style={{
|
||||
fontSize: first.minutes <= 0 ? 18 : 32,
|
||||
fontWeight: 800, letterSpacing: '-1.5px', lineHeight: 1,
|
||||
fontSize: first.minutes <= 0 ? 16 : 28,
|
||||
fontWeight: 800, letterSpacing: '-1px', lineHeight: 1,
|
||||
color: imminent ? color : 'var(--text-primary)',
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
}}>
|
||||
@@ -78,10 +78,11 @@ function Cell({ arrivals, color }: { arrivals: Arrival[]; color: string }) {
|
||||
затем
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 13, color: 'var(--text-secondary)', fontWeight: 600,
|
||||
fontSize: 12, color: 'var(--text-secondary)', fontWeight: 600,
|
||||
fontVariantNumeric: 'tabular-nums',
|
||||
overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{rest.map(r => r.minutes <= 0 ? 'сейчас' : `${r.minutes} мин`).join(' · ')}
|
||||
{rest.map(r => r.minutes <= 0 ? 'сейчас' : `${r.minutes}м`).join(' · ')}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@@ -123,7 +124,7 @@ export default function TransportWidget() {
|
||||
<div className="card-hero" style={{
|
||||
padding: '18px 20px',
|
||||
display: 'flex', flexDirection: 'column', gap: 14,
|
||||
height: '100%',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
@@ -155,7 +156,7 @@ export default function TransportWidget() {
|
||||
{/* Column headers */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '58px 1fr 1fr',
|
||||
gridTemplateColumns: '52px minmax(0, 1fr) minmax(0, 1fr)',
|
||||
gap: 10,
|
||||
paddingBottom: 6,
|
||||
borderBottom: '1px solid var(--hairline)',
|
||||
@@ -181,17 +182,18 @@ export default function TransportWidget() {
|
||||
{ROUTES.map(route => (
|
||||
<div key={route.num} style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '58px 1fr 1fr',
|
||||
gridTemplateColumns: '52px minmax(0, 1fr) minmax(0, 1fr)',
|
||||
gap: 10,
|
||||
alignItems: 'stretch',
|
||||
minWidth: 0,
|
||||
}}>
|
||||
<div style={{
|
||||
background: route.bg,
|
||||
boxShadow: `0 6px 16px -4px ${route.color}55`,
|
||||
borderRadius: 13,
|
||||
borderRadius: 12,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'white', fontWeight: 800, fontSize: 22,
|
||||
letterSpacing: '-1.5px',
|
||||
color: 'white', fontWeight: 800, fontSize: 20,
|
||||
letterSpacing: '-1px',
|
||||
minHeight: 56,
|
||||
}}>
|
||||
{route.num}
|
||||
|
||||
Reference in New Issue
Block a user