feat(Maps): maps use full page by default

jakeaturner · jakeaturner · commit 52e90041f499 · 2026-02-04T21:54:36.000-08:00
diff --git a/admin/inertia/components/maps/MapComponent.tsx b/admin/inertia/components/maps/MapComponent.tsx
@@ -3,10 +3,8 @@ import maplibregl from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { Protocol } from 'pmtiles'
 import { useEffect } from 'react'
-import { useWindowSize } from 'usehooks-ts'
 
 export default function MapComponent() {
-  const { width = 0, height = 0 } = useWindowSize()
 
   // Add the PMTiles protocol to maplibre-gl
   useEffect(() => {
@@ -22,11 +20,8 @@ export default function MapComponent() {
       <Map
         reuseMaps
         style={{
-          width: width,
-          height: height - 175,
-          borderRadius: '5px',
-          boxShadow: '0 0 4px rgba(0,0,0,0.3)',
-          backgroundColor: '#fff',
+          width: '100%',
+          height: '100vh',
         }}
         mapStyle={`http://${window.location.hostname}:${window.location.port}/api/maps/styles`}
         mapLib={maplibregl}
@@ -36,8 +31,8 @@ export default function MapComponent() {
           zoom: 3.5,
         }}
       >
-        <NavigationControl />
-        <FullscreenControl />
+        <NavigationControl style={{ marginTop: '110px', marginRight: '36px' }} />
+        <FullscreenControl style={{ marginTop: '30px', marginRight: '36px' }} />
       </Map>
     </MapProvider>
   )
diff --git a/admin/inertia/pages/maps.tsx b/admin/inertia/pages/maps.tsx
@@ -18,35 +18,40 @@ export default function Maps(props: {
   return (
     <MapsLayout>
       <Head title="Maps" />
-      <div className="flex border-b border-gray-900/10 p-4 justify-between">
-        <Link href="/home" className="flex items-center">
-          <IconArrowLeft className="mr-2" size={24} />
-          <p className="text-lg text-gray-600">Back to Home</p>
-        </Link>
-        <Link href="/settings/maps">
-          <StyledButton variant="primary" icon="IconSettings">
-            Manage Map Regions
-          </StyledButton>
-        </Link>
-      </div>
-      <div className="w-full min-h-screen flex flex-col items-center justify-center py-4 mx-4">
+      <div className="relative w-full h-screen overflow-hidden">
+        {/* Nav and alerts are overlayed */}
+        <div className="absolute top-0 left-0 right-0 z-50 flex justify-between p-4 bg-gray-50 backdrop-blur-sm shadow-sm">
+          <Link href="/home" className="flex items-center">
+            <IconArrowLeft className="mr-2" size={24} />
+            <p className="text-lg text-gray-600">Back to Home</p>
+          </Link>
+          <Link href="/settings/maps" className='mr-4'>
+            <StyledButton variant="primary" icon="IconSettings">
+              Manage Map Regions
+            </StyledButton>
+          </Link>
+        </div>
         {alertMessage && (
-          <AlertWithButton
-            title={alertMessage}
-            type="warning"
-            variant="solid"
-            className="w-full !mb-4"
-            buttonProps={{
-              variant: 'secondary',
-              children: 'Go to Map Settings',
-              icon: 'IconSettings',
-              onClick: () => {
-                window.location.href = '/settings/maps'
-              },
-            }}
-          />
+          <div className="absolute top-20 left-4 right-4 z-50">
+            <AlertWithButton
+              title={alertMessage}
+              type="warning"
+              variant="solid"
+              className="w-full"
+              buttonProps={{
+                variant: 'secondary',
+                children: 'Go to Map Settings',
+                icon: 'IconSettings',
+                onClick: () => {
+                  window.location.href = '/settings/maps'
+                },
+              }}
+            />
+          </div>
         )}
-        <MapComponent />
+        <div className="absolute inset-0">
+          <MapComponent />
+        </div>
       </div>
     </MapsLayout>
   )
diff --git a/admin/package-lock.json b/admin/package-lock.json
diff --git a/admin/package.json b/admin/package.json
@@ -119,7 +119,6 @@
     "tar": "^7.5.6",
     "tesseract.js": "^7.0.0",
     "url-join": "^5.0.0",
-    "usehooks-ts": "^3.1.1",
     "yaml": "^2.8.0"
   },
   "hotHook": {
