Change panel sizes logic

src/app/[locale]/map/layout.tsx

@@ -32,22 +32,16 @@ export default async function MapLayout({ children }: Props) {
     <MapContextProvider defaultSettings={settings}>
       <main
         role="main"
-        className="grid h-full w-screen grid-cols-[1fr_1fr_1fr] grid-rows-1 justify-stretch overflow-x-hidden scroll-smooth"
+        className="grid h-full w-screen grid-cols-[100dvw_auto_100dvw] grid-rows-1 justify-stretch overflow-x-hidden scroll-smooth md:grid-cols-[50dvw_auto_50dvw] lg:grid-cols-[300px_auto_1fr]"
       >
-        <MapSidebar
-          id="search"
-          className="z-[1001] w-screen lg:sticky lg:left-0 lg:w-[50vw] xl:w-[calc(100vw/3)]"
-        />
+        <MapSidebar id="search" className="z-[1001]" />
         <section
           id="content"
-          className="h-full w-screen pb-20 empty:hidden lg:w-[50vw] lg:scroll-ml-[50vw] xl:w-[calc(100vw/3)] xl:pb-0"
+          className="h-full w-[100dvw] empty:w-0 md:w-[50dvw] lg:w-[350px] xl:w-[450px]"
         >
           {children}
         </section>
-        <MapWrapper
-          id="map"
-          className="w-screen lg:w-[50vw] xl:w-[calc(100vw/3)]"
-        />
+        <MapWrapper id="map" />
         <MapMenu />
       </main>
     </MapContextProvider>

src/components/details.page.tsx

@@ -52,7 +52,7 @@ export default function DetailsPageUI({ content }: Props) {
         <h1 className="text-2xl font-extrabold tracking-tight lg:text-3xl">
           {content.name}
         </h1>
-        <div className="absolute right-0 top-0 flex rounded-bl-lg border border-t-0 bg-background">
+        <div className="absolute right-0 top-0 z-10 flex rounded-bl-lg border border-t-0 bg-background">
           {content.geometryCenter && (
             <ButtonCenterView
               latLng={

src/components/map-Wrapper.tsx

@@ -36,14 +36,7 @@ export default function MapWrapper({ className, ...props }: Props) {
   );
 
   return (
-    <section
-      {...props}
-      className={cn(
-        'h-full grow',
-        className,
-        pathName === '/map' && 'xl:w-[calc(100vw*2/3)]',
-      )}
-    >
+    <section {...props} className={cn('h-full grow', className)}>
       <Map />
     </section>
   );

src/components/map-menu.tsx

@@ -18,11 +18,10 @@ export default function MapMenu() {
     <nav className="max-w-4/5 fixed bottom-4 left-1/2 z-[1001] -translate-x-1/2 sm:w-max">
       <ul
         className={cn(
-          'flex items-stretch space-x-1 rounded-md bg-background p-1 xl:hidden ',
-          !hasContent && 'lg:hidden',
+          'flex items-stretch space-x-1 rounded-md bg-background/80 p-1 shadow-lg backdrop-blur-sm lg:hidden',
         )}
       >
-        <li className="lg:hidden">
+        <li>
           <Link
             className={cn(
               'flex h-full items-center rounded-sm  px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
@@ -34,7 +33,7 @@ export default function MapMenu() {
           </Link>
         </li>
         {hasContent && (
-          <li>
+          <li className="md:hidden">
             <Link
               className={cn(
                 'flex h-full items-center rounded-sm px-3 py-1.5 text-center text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',

src/components/map-sidebar.tsx

@@ -14,11 +14,11 @@ type Props = HTMLAttributes<HTMLElement>;
 export function MapSidebar({ className, ...props }: Props) {
   return (
     <section {...props} className={cn('flex flex-col bg-primary', className)}>
-      <div className="flex flex-col items-stretch gap-4 p-4 sm:flex-row sm:items-end">
+      <div className="flex flex-row flex-wrap items-end justify-center gap-4 p-4">
         <SearchForm />
         <ObservationCTA />
       </div>
-      <ScrollArea className="h-full pb-20">
+      <ScrollArea className="h-full">
         <MapFilters />
       </ScrollArea>
     </section>

src/components/observation-cta.tsx

@@ -18,8 +18,8 @@ export function ObservationCTA() {
   const t = useTranslations('observation');
   const params = useSearchParams();
   return (
-    <div className="flex justify-center">
-      <NavigationMenu>
+    <div className="flex grow justify-center">
+      <NavigationMenu delayDuration={500}>
         <NavigationMenuList>
           <NavigationMenuItem>
             <NavigationMenuTrigger>{t('labelButton')}</NavigationMenuTrigger>

src/components/search-form.tsx

@@ -40,7 +40,7 @@ export default function SearchForm() {
   }, [searchParams]);
 
   return (
-    <form action="/map" className="grow" onSubmit={handleSubmit}>
+    <form action="/map" className="grow-[10] basis-80" onSubmit={handleSubmit}>
       <Label htmlFor={inputId}>{t('label')}</Label>
       <div className="flex w-full items-center space-x-2 rounded-md bg-input">
         <Input

src/components/ui/navigation-menu.tsx

@@ -85,7 +85,9 @@ const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn('absolute top-full flex justify-center')}>
+  <div
+    className={cn('absolute left-auto top-full flex justify-center md:left-0')}
+  >
     <NavigationMenuPrimitive.Viewport
       className={cn(
         'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',

src/components/ui/scroll-area.tsx

@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit] pb-20 md:pb-0">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />