adapt modal config for phone

style.css

@@ -692,3 +692,46 @@ div#tab-saved-graphs {
     max-height: 100vh !important;
     overflow: hidden;
 }
+
+
+/* Mobile specific modal configuration */
+@media screen and (max-width: 767px) {
+    #modal-config {
+        width: 100%; /* Full width on mobile */
+        height: 100vh;
+        left: 0;
+        top: 0;
+        padding: 10px; /* Reduced padding for mobile */
+    }
+
+    #modal-config .block.modal-block.padded {
+        padding-top: 15px; /* Reduced top padding */
+        height: 100vh;
+        overflow-y: auto; /* Enable scrolling */
+    }
+
+    #modal-config .modal-container {
+        width: 100%;
+        height: 100%;
+    }
+
+    /* Show close button on mobile */
+    #modal-config .close {
+        display: block;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 1001;
+        padding: 8px;
+        font-size: 24px;
+        background: none;
+        border: none;
+        cursor: pointer;
+    }
+
+    /* Ensure modal content is scrollable on mobile */
+    #modal-config .modal .wrap ul {
+        max-height: calc(100vh - 60px); /* Account for header space */
+        overflow-y: auto;
+    }
+}