From 75ea81575d5f73e5005c60965553773e35bec7b6 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 13 Jan 2024 16:58:15 +0100
Subject: [PATCH] Modal width fix and debug revamp

---
 src/components/maps/WorldMap.astro            | 6 +++++-
 src/components/maps/overlay/MarkerCreator.vue | 8 ++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/maps/WorldMap.astro b/src/components/maps/WorldMap.astro
index d359495b..5d9ec16a 100644
--- a/src/components/maps/WorldMap.astro
+++ b/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>
     
diff --git a/src/components/maps/overlay/MarkerCreator.vue b/src/components/maps/overlay/MarkerCreator.vue
index 4b22fdf4..26384f9c 100644
--- a/src/components/maps/overlay/MarkerCreator.vue
+++ b/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;