feat: enhance ExpandableScreen close button styling with utility function and update global styles for drawer height

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 ${
+								className={cn(
-									closeButtonClassName ||
+									"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"
+									"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" />

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 {