refactor: Minor formatting fixes for details map (#370)

bcgov · Jan 30, 2025 · e78bc06 · e78bc06
1 parent eedf604
commit e78bc06
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/frontend/src/pages/authorizationDetails/DetailsMap.tsx b/frontend/src/pages/authorizationDetails/DetailsMap.tsx
@@ -2,7 +2,7 @@ import { LatLngTuple } from 'leaflet'
 import { MapContainer, Marker, TileLayer } from 'react-leaflet'
 
 import OmrrData from '@/interfaces/omrr'
-import { blueIcon1x, blueIcon2x } from '@/constants/marker-icons'
+import { pinHoverIcon } from '@/constants/marker-icons'
 
 interface Props {
   item: OmrrData
@@ -16,17 +16,16 @@ export function DetailsMap({ item, isSmall = false }: Readonly<Props>) {
   return (
     <MapContainer
       center={position}
-      scrollWheelZoom={false}
-      zoomControl={false}
       zoom={14}
-      style={{ height: `${height}px` }}
-      className="authorization-details-map"
+      scrollWheelZoom={false}
+      style={{ height: height, width: '100%' }}
+      dragging={false}
     >
       <TileLayer
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Marker position={position} icon={isSmall ? blueIcon1x : blueIcon2x} />
+      <Marker position={position} icon={pinHoverIcon} />
     </MapContainer>
   )
 }
diff --git a/frontend/src/pages/authorizationDetails/LocationSection.tsx b/frontend/src/pages/authorizationDetails/LocationSection.tsx
@@ -67,11 +67,17 @@ export function LocationSection({ item }: Readonly<Props>) {
         </>
       ) : (
         <>
-          <Box display="flex" flexDirection="column" gap="24px" flex={1}>
+          <Box
+            display="flex"
+            flexDirection="column"
+            gap="24px"
+            flex={1}
+            width="50%"
+          >
             {title}
             {details}
           </Box>
-          {map}
+          <Box width="50%">{map}</Box>
         </>
       )}
     </Stack>