Modal width fix and debug revamp

src/components/maps/WorldMap.astro

@@ -490,7 +490,11 @@ function convertScaleToY(y) {
 map.addEventListener('click', (event) => {
     const lat = convertScaleToY(event.latlng.lat)
     const lon = convertScaleToX(event.latlng.lng)
-    console.log(lat, lon, map.getZoom())
+    console.group('Point data')
+    console.log("Latitude :", lat)
+    console.log("Longitude :", lon)
+    console.log("Zoom :", map.getZoom())
+    console.groupEnd()
 })
 </script>
     

src/components/maps/overlay/MarkerCreator.vue

@@ -200,7 +200,7 @@ function setTitleError(error: Error | null) {
             </menu>
         </Transition>
 
-        <dialog ref="markerModal" :class="{ 'open': markerModalOpen }" @cancel.prevent="handleMarkerModalCancel" @click="console.log">
+        <dialog ref="markerModal" :class="{ 'open': markerModalOpen }" @cancel.prevent="handleMarkerModalCancel">
             <form @submit.prevent="handleAddCustomMarker">
                 <div class="modal-head">
                     <h2>
@@ -284,7 +284,7 @@ menu {
 
 dialog {
     position: fixed;
-    width: 30%;
+    max-width: calc(100% - 6rem);
     padding: 1.5rem 2rem;
     z-index: 9999;
     background-color: var(--white);
@@ -295,6 +295,10 @@ dialog {
     transform: translateY(1rem);
     transition: visibility 0s ease-out .3s, opacity .3s ease-out, transform .3s ease-out;
 
+    @media screen and (width >= 900px) {
+        width: 50%;
+    }
+
     &,
     &::backdrop {
         visibility: hidden;