daniil/smart-home-tablet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(home): prevent bento grid overflow on narrow viewports
All checks were successful
Deploy / deploy (push) Successful in 2m40s
Details

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
app/page.tsx
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 }}>

30
components/TransportWidget.tsx
View File

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