Fix z-index and improove modal - over modal handling

internal/locales/de.json

@@ -120,6 +120,7 @@
     "settings.ignore_ips_placeholder": "IP-Adressen, getrennt durch Leerzeichen",
     "settings.save": "Speichern",
     "modal.filter_config": "Filter-Konfiguration:",
+    "modal.filter_config_edit": "Filter bearbeiten",
     "modal.cancel": "Abbrechen",
     "modal.save": "Speichern",
     "modal.close": "Schließen",

internal/locales/de_ch.json

@@ -120,6 +120,7 @@
     "settings.ignore_ips_placeholder": "IPs, getrennt dur e Leerzeichä",
     "settings.save": "Speicherä",
     "modal.filter_config": "Filter-Konfiguration:",
+    "modal.filter_config_edit": "Filter bearbeite",
     "modal.cancel": "Abbräche",
     "modal.save": "Speicherä",
     "modal.close": "Zue",

internal/locales/en.json

@@ -120,6 +120,7 @@
     "settings.ignore_ips_placeholder": "IPs to ignore, separated by spaces",
     "settings.save": "Save",
     "modal.filter_config": "Filter Config:",
+    "modal.filter_config_edit": "Edit Filter",
     "modal.cancel": "Cancel",
     "modal.save": "Save",
     "modal.close": "Close",

internal/locales/es.json

@@ -120,6 +120,7 @@
   "settings.ignore_ips_placeholder": "IPs a ignorar, separadas por espacios",
   "settings.save": "Guardar",
   "modal.filter_config": "Configuración del filtro:",
+  "modal.filter_config_edit": "Editar filtro",
   "modal.cancel": "Cancelar",
   "modal.save": "Guardar",
   "modal.close": "Cerrar",

internal/locales/fr.json

@@ -120,6 +120,7 @@
   "settings.ignore_ips_placeholder": "IPs à ignorer, séparées par des espaces",
   "settings.save": "Enregistrer",
   "modal.filter_config": "Configuration du filtre:",
+  "modal.filter_config_edit": "Modifier le filtre",
   "modal.cancel": "Annuler",
   "modal.save": "Enregistrer",
   "modal.close": "Fermer",

internal/locales/it.json

@@ -120,6 +120,7 @@
   "settings.ignore_ips_placeholder": "IP da ignorare, separate da spazi",
   "settings.save": "Salva",
   "modal.filter_config": "Configurazione del filtro:",
+  "modal.filter_config_edit": "Modifica filtro",
   "modal.cancel": "Annulla",
   "modal.save": "Salva",
   "modal.close": "Chiudi",

pkg/web/templates/index.html

@@ -654,7 +654,7 @@
   <!--                        Modal Templates START                        -->
   <!-- ******************************************************************* -->
   <!-- Jail Config Modal -->
-  <div id="jailConfigModal" class="hidden fixed inset-0 z-50 overflow-y-auto">
+  <div id="jailConfigModal" class="hidden fixed inset-0 overflow-y-auto" style="z-index: 60;">
     <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">
         <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
@@ -692,7 +692,7 @@
       
       <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
       
-      <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+      <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-xl sm:w-full">
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
@@ -2755,32 +2755,47 @@
 
           const html = data.jails.map(jail => {
             const isEnabled = jail.enabled ? 'checked' : '';
+            const escapedJailName = escapeHtml(jail.jailName);
+            // Escape single quotes for JavaScript string
+            const jsEscapedJailName = jail.jailName.replace(/'/g, "\\'");
             return `
-              <div class="flex items-center justify-between p-3 bg-gray-50">
+              <div class="flex items-center justify-between gap-3 p-3 bg-gray-50">
-                <span class="text-sm font-medium">${jail.jailName}</span>
+                <span class="text-sm font-medium flex-1">${escapedJailName}</span>
 
-                <!-- slider -->
+                <div class="flex items-center gap-3">
-                <label class="inline-flex relative items-center cursor-pointer">
+                  <button
-                  <input
+                    type="button"
-                    type="checkbox"
+                    onclick="openJailConfigModal('${jsEscapedJailName}')"
-                    id="toggle-${jail.jailName}"
+                    class="text-xs px-3 py-1.5 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors whitespace-nowrap"
-                    class="sr-only peer"
+                    data-i18n="modal.filter_config_edit"
-                    ${isEnabled}
+                    title="${t('modal.filter_config_edit', 'Edit Filter')}"
-                  />
+                  >
+                    ${t('modal.filter_config_edit', 'Edit Filter')}
+                  </button>
 
-                  <!-- track -->
+                  <!-- slider -->
-                  <div
+                  <label class="inline-flex relative items-center cursor-pointer">
-                    class="w-11 h-6 bg-gray-200 rounded-full
+                    <input
-                          peer-focus:ring-4 peer-focus:ring-blue-300
+                      type="checkbox"
-                          peer-checked:bg-blue-600 transition-colors"
+                      id="toggle-${jail.jailName.replace(/[^a-zA-Z0-9]/g, '_')}"
-                  ></div>
+                      class="sr-only peer"
+                      ${isEnabled}
+                    />
 
-                  <!-- thumb -->
+                    <!-- track -->
-                  <span
+                    <div
-                    class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full
+                      class="w-11 h-6 bg-gray-200 rounded-full
-                          transition-transform peer-checked:translate-x-5"
+                            peer-focus:ring-4 peer-focus:ring-blue-300
-                  ></span>
+                            peer-checked:bg-blue-600 transition-colors"
-                </label>
+                    ></div>
+
+                    <!-- thumb -->
+                    <span
+                      class="absolute left-1 top-1 bg-white w-4 h-4 rounded-full
+                            transition-transform peer-checked:translate-x-5"
+                    ></span>
+                  </label>
+                </div>
               </div>
             `;
           }).join('');