From 3353cee64c8c95f67a33da4455b8cf8bf141baa2 Mon Sep 17 00:00:00 2001
From: rasm-its <radoslaw.smolinski@intecion.com>
Date: Wed, 26 Aug 2026 03:01:12 +0200
Subject: [PATCH] fix(ui): ensure scrollable cookie settings modal and clean
 body layout

---
 src/app/(frontend)/[locale]/layout.tsx |  2 +-
 src/components/CustomCookieBanner.tsx  | 42 ++++++++++++++++----------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/app/(frontend)/[locale]/layout.tsx b/src/app/(frontend)/[locale]/layout.tsx
index 4d0a077..731a73b 100644
--- a/src/app/(frontend)/[locale]/layout.tsx
+++ b/src/app/(frontend)/[locale]/layout.tsx
@@ -99,7 +99,7 @@ export default async function LocaleLayout({ children, params }: LayoutProps) {
 
   return (
     <html lang={locale}>
-      <body className="min-h-screen flex flex-col bg-slate-950 text-slate-100 antialiased selection:bg-sky-500 selection:text-white">
+      <body className="min-h-screen flex flex-col bg-white text-[#222222] antialiased selection:bg-[#FFED00] selection:text-[#1f1f1f]">
         <ConsentProvider texts={texts}>
           <Header
             companyName={company?.shortName || company?.name}
diff --git a/src/components/CustomCookieBanner.tsx b/src/components/CustomCookieBanner.tsx
index e2d2d00..c60f55c 100644
--- a/src/components/CustomCookieBanner.tsx
+++ b/src/components/CustomCookieBanner.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect } from 'react'
-import { Cookie, Check, ArrowRight } from 'lucide-react'
+import { Cookie, Check, X } from 'lucide-react'
 import { useConsentContext } from '@intecion/ipal-kit/client'
 
 const CONSENT_CATEGORIES = ['necessary', 'analytics', 'marketing'] as const
@@ -32,14 +32,14 @@ export function CustomCookieBanner() {
     <div
       role="dialog"
       aria-label="Cookie consent"
-      className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-6 border-t-4 border-[#FFED00] shadow-2xl"
+      className="fixed bottom-0 inset-x-0 z-50 bg-[#1f1f1f] text-white p-5 sm:p-6 border-t-4 border-[#FFED00] shadow-2xl max-h-[85vh] overflow-y-auto"
     >
       <div className="container mx-auto max-w-4xl">
         {!showSettings ? (
-          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
-            <div className="flex items-start gap-4">
+          <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-5">
+            <div className="flex items-start gap-3.5">
               <div className="p-2 bg-[#FFED00] text-[#1f1f1f] shrink-0 border border-[#1f1f1f]">
-                <Cookie className="h-6 w-6" />
+                <Cookie className="h-5 w-5" />
               </div>
               <div className="text-xs sm:text-sm text-[#e0e0e0] leading-relaxed">
                 <p>
@@ -56,7 +56,7 @@ export function CustomCookieBanner() {
               </div>
             </div>
 
-            <div className="flex flex-wrap items-center gap-3 shrink-0">
+            <div className="flex flex-wrap items-center gap-2.5 shrink-0">
               <button
                 type="button"
                 onClick={() => setShowSettings(true)}
@@ -81,17 +81,27 @@ export function CustomCookieBanner() {
             </div>
           </div>
         ) : (
-          <div className="space-y-6">
-            <div className="flex items-center gap-3 border-b border-[#333333] pb-4">
-              <div className="p-1.5 bg-[#FFED00] text-[#1f1f1f]">
-                <Cookie className="h-5 w-5" />
+          <div className="space-y-5">
+            <div className="flex items-center justify-between border-b border-[#333333] pb-3">
+              <div className="flex items-center gap-3">
+                <div className="p-1.5 bg-[#FFED00] text-[#1f1f1f]">
+                  <Cookie className="h-5 w-5" />
+                </div>
+                <h2 className="text-sm sm:text-base font-black uppercase tracking-wider text-white">
+                  {texts.settingsTitle}
+                </h2>
               </div>
-              <h2 className="text-base font-black uppercase tracking-wider text-white">
-                {texts.settingsTitle}
-              </h2>
+              <button
+                type="button"
+                onClick={() => setShowSettings(false)}
+                className="text-[#a0a0a0] hover:text-white p-1"
+                aria-label="Zamknij ustawienia"
+              >
+                <X className="h-5 w-5" />
+              </button>
             </div>
 
-            <ul className="space-y-4">
+            <ul className="space-y-3">
               {CONSENT_CATEGORIES.map((cat) => {
                 const isChecked = cat === 'necessary' ? true : !!choices[cat]
                 const isDisabled = cat === 'necessary'
@@ -103,7 +113,7 @@ export function CustomCookieBanner() {
                   <li
                     key={cat}
                     onClick={() => !isDisabled && toggle(cat)}
-                    className={`flex items-start justify-between gap-4 p-4 border border-[#333333] bg-[#262626] ${
+                    className={`flex items-start justify-between gap-4 p-3.5 border border-[#333333] bg-[#262626] ${
                       !isDisabled ? 'cursor-pointer hover:border-[#FFED00]' : 'opacity-90'
                     } transition-colors`}
                   >
@@ -111,7 +121,7 @@ export function CustomCookieBanner() {
                       <div className="text-xs font-black uppercase tracking-wider text-[#FFED00]">
                         {catData.title}
                       </div>
-                      <p className="text-xs text-[#a0a0a0] mt-1 leading-relaxed">
+                      <p className="text-xs text-[#a0a0a0] mt-0.5 leading-relaxed">
                         {catData.description}
                       </p>
                     </div>