fix: add reactive dep to showBubbles computed

Author: onmax

app/components/CountryBubbles.vue

@@ -97,6 +97,10 @@ const showBubbles = computed(() => {
   if (isFlying.value)
     return false
 
+  // Touch reactive deps to trigger re-evaluation when map moves
+  // eslint-disable-next-line no-unused-expressions
+  viewCenter.value
+
   // Only show bubbles when outside ALL country bounds
   // When inside any country, don't show edge bubbles pointing to other countries
   return isViewportOutsideAllCountries()

app/components/LocationDrawer.vue

@@ -79,11 +79,11 @@ function handleClose() {
         }"
         @click="handleClose"
       />
-      <DrawerContent flex="~ col" shadow="[0_-4px_24px_rgba(0,0,0,0.1)]" max-h="[calc(100dvh-env(safe-area-inset-top))]" outline-none rounded-t-10 bg-neutral-0 h-full w-full inset-x-0 bottom-0 fixed z-80>
-        <!-- Header with handle and close button -->
-        <div flex="~ items-center justify-center" pb-0 pt-8 relative>
-          <DrawerHandle bg-neutral-400 h-6 w-40 />
-          <button bg="neutral-500 hocus:neutral-600" stack rounded-full shrink-0 size-24 transition-colors right-16 absolute @click.stop="handleClose">
+      <DrawerContent flex="~ col" shadow="[0_-4px_24px_rgba(0,0,0,0.1)]" max-h="[calc(100dvh-env(safe-area-inset-top))]" outline-none rounded-t-12 bg-neutral-0 h-full w-full inset-x-0 bottom-0 fixed z-80>
+        <!-- Handle and close button - absolutely positioned, overlay content -->
+        <div flex="~ items-center justify-center" top-0 left-0 right-0 pt-8 z-10 absolute pointer-events-none>
+          <DrawerHandle bg-neutral-400 rounded-full h-6 w-40 pointer-events-auto />
+          <button bg="neutral-500 hocus:neutral-600" stack rounded-full shrink-0 size-24 transition-colors top-12 right-12 pointer-events-auto absolute @click.stop="handleClose">
             <Icon name="i-nimiq:cross-bold" text-neutral-0 size-10 />
           </button>
         </div>
@@ -101,3 +101,11 @@ function handleClose() {
     </DrawerPortal>
   </DrawerRoot>
 </template>
+
+<style>
+/* Override vaul's handle hitarea margins so it stays centered */
+[data-vaul-handle-hitarea] {
+  margin: 0 !important;
+  padding: 8px 16px !important;
+}
+</style>

app/components/LocationDrawerContent.vue

@@ -95,8 +95,8 @@ const { addressRef, showCopiedTooltip } = useAddressCopy()
 <template>
   <div h-full w-full relative of-hidden flex="~ col">
     <!-- Scrollable content -->
-    <div bg-neutral-0 flex-1 of-x-hidden of-y-auto :class="isCompact ? 'max-h-[calc(450px-32px)]' : ''">
-      <header pt-16 bg-neutral-0 relative f-px-md>
+    <div bg-neutral-0 flex-1 rounded-t-20 of-x-hidden of-y-auto :class="isCompact ? 'max-h-450px' : ''">
+      <header pt-20 bg-neutral-0 relative f-px-md>
         <!-- Title -->
         <h2 leading-tight font-bold my-0 pr-40 line-clamp-2 text="f-xl neutral">
           {{ location.name }}
@@ -144,9 +144,9 @@ const { addressRef, showCopiedTooltip } = useAddressCopy()
         <!-- Weekly Hours -->
         <div v-if="rotatedHours" w-full space-y-8>
           <div v-for="(hours, idx) in rotatedHours.hours" :key="idx" flex="~ items-center gap-8" text-14>
-            <span :class="hours ? 'text-neutral-700' : 'text-neutral-900'">{{ t(`days.${dayKeys[(new Date().getDay() + idx + 6) % 7]}`) }}</span>
+            <span :class="hours ? (idx === 0 ? 'text-neutral-900' : 'text-neutral-700') : 'text-red'">{{ t(`days.${dayKeys[(new Date().getDay() + idx + 6) % 7]}`) }}</span>
             <svg text-neutral-500 flex-1 h-2 preserveAspectRatio="none"><line x1="0" y1="50%" x2="100%" y2="50%" stroke="currentColor" stroke-width="1" /></svg>
-            <span :class="hours ? 'text-neutral-700' : 'text-red font-semibold'">
+            <span :class="hours ? (idx === 0 ? 'text-neutral-900' : 'text-neutral-700') : 'text-red font-semibold'">
               {{ hours || t('hours.closed') }}
             </span>
           </div>

app/components/MapControls.vue

@@ -54,7 +54,6 @@ function handleLocateMe() {
       cursor-pointer
       shadow
       transition-colors
-      disabled:op-50
       bg="neutral-0 hocus:neutral-50"
       :disabled="isLocating"
       @click="handleLocateMe"

app/pages/index.vue

@@ -17,7 +17,7 @@ const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 // Inline composable for map interaction handlers
 function useMapInteractions(options: {
-  onMarkerClick: (uuid: string) => void
+  onMarkerClick: (uuid: string, coordinates: [number, number]) => void
   onBackgroundClick: () => void
 }) {
   const logger = consola.withTag('map')
@@ -48,9 +48,12 @@ function useMapInteractions(options: {
 
   function handleLocationClick(map: Map, e: MapMouseEvent & { features?: GeoJSON.Feature[] }) {
     e.preventDefault()
-    const uuid = e.features?.[0]?.properties?.uuid
-    if (uuid)
-      options.onMarkerClick(uuid)
+    const feature = e.features?.[0]
+    const uuid = feature?.properties?.uuid
+    if (uuid && feature?.geometry?.type === 'Point') {
+      const coords = feature.geometry.coordinates as [number, number]
+      options.onMarkerClick(uuid, coords)
+    }
   }
 
   function setupCursorHandlers(map: Map, layerId: string) {
@@ -168,24 +171,14 @@ function handleNavigate(uuid: string | undefined, latitude: number, longitude: n
   }
 }
 
-function handleMarkerClick(uuid: string) {
+function handleMarkerClick(uuid: string, coordinates: [number, number]) {
   logger.info('Marker clicked:', uuid)
   selectedLocationUuid.value = uuid
   isDrawerOpen.value = true
   if (mapInstance.value) {
     setSelectedLocation(mapInstance.value as any, uuid)
-
-    // If marker is in bottom half, pan up so it's visible above drawer
-    const features = mapInstance.value.querySourceFeatures('locations', { filter: ['==', ['get', 'uuid'], uuid] })
-    const feature = features[0]
-    if (feature?.geometry?.type === 'Point') {
-      const coords = feature.geometry.coordinates as [number, number]
-      const point = mapInstance.value.project(coords)
-      const containerHeight = mapInstance.value.getContainer().clientHeight
-      if (point.y > containerHeight / 2) {
-        flyTo({ lat: coords[1], lng: coords[0] }, { zoom: mapInstance.value.getZoom(), padding: { bottom: 450 } })
-      }
-    }
+    // Pan to marker position with padding for drawer, maintaining current zoom
+    flyTo({ lat: coordinates[1], lng: coordinates[0] }, { zoom: mapInstance.value.getZoom(), padding: { bottom: 450 } })
   }
 }