diff --git a/src/components/calendar/BookingCalendar.tsx b/src/components/calendar/BookingCalendar.tsx index 095c8d5..1c8b9e4 100644 --- a/src/components/calendar/BookingCalendar.tsx +++ b/src/components/calendar/BookingCalendar.tsx @@ -98,6 +98,15 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook ) const rowHeight = compact ? ROW_HEIGHT_COMPACT : ROW_HEIGHT + // Mobile detection + const [isMobile, setIsMobile] = useState(() => window.innerWidth < 640) + useEffect(() => { + const h = () => setIsMobile(window.innerWidth < 640) + window.addEventListener('resize', h) + return () => window.removeEventListener('resize', h) + }, []) + const labelWidth = isMobile ? 80 : LABEL_WIDTH + // Modals const [bookingModalDraft, setBookingModalDraft] = useState(null) const [selectedBooking, setSelectedBooking] = useState(null) @@ -264,9 +273,22 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook - - {format(startDate, 'LLLL yyyy', { locale: ru })} - +
+ + {format(startDate, 'LLLL yyyy', { locale: ru })} + + {/* Mobile-only + button next to month name */} + +
@@ -298,7 +320,7 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook onClick={() => setCompact(v => { const next = !v; localStorage.setItem('calendarCompact', String(next)); return next })} title={compact ? 'Обычный вид' : 'Компактный вид'} className={cn( - 'btn-ghost flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium', + 'hidden sm:flex btn-ghost items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium', compact && 'bg-brand-50 dark:bg-brand-900/20 text-brand-600 dark:text-brand-400', )} > @@ -312,7 +334,7 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook const tomorrow = format(addDays(new Date(), 1), 'yyyy-MM-dd') setBookingModalDraft({ roomId: rooms[0]?.id ?? '', checkIn: today, checkOut: tomorrow }) }} - className="btn-primary" + className="hidden sm:inline-flex btn-primary" > Новое бронирование @@ -321,7 +343,7 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook {/* Grid */}
-
+
{/* Date header row */}
Номер
@@ -379,10 +401,10 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook style={{ height: 28 }} >
- c.startsWith('text-')).join(' '))}> + c.startsWith('text-')).join(' '))}> {room.type}
@@ -407,21 +429,21 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook > {/* Room label */}
{room.number} - {room.name && {room.name}} + {room.name && !isMobile && {room.name}}
- {!compact && ( + {!compact && !isMobile && ( {room.type} )}
- {!compact && ( + {!compact && !isMobile && (
{room.baseRate.toLocaleString('ru-RU')} ₽
@@ -612,7 +634,7 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook style={{ height: 32 }}>
Аренда объектов @@ -635,7 +657,7 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook {/* Label */}
{obj.icon}