From 0e3a7347e0b6c98b02887bbbd2bda544989288c8 Mon Sep 17 00:00:00 2001
From: HotelSync <admin@hotelsync.ru>
Date: Tue, 24 Mar 2026 20:08:48 +0300
Subject: [PATCH] fix: allow cross-origin image loading + hide legend on small
 screens

- Set crossOriginResourcePolicy: cross-origin in helmet so browsers
  can load uploaded images from api.hotelsync.ru when app runs on
  app.hotelsync.ru (was blocked by same-origin CORP header)
- Hide booking status legend squares below lg breakpoint (hidden lg:flex)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 backend/src/app.ts                          | 2 +-
 src/components/calendar/BookingCalendar.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/backend/src/app.ts b/backend/src/app.ts
index 57378c4..1d0b443 100644
--- a/backend/src/app.ts
+++ b/backend/src/app.ts
@@ -49,7 +49,7 @@ export async function buildApp() {
   await fastify.register(staticFiles, { root: uploadsDir, prefix: '/uploads/' })
 
   // ── Security ───────────────────────────────────────────────────────────────
-  await fastify.register(helmet, { contentSecurityPolicy: false })
+  await fastify.register(helmet, { contentSecurityPolicy: false, crossOriginResourcePolicy: { policy: 'cross-origin' } })
 
   await fastify.register(cors, {
     origin: config.cors.origins,
diff --git a/src/components/calendar/BookingCalendar.tsx b/src/components/calendar/BookingCalendar.tsx
index ef9bc53..c2f15ce 100644
--- a/src/components/calendar/BookingCalendar.tsx
+++ b/src/components/calendar/BookingCalendar.tsx
@@ -367,11 +367,11 @@ export function BookingCalendar({ rooms, bookings, slug, onBookingCreate, onBook
         <div className="flex-1" />
 
         {/* Legend */}
-        <div className="hidden md:flex items-center gap-2 text-xs text-slate-500">
+        <div className="hidden lg:flex items-center gap-2 text-xs text-slate-500">
           {(['confirmed', 'checked_in', 'checked_out', 'inquiry'] as const).map(s => (
-            <div key={s} className="flex items-center gap-1">
+            <div key={s} className="flex items-center gap-1.5">
               <div className={cn('w-2.5 h-2.5 rounded-sm shrink-0', BOOKING_STATUS_COLORS[s].split(' ')[0])} />
-              <span className="hidden lg:inline">{BOOKING_STATUS_LABELS[s]}</span>
+              <span>{BOOKING_STATUS_LABELS[s]}</span>
             </div>
           ))}
         </div>