Fix mobile responsiveness across all pages
- 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>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user