From e5fae578abd6cfb35633527f5c6c88280419c7b6 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Tue, 10 Mar 2026 23:18:25 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20booking=20modal=20positioning=20?=
 =?UTF-8?q?=E2=80=94=20use=20portal=20to=20render=20in=20document.body?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also make header full-width (remove max-w-6xl constraint).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/layout/Header.tsx   | 2 +-
 src/components/ui/BookingModal.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index adac84d..cd9610c 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -74,7 +74,7 @@ export function Header() {
           : "bg-transparent"
       }`}
     >
-      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 sm:px-8">
+      <div className="flex h-16 items-center justify-between px-6 sm:px-10 lg:px-16">
         <Link href="/" className="group flex items-center gap-2.5">
           <div className="relative flex h-8 w-8 items-center justify-center">
             <div
diff --git a/src/components/ui/BookingModal.tsx b/src/components/ui/BookingModal.tsx
index 26767a3..3ceb209 100644
--- a/src/components/ui/BookingModal.tsx
+++ b/src/components/ui/BookingModal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { X, Instagram, Send, CheckCircle, Phone } from "lucide-react";
 import { siteContent } from "@/data/content";
 
@@ -84,7 +85,7 @@ export function BookingModal({ open, onClose }: BookingModalProps) {
 
   if (!open) return null;
 
-  return (
+  return createPortal(
     <div
       className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4"
       onClick={handleClose}
@@ -193,6 +194,7 @@ export function BookingModal({ open, onClose }: BookingModalProps) {
           </>
         )}
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }