From 0908ad93de98e99ef2e49124b62cb1d413a2c6ee Mon Sep 17 00:00:00 2001
From: Cosmo <cosmo@digital-home.site>
Date: Thu, 23 Apr 2026 08:46:00 +0000
Subject: [PATCH] fix(home): prevent bento grid overflow on narrow viewports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 app/page.tsx                   |  4 ++--
 components/TransportWidget.tsx | 30 ++++++++++++++++--------------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 0fd6435..5718544 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -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 }}>
diff --git a/components/TransportWidget.tsx b/components/TransportWidget.tsx
index 5c746b8..f8e6a5c 100644
--- a/components/TransportWidget.tsx
+++ b/components/TransportWidget.tsx
@@ -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}