fix(home): prevent bento grid overflow on narrow viewports
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:
Cosmo
2026-04-23 08:46:00 +00:00
parent e967924f1f
commit 0908ad93de
2 changed files with 18 additions and 16 deletions

View File

@@ -419,7 +419,7 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
display: 'flex', flexDirection: 'column', gap: 14,
}}>
{/* ───── Bento row: Hero weather + Tram ───── */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 14, minHeight: 230 }}>
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 14, alignItems: 'stretch' }}>
{/* Hero weather card */}
{weather ? (
@@ -554,7 +554,7 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
)}
{/* ───── Events + Notes row ───── */}
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
<div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 14 }}>
{/* Events — today + tomorrow in one card */}
<div className="card" style={{ padding: '18px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>