Fix mobile view for the map and browse pages

resources/js/browse.js

@@ -7,10 +7,9 @@ function occurrenceBrowser() {
 
         init() {
             this.table = new Tabulator('#eonmap-browser-table', {
-                layout: 'fitColumns',
+                layout: 'fitDataFill',
                 data: [],
                 movableColumns: true,
-                responsiveLayout: 'hide',
                 columns: [
                     {
                         title: 'Taxon',

resources/views/components/pagination/per-page-selector.blade.php

@@ -9,7 +9,7 @@
     text-base (1rem = 16px) prevents iOS zoom on focus.
 --}}
 <div class="flex items-center gap-2">
-    <label class="whitespace-nowrap text-xs text-muted">Per page</label>
+    <label class="hidden sm:inline whitespace-nowrap text-xs text-muted">Per page</label>
     <select
         {{ $attributes->merge([
             'class' => 'rounded-md border border-border bg-surface-sunken py-1.5 pl-3 pr-8 text-base text-text focus:outline-none focus:ring-2 focus:ring-accent-muted'

resources/views/livewire/fossil-map.blade.php

@@ -1,7 +1,7 @@
-<div class="grid grid-cols-[18rem_1fr] h-[calc(100vh-4rem)]">
+<div class="flex flex-col lg:grid lg:grid-cols-[18rem_1fr] h-[calc(100vh-4rem)]">
 
     {{-- ─── Filter Panel ──────────────────────────────────────────────── --}}
-    <aside class="relative flex flex-col bg-surface border-r border-border overflow-hidden" aria-label="Filters">
+    <aside class="max-h-[45vh] lg:max-h-none relative flex flex-col bg-surface border-b lg:border-b-0 lg:border-r border-border overflow-hidden" aria-label="Filters">
         <livewire:occurrence-filters />
 
         {{-- Error state (set by FossilMap when the API call fails) --}}
@@ -39,7 +39,7 @@ class="absolute inset-0 z-10 bg-surface/80 backdrop-blur-sm"
         x-data="fossilMap"
         x-on:occurrences-loaded.window="updateMarkers($event.detail.occurrences)"
         wire:ignore
-        class="relative bg-surface-sunken"
+        class="relative bg-surface-sunken flex-1 lg:flex-none min-h-0"
     >
         {{-- Leaflet map --}}
         <div id="eonmap-map" class="w-full h-full" role="application" aria-label="Fossil occurrence map"></div>
@@ -51,7 +51,7 @@ class="absolute inset-0 flex items-center justify-center pointer-events-none z-[
         >
             <div class="bg-surface/90 backdrop-blur-sm rounded-xl border border-border px-8 py-6 text-center shadow-lg">
                 <p class="text-lg font-semibold text-text">Add a filter to search</p>
-                <p class="mt-1 text-sm text-muted">Use the panel on the left to filter fossil occurrences.</p>
+                <p class="mt-1 text-sm text-muted">Use the filters above to search for fossil occurrences.</p>
             </div>
         </div>
 

resources/views/livewire/occurrence-browser.blade.php

@@ -6,7 +6,8 @@ class="grid lg:grid-cols-[18rem_1fr] lg:h-[calc(100vh-4rem)]"
 
     {{-- ─── Table + Toolbar ───────────────────────────────────────────────── --}}
     {{-- order-first puts this above the filter panel on mobile               --}}
-    <div class="order-first lg:order-last flex flex-col lg:min-h-0">
+    {{-- min-w-0 prevents the grid item from expanding beyond its track       --}}
+    <div class="order-first lg:order-last flex flex-col lg:min-h-0 min-w-0">
 
         {{-- Toolbar --}}
         <div class="flex items-center justify-between gap-4 px-4 py-3 border-b border-border bg-surface-raised shrink-0">
@@ -27,7 +28,7 @@ class="grid lg:grid-cols-[18rem_1fr] lg:h-[calc(100vh-4rem)]"
 
             <a
                 href="{{ $exportUrl }}"
-                class="rounded-md border border-border bg-surface px-3 py-1.5 text-xs font-medium hover:bg-surface-hover transition-colors shrink-0"
+                class="hidden sm:inline-flex rounded-md border border-border bg-surface px-3 py-1.5 text-xs font-medium hover:bg-surface-hover transition-colors shrink-0"
                 aria-label="Export current results as CSV"
             >
                 Export CSV
@@ -41,10 +42,10 @@ class="rounded-md border border-border bg-surface px-3 py-1.5 text-xs font-mediu
             </div>
         @endif
 
-        {{-- Tabulator table — flex-1 fills remaining column height on desktop --}}
+        {{-- Tabulator table — scrolls horizontally on mobile, fills column height on desktop --}}
         <div
             id="eonmap-browser-table"
-            class="w-full lg:flex-1 lg:overflow-auto"
+            class="w-full overflow-x-auto lg:flex-1 lg:overflow-auto"
             wire:ignore
         ></div>
 
@@ -54,7 +55,7 @@ class="w-full lg:flex-1 lg:overflow-auto"
     {{-- order-last puts this below the table on mobile, left column on desktop --}}
     <aside
         x-data="{ filtersOpen: true }"
-        class="order-last lg:order-first border-t lg:border-t-0 lg:border-r border-border bg-surface flex flex-col lg:overflow-hidden"
+        class="order-last lg:order-first border-t lg:border-t-0 lg:border-r border-border bg-surface flex flex-col overflow-hidden lg:overflow-hidden min-w-0"
         aria-label="Filters"
     >
         {{-- Panel header --}}