From 15c3471e7ff1f0db4b8b43cbb7749be7284e03c7 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Mon, 16 Mar 2026 20:51:56 +0300
Subject: [PATCH] Fix mobile responsiveness across all pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BookingsPage: hide Номер/Выезд/Источник columns on small screens, show nights inline on mobile
- GuestsPage: stats grid 2→4 cols (grid-cols-2 lg:grid-cols-4), table columns hidden on mobile (md/lg breakpoints), GuestModal stats 2→4 cols on sm+
- BookingDetailPanel: full-width on mobile (w-full sm:w-[400px])
- Topbar: notifications panel full-width on mobile (w-[calc(100vw-1rem)] sm:w-96)
- LoyaltyPage, MaintenancePage, DiscountsPage, TariffsPage: stats grids grid-cols-2 lg:grid-cols-4

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../bookings/BookingDetailPanel.tsx           |  2 +-
 src/components/layout/Topbar.tsx              |  2 +-
 src/pages/BookingsPage.tsx                    | 13 +++++++---
 src/pages/DiscountsPage.tsx                   |  2 +-
 src/pages/GuestsPage.tsx                      | 26 +++++++++----------
 src/pages/LoyaltyPage.tsx                     |  2 +-
 src/pages/MaintenancePage.tsx                 |  2 +-
 src/pages/TariffsPage.tsx                     |  2 +-
 8 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/components/bookings/BookingDetailPanel.tsx b/src/components/bookings/BookingDetailPanel.tsx
index 9a6268c..cf7d72e 100644
--- a/src/components/bookings/BookingDetailPanel.tsx
+++ b/src/components/bookings/BookingDetailPanel.tsx
@@ -171,7 +171,7 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, onClose,
     <>
       <div className="fixed inset-0 z-40" onClick={onClose} />
 
-      <div className="fixed right-0 top-0 bottom-0 z-50 w-[400px] bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 shadow-2xl flex flex-col">
+      <div className="fixed right-0 top-0 bottom-0 z-50 w-full sm:w-[400px] bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 shadow-2xl flex flex-col">
 
         {/* Toast notification */}
         {toast && (
diff --git a/src/components/layout/Topbar.tsx b/src/components/layout/Topbar.tsx
index d803ceb..6916878 100644
--- a/src/components/layout/Topbar.tsx
+++ b/src/components/layout/Topbar.tsx
@@ -58,7 +58,7 @@ function NotificationsPanel({ onClose }: { onClose: () => void }) {
     : notifications
 
   return (
-    <div className="absolute right-0 top-full mt-2 w-96 max-w-[calc(100vw-1rem)] bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-2xl z-20 flex flex-col" style={{ maxHeight: 'calc(100vh - 80px)' }}>
+    <div className="absolute right-0 top-full mt-2 w-[calc(100vw-1rem)] sm:w-96 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-2xl shadow-2xl z-20 flex flex-col" style={{ maxHeight: 'calc(100vh - 80px)' }}>
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100 dark:border-slate-700 shrink-0">
         <div className="flex items-center gap-2">
diff --git a/src/pages/BookingsPage.tsx b/src/pages/BookingsPage.tsx
index 7cb43c0..8972277 100644
--- a/src/pages/BookingsPage.tsx
+++ b/src/pages/BookingsPage.tsx
@@ -187,7 +187,11 @@ export function BookingsPage() {
                   {COLUMNS.map(col => (
                     <th
                       key={col.label}
-                      className="text-left px-4 py-3 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide"
+                      className={cn(
+                        'text-left px-4 py-3 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide',
+                        (col.label === 'Выезд' || col.label === 'Источник') && 'hidden sm:table-cell',
+                        col.label === 'Номер' && 'hidden md:table-cell',
+                      )}
                     >
                       {col.key ? (
                         <button
@@ -221,7 +225,7 @@ export function BookingsPage() {
                         <p className="font-medium text-slate-900 dark:text-slate-100">{b.guestName}</p>
                         <p className="text-xs text-slate-500 dark:text-slate-400">{b.guestEmail}</p>
                       </td>
-                      <td className="px-4 py-3">
+                      <td className="px-4 py-3 hidden md:table-cell">
                         <p className="font-medium text-slate-900 dark:text-slate-100">
                           {r ? `№${r.number}` : '—'}
                         </p>
@@ -229,8 +233,9 @@ export function BookingsPage() {
                       </td>
                       <td className="px-4 py-3 text-slate-700 dark:text-slate-300">
                         {new Intl.DateTimeFormat('ru-RU', { day: 'numeric', month: 'short' }).format(new Date(b.checkIn))}
+                        <span className="ml-1 text-xs text-slate-400 sm:hidden">· {nights}н</span>
                       </td>
-                      <td className="px-4 py-3 text-slate-700 dark:text-slate-300">
+                      <td className="px-4 py-3 text-slate-700 dark:text-slate-300 hidden sm:table-cell">
                         <span>{new Intl.DateTimeFormat('ru-RU', { day: 'numeric', month: 'short' }).format(new Date(b.checkOut))}</span>
                         <span className="ml-1.5 text-xs text-slate-400">{nights}н</span>
                       </td>
@@ -239,7 +244,7 @@ export function BookingsPage() {
                           {BOOKING_STATUS_LABELS[b.status]}
                         </Badge>
                       </td>
-                      <td className="px-4 py-3">
+                      <td className="px-4 py-3 hidden sm:table-cell">
                         <Badge className={SOURCE_COLORS[b.source]}>
                           {SOURCE_LABELS[b.source]}
                         </Badge>
diff --git a/src/pages/DiscountsPage.tsx b/src/pages/DiscountsPage.tsx
index 5a33182..b85500a 100644
--- a/src/pages/DiscountsPage.tsx
+++ b/src/pages/DiscountsPage.tsx
@@ -301,7 +301,7 @@ export function DiscountsPage() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
         {[
           { label: 'Всего скидок',  value: discounts.length },
           { label: 'Активных',      value: discounts.filter(d => d.isActive).length },
diff --git a/src/pages/GuestsPage.tsx b/src/pages/GuestsPage.tsx
index f4e8833..c71eec1 100644
--- a/src/pages/GuestsPage.tsx
+++ b/src/pages/GuestsPage.tsx
@@ -250,7 +250,7 @@ function GuestModal({ guest, onClose }: { guest: Guest; onClose: () => void }) {
         </div>
 
         {/* Stats strip */}
-        <div className="grid grid-cols-4 divide-x divide-slate-200 dark:divide-slate-700 border-b border-slate-200 dark:border-slate-700">
+        <div className="grid grid-cols-2 sm:grid-cols-4 divide-x divide-slate-200 dark:divide-slate-700 border-b border-slate-200 dark:border-slate-700">
           {[
             { label: 'Визитов', value: guest.totalStays },
             { label: 'Потрачено', value: `${guest.totalSpent.toLocaleString('ru-RU')} ₽` },
@@ -588,14 +588,14 @@ export function GuestsPage() {
       {pageTab === 'list' && <>
 
       {/* Stats */}
-      <div className="grid grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
         {[
           { icon: Users,     label: 'Всего гостей',   value: MOCK_GUESTS.length,    color: 'text-brand-600 dark:text-brand-400', bg: 'bg-brand-50 dark:bg-brand-900/20' },
           { icon: Award,     label: 'VIP гостей',     value: vipCount,              color: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-900/20' },
           { icon: Repeat2,   label: 'Постоянных',     value: repeatCount,           color: 'text-blue-600 dark:text-blue-400',   bg: 'bg-blue-50 dark:bg-blue-900/20' },
           { icon: Star,      label: 'Средний рейтинг',value: avgRating,             color: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-900/20' },
         ].map(s => (
-          <div key={s.label} className="card p-4 flex items-center gap-4">
+          <div key={s.label} className="card p-4 flex items-center gap-3">
             <div className={cn('w-10 h-10 rounded-xl flex items-center justify-center shrink-0', s.bg)}>
               <s.icon size={20} className={s.color} />
             </div>
@@ -646,12 +646,12 @@ export function GuestsPage() {
             <thead>
               <tr className="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-700/50">
                 <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Гость</th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Контакты</th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Визиты</th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Потрачено</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden md:table-cell">Контакты</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden sm:table-cell">Визиты</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden lg:table-cell">Потрачено</th>
                 <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Рейтинг</th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Последний визит</th>
-                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide">Метки</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden lg:table-cell">Последний визит</th>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wide hidden sm:table-cell">Метки</th>
                 <th className="px-4 py-3" />
               </tr>
             </thead>
@@ -679,7 +679,7 @@ export function GuestsPage() {
                       <span className="text-sm font-medium text-slate-900 dark:text-slate-100">{guest.name}</span>
                     </div>
                   </td>
-                  <td className="px-4 py-3">
+                  <td className="px-4 py-3 hidden md:table-cell">
                     <div className="space-y-0.5">
                       {guest.phone && (
                         <div className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400">
@@ -693,13 +693,13 @@ export function GuestsPage() {
                       )}
                     </div>
                   </td>
-                  <td className="px-4 py-3">
+                  <td className="px-4 py-3 hidden sm:table-cell">
                     <div className="flex items-center gap-1.5">
                       <TrendingUp size={14} className="text-slate-400" />
                       <span className="text-sm font-medium text-slate-900 dark:text-slate-100">{guest.totalStays}</span>
                     </div>
                   </td>
-                  <td className="px-4 py-3">
+                  <td className="px-4 py-3 hidden lg:table-cell">
                     <span className="text-sm font-medium text-slate-900 dark:text-slate-100">
                       {guest.totalSpent.toLocaleString('ru-RU')} ₽
                     </span>
@@ -707,10 +707,10 @@ export function GuestsPage() {
                   <td className="px-4 py-3">
                     <StarRating value={guest.rating} />
                   </td>
-                  <td className="px-4 py-3">
+                  <td className="px-4 py-3 hidden lg:table-cell">
                     <span className="text-sm text-slate-600 dark:text-slate-400">{formatDate(guest.lastVisit)}</span>
                   </td>
-                  <td className="px-4 py-3">
+                  <td className="px-4 py-3 hidden sm:table-cell">
                     <div className="flex flex-wrap gap-1">
                       {guest.tags.map(tag => (
                         <span
diff --git a/src/pages/LoyaltyPage.tsx b/src/pages/LoyaltyPage.tsx
index 6337cf4..5fb04cf 100644
--- a/src/pages/LoyaltyPage.tsx
+++ b/src/pages/LoyaltyPage.tsx
@@ -837,7 +837,7 @@ export function LoyaltyPage() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
         {[
           { label: 'Участников программы',   value: activeGuests,                         icon: User,       color: 'text-brand-600 dark:text-brand-400',   bg: 'bg-brand-50 dark:bg-brand-900/20' },
           { label: 'Всего баллов в обороте', value: totalPoints.toLocaleString('ru-RU'),  icon: TrendingUp, color: 'text-amber-600 dark:text-amber-400',   bg: 'bg-amber-50 dark:bg-amber-900/20' },
diff --git a/src/pages/MaintenancePage.tsx b/src/pages/MaintenancePage.tsx
index 15cef62..43315b2 100644
--- a/src/pages/MaintenancePage.tsx
+++ b/src/pages/MaintenancePage.tsx
@@ -378,7 +378,7 @@ export function MaintenancePage() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
         {[
           { label: 'Всего записей',      value: records.length,                                                                                        cls: '' },
           { label: 'Активных',           value: active.length,                                                                                         cls: 'text-amber-600 dark:text-amber-400' },
diff --git a/src/pages/TariffsPage.tsx b/src/pages/TariffsPage.tsx
index ba75119..ced2f09 100644
--- a/src/pages/TariffsPage.tsx
+++ b/src/pages/TariffsPage.tsx
@@ -429,7 +429,7 @@ export function TariffsPage() {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
         {[
           { label: 'Всего тарифов',  value: tariffs.length,         color: 'text-slate-900 dark:text-slate-100' },
           { label: 'Активных',       value: activeTariffs.length,   color: 'text-emerald-600 dark:text-emerald-400' },