From 5a1b9d0340559aa4847fba246942d07dd0cd0dc6 Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Thu, 8 Jan 2026 10:42:55 +0100
Subject: [PATCH] feat: enhance ExpandableScreen close button styling with
 utility function and update global styles for drawer height

---
 apps/infoalloggi/src/components/expandable_screen.tsx | 10 ++++++----
 apps/infoalloggi/src/styles/globals.css               |  4 ++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/infoalloggi/src/components/expandable_screen.tsx b/apps/infoalloggi/src/components/expandable_screen.tsx
index 708d76e..a34a67a 100644
--- a/apps/infoalloggi/src/components/expandable_screen.tsx
+++ b/apps/infoalloggi/src/components/expandable_screen.tsx
@@ -9,6 +9,7 @@ import {
 	useEffect,
 	useState,
 } from "react";
+import { cn } from "~/lib/utils";
 
 // Context
 interface ExpandableScreenContextValue {
@@ -184,10 +185,11 @@ export function ExpandableScreenContent({
 						{showCloseButton && (
 							<motion.button
 								aria-label="Close"
-								className={`absolute top-6 right-6 z-30 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full transition-colors ${
-									closeButtonClassName ||
-									"bg-transparent text-white hover:bg-white/10 dark:text-primary-foreground hover:dark:bg-primary-foreground/10"
-								}`}
+								className={cn(
+									"absolute top-6 right-6 z-30 flex h-10 w-10 cursor-pointer items-center justify-center rounded-full transition-colors",
+									"bg-transparent text-white hover:bg-white/10 dark:text-primary-foreground hover:dark:bg-primary-foreground/10",
+									closeButtonClassName,
+								)}
 								onClick={collapse}
 							>
 								<X className="h-5 w-5" />
diff --git a/apps/infoalloggi/src/styles/globals.css b/apps/infoalloggi/src/styles/globals.css
index 6f9be49..8f343af 100644
--- a/apps/infoalloggi/src/styles/globals.css
+++ b/apps/infoalloggi/src/styles/globals.css
@@ -313,6 +313,10 @@
   /* .leaflet-control-attribution {
     @apply !sr-only;
   } */
+
+  [data-vaul-drawer][data-vaul-drawer-direction="bottom"] {
+    @apply !max-h-[90vh];
+  }
 }
 
 @utility dropdown-override {