Fix mobile responsiveness across all pages

- PosPage: rooms list becomes horizontal scroll row on mobile instead of w-56 sidebar
- AvailabilityPage: edit panel stacks below grid on mobile (was fixed w-80 side panel)
- UsersPage roles tab: sidebar stacks above permissions on mobile
- All page containers: p-6 → p-4 md:p-6 (TariffsPage, DiscountsPage, MaintenancePage, ReportsPage, DynamicPricingPage, GuestsPage, LoyaltyPage)
- Stats grids: lg:grid-cols-4 → md:grid-cols-4 (GuestsPage, TariffsPage, DiscountsPage, MaintenancePage, ReportsPage, LoyaltyPage)
- Modal form grids: grid-cols-3 → grid-cols-1 sm:grid-cols-3, grid-cols-5 → grid-cols-3 sm:grid-cols-5, grid-cols-4 → grid-cols-2 sm:grid-cols-4
- PosPage modals: fixed w-80/w-96 → responsive w-[calc(100vw-2rem)] sm:w-80/96

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-17 00:27:43 +03:00
parent 91e58ff994
commit 2fc66d1e84
10 changed files with 62 additions and 35 deletions

View File

@@ -287,7 +287,7 @@ function GuestModal({ guest, onClose }: { guest: Guest; onClose: () => void }) {
</div>
{/* Body */}
<div className="flex-1 overflow-y-auto p-6">
<div className="flex-1 overflow-y-auto p-4 sm:p-6">
{tab === 'overview' && (
<div className="space-y-5">
{/* Tags */}
@@ -556,7 +556,7 @@ export function GuestsPage() {
const avgRating = (MOCK_GUESTS.reduce((s, g) => s + g.rating, 0) / MOCK_GUESTS.length).toFixed(1)
return (
<div className="p-6 space-y-6">
<div className="p-4 md:p-6 space-y-6">
{/* Header */}
<div>
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Гости</h1>
@@ -588,7 +588,7 @@ export function GuestsPage() {
{pageTab === 'list' && <>
{/* Stats */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
<div className="grid grid-cols-2 md: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' },