From d29deedc90dfd5df10502799be4853d6e10e4567 Mon Sep 17 00:00:00 2001
From: Cosmo <cosmo@digital-home.site>
Date: Wed, 22 Apr 2026 19:30:03 +0000
Subject: [PATCH] fix: upcoming panel as slide-out overlay to prevent layout
 overflow on tablets

---
 components/CalendarTab.tsx | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/components/CalendarTab.tsx b/components/CalendarTab.tsx
index 8f809b7..52d7fcb 100644
--- a/components/CalendarTab.tsx
+++ b/components/CalendarTab.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useState, useEffect, useMemo } from 'react'
-import { ChevronLeft, ChevronRight, Plus, X, Clock, MapPin, Trash2, Eye, EyeOff, CalendarDays, User, AlignLeft } from 'lucide-react'
+import { ChevronLeft, ChevronRight, Plus, X, Clock, MapPin, Trash2, Eye, EyeOff, CalendarDays, User, AlignLeft, List } from 'lucide-react'
 
 interface CalendarEvent {
   id: string
@@ -350,6 +350,7 @@ export default function CalendarTab() {
   const [addDate, setAddDate] = useState<string>('')
   const [hiddenOwners, setHiddenOwners] = useState<Set<string>>(new Set())
   const [dayPopover, setDayPopover] = useState<{ day: number; events: CalendarEvent[] } | null>(null)
+  const [showUpcoming, setShowUpcoming] = useState(false)
 
   useEffect(() => {
     setLoading(true)
@@ -431,7 +432,7 @@ export default function CalendarTab() {
   }
 
   return (
-    <div style={{ flex: 1, display: 'flex', overflow: 'hidden', padding: '16px 24px 24px', gap: 20 }}>
+    <div style={{ flex: 1, display: 'flex', overflow: 'hidden', padding: '16px 24px 24px', position: 'relative' }}>
       {/* Main calendar grid */}
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
         {/* Header */}
@@ -469,6 +470,16 @@ export default function CalendarTab() {
                 </button>
               )
             })}
+            <button onClick={() => setShowUpcoming(v => !v)} style={{
+              width: 36, height: 36, borderRadius: 12,
+              background: showUpcoming ? 'rgba(99,102,241,0.15)' : 'rgba(255,255,255,0.04)',
+              border: showUpcoming ? '1px solid rgba(129,140,248,0.25)' : '1px solid rgba(255,255,255,0.06)',
+              color: showUpcoming ? '#a5b4fc' : 'var(--text-secondary)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              transition: 'all 0.25s ease',
+            }}>
+              <List size={16} />
+            </button>
             <button onClick={() => { setAddDate(today.toISOString().split('T')[0]); setShowAddModal(true) }} style={{
               display: 'flex', alignItems: 'center', gap: 6,
               padding: '8px 18px', borderRadius: 14,
@@ -556,11 +567,19 @@ export default function CalendarTab() {
         </div>
       </div>
 
-      {/* Right panel */}
+      {/* Right panel — overlay */}
+      {showUpcoming && <div style={{ position: 'fixed', inset: 0, zIndex: 90 }} onClick={() => setShowUpcoming(false)} />}
       <div style={{
-        width: 230, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 10,
-        overflowY: 'auto', background: 'rgba(255,255,255,0.02)', borderRadius: 22,
-        padding: '20px 16px', border: '1px solid rgba(255,255,255,0.04)',
+        position: 'absolute', top: 16, right: 24, bottom: 24,
+        width: 240, display: 'flex', flexDirection: 'column', gap: 10,
+        overflowY: 'auto',
+        background: 'rgba(18,18,35,0.95)', backdropFilter: 'blur(30px)', WebkitBackdropFilter: 'blur(30px)',
+        borderRadius: 22, padding: '20px 16px',
+        border: '1px solid rgba(255,255,255,0.08)',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.4)',
+        transform: showUpcoming ? 'translateX(0)' : 'translateX(calc(100% + 24px))',
+        transition: 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        zIndex: 95, pointerEvents: showUpcoming ? 'auto' : 'none',
       }}>
         <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-secondary)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 4 }}>Ближайшие</div>
         {upcoming.length === 0 && !loading && (