Use seperate fields for lattitude and longitude

src/components/map/CoordinateSelectorControl.vue

@@ -2,23 +2,26 @@
   <v-chip pill label class="outer-chip chip justify-center overflow-visible">
     <v-icon class="pr-2">mdi-map-marker</v-icon>
 
-    <span class="mr-4 text-medium-emphasis text-mono">
-      {{ coordinateString }}
+    <span class="coordinate-selector__value text-right mr-1">
+      {{ coordinateStringParts[0] }}
+    </span>
+    <span class="coordinate-selector__value text-right mr-2">
+      {{ coordinateStringParts[1] }}
     </span>
     <v-btn
       :disabled="coordinate === null"
       @click="onFinish"
       density="compact"
       color="primary"
-      class="px-0 text-medium-emphasis"
+      class="px-0"
     >
       Apply
     </v-btn>
   </v-chip>
 </template>
 
 <script setup lang="ts">
-import { coordinateToString } from '@/lib/workflows'
+import { coordinateToStringParts } from '@/lib/workflows'
 import type { LngLat } from 'maplibre-gl'
 import { computed } from 'vue'
 
@@ -27,7 +30,9 @@ const coordinate = defineModel<LngLat | null>('coordinate', {
 })
 const isActive = defineModel<boolean>('active', { default: false })
 
-const coordinateString = computed(() => coordinateToString(coordinate.value))
+const coordinateStringParts = computed(() =>
+  coordinateToStringParts(coordinate.value),
+)
 
 function onFinish(): void {
   isActive.value = false
@@ -42,4 +47,8 @@ function onFinish(): void {
   background-color: rgba(var(--v-theme-surface), 0.8);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 }
+
+.coordinate-selector__value {
+  min-width: calc(4ch + 2em);
+}
 </style>

src/lib/workflows/index.ts

@@ -5,3 +5,9 @@ export function coordinateToString(coordinate: LngLat | null) {
     ? `${coordinate.lng.toFixed(2)}°E ${coordinate.lat.toFixed(2)}°N`
     : '—'
 }
+
+export function coordinateToStringParts(coordinate: LngLat | null) {
+  return coordinate
+    ? [`${coordinate.lng.toFixed(2)}°E`, `${coordinate.lat.toFixed(2)}°N`]
+    : ['—°E', '—°N']
+}