From a7611b46c42ea9b4ebc57f0bed57c5b2d88ec736 Mon Sep 17 00:00:00 2001
From: Cosmo <cosmo@digital-home.site>
Date: Wed, 22 Apr 2026 20:19:04 +0000
Subject: [PATCH] fix: date input overflow, 7-day forecast on Home, screensaver
 button in settings

---
 app/page.tsx               | 22 +++++++++++++++++++++-
 components/CalendarTab.tsx | 18 +++++++++---------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 5ab0ecb..67ffc0a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -334,7 +334,7 @@ function HomeTab({ weather, sensors }: { weather: WeatherData | null; sensors: S
             </div>
             {weather.forecast && weather.forecast.length > 0 && (
               <div style={{ display: 'flex', gap: 8 }}>
-                {weather.forecast.slice(0, 3).map(day => {
+                {weather.forecast.map(day => {
                   const d = new Date(day.date)
                   return (
                     <div key={day.date} style={{ flex: 1, background: 'rgba(255,255,255,0.04)', borderRadius: 14, padding: '10px 8px', textAlign: 'center', border: '1px solid rgba(255,255,255,0.04)' }}>
@@ -549,6 +549,19 @@ function SettingsTab({ city, onCityChange, onLogout, theme, onThemeChange }: { c
         )}
       </div>
 
+      {/* Lock screen */}
+      <button onClick={() => { const e = new CustomEvent('activate-screensaver'); window.dispatchEvent(e) }} style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
+        padding: '16px', borderRadius: 18,
+        background: 'rgba(99,102,241,0.08)',
+        border: '1px solid rgba(129,140,248,0.15)',
+        color: '#a5b4fc', fontSize: 15, fontWeight: 600,
+        transition: 'all 0.25s ease',
+      }}>
+        <Lock size={18} />
+        Режим часов
+      </button>
+
       {/* Logout */}
       <button onClick={onLogout} style={{
         display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
@@ -650,6 +663,13 @@ function HomePageInner() {
     return () => clearInterval(t)
   }, [loadHA, unlocked])
 
+  // Listen for manual screensaver activation
+  useEffect(() => {
+    const handler = () => setScreensaverActive(true)
+    window.addEventListener('activate-screensaver', handler)
+    return () => window.removeEventListener('activate-screensaver', handler)
+  }, [])
+
   // Screensaver idle detection
   const resetIdle = useCallback(() => {
     if (screensaverActive) { setScreensaverActive(false); return }
diff --git a/components/CalendarTab.tsx b/components/CalendarTab.tsx
index 5c024a9..a8039d6 100644
--- a/components/CalendarTab.tsx
+++ b/components/CalendarTab.tsx
@@ -66,13 +66,13 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
       <div style={{
         background: 'rgba(16,16,30,0.97)', backdropFilter: 'blur(40px)',
         border: '1px solid rgba(255,255,255,0.07)', borderRadius: 28,
-        width: 420, maxWidth: '95vw', overflow: 'hidden',
+        width: 400, maxWidth: '90vw', overflow: 'hidden',
         boxShadow: '0 30px 90px rgba(0,0,0,0.6)',
       }} onClick={e => e.stopPropagation()}>
 
         {/* Header */}
         <div style={{
-          padding: '24px 28px 20px',
+          padding: '22px 24px 18px',
           borderBottom: '1px solid rgba(255,255,255,0.05)',
           display: 'flex', justifyContent: 'space-between', alignItems: 'center',
         }}>
@@ -90,7 +90,7 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
         </div>
 
         {/* Body */}
-        <div style={{ padding: '20px 28px 28px' }}>
+        <div style={{ padding: '20px 24px 24px' }}>
 
           {/* Calendar selector */}
           <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
@@ -125,7 +125,7 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
             placeholder="Название события"
             autoFocus
             style={{
-              width: '100%', padding: '15px 18px', borderRadius: 14,
+              width: '100%', padding: '15px 18px', borderRadius: 14, boxSizing: 'border-box' as any,
               background: 'rgba(255,255,255,0.04)',
               border: '1px solid rgba(255,255,255,0.07)',
               color: 'var(--text-primary)', fontSize: 16, fontWeight: 500,
@@ -144,7 +144,7 @@ function AddEventModal({ defaultDate, onClose, onSaved }: { defaultDate: string;
             <input
               type="date" value={date} onChange={e => setDate(e.target.value)}
               style={{
-                width: '100%', padding: '14px 18px', borderRadius: 14,
+                width: '100%', padding: '14px 18px', borderRadius: 14, boxSizing: 'border-box' as any,
                 background: 'rgba(255,255,255,0.04)',
                 border: '1px solid rgba(255,255,255,0.07)',
                 color: 'var(--text-primary)', fontSize: 15,
@@ -305,7 +305,7 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
       <div style={{
         background: 'rgba(16,16,30,0.97)', backdropFilter: 'blur(40px)',
         border: '1px solid rgba(255,255,255,0.07)', borderRadius: 28,
-        width: 480, maxWidth: '95vw', overflow: 'hidden',
+        width: 440, maxWidth: '90vw', overflow: 'hidden',
         boxShadow: '0 30px 90px rgba(0,0,0,0.6)',
       }} onClick={e => e.stopPropagation()}>
 
@@ -313,7 +313,7 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
         <div style={{
           background: `linear-gradient(135deg, ${event.color}20, ${event.color}08)`,
           borderBottom: `1px solid ${event.color}15`,
-          padding: '24px 28px 20px',
+          padding: '22px 24px 18px',
         }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
             <div style={{ flex: 1, minWidth: 0 }}>
@@ -361,7 +361,7 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
         </div>
 
         {/* Content */}
-        <div style={{ padding: '20px 28px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
+        <div style={{ padding: '20px 24px 22px', display: 'flex', flexDirection: 'column', gap: 14 }}>
 
           {editing ? (
             <>
@@ -369,7 +369,7 @@ function EventDetailModal({ event, onClose, onDelete, onUpdate }: {
               <div>
                 <div style={{ fontSize: 11, color: 'var(--text-secondary)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Дата</div>
                 <input type="date" value={editDate} onChange={e => setEditDate(e.target.value)} style={{
-                  width: '100%', padding: '12px 16px', borderRadius: 12,
+                  width: '100%', padding: '12px 16px', borderRadius: 12, boxSizing: 'border-box' as any,
                   background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.07)',
                   color: 'var(--text-primary)', fontSize: 15, outline: 'none', fontFamily: 'inherit',
                 }} />