From dac824a1617e1d0b5a03261b5db0cc4c24b9602c Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 25 Jun 2026 21:18:15 +0100
Subject: [PATCH] fix(webui/forms): enhance per-app config & port dropdowns
 with themed select

The custom-select enhancer only matched select.form-control /
select.theme-selector, so dropdowns rendered by the per-app config form
(config-form.js uses form-select / form-input / config-input), the app
tools form, the port-manager grid (port-* classes) and the instance
domain picker stayed as plain native OS dropdowns. The LibrePortal app's
Theme option is one of these.

Add those classes to ENHANCE_CLASSES, give the classless instance domain
select a form-control class, and add a compact button override so the
themed dropdown matches the dense port-manager input metrics.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../components/apps/core/js/instance-manager.js   |  2 +-
 .../apps/port-manager/css/port-manager.css        |  8 ++++++++
 .../frontend/core/forms/js/custom-select.js       | 15 +++++++++++++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/containers/libreportal/frontend/components/apps/core/js/instance-manager.js b/containers/libreportal/frontend/components/apps/core/js/instance-manager.js
index 5471084..8fa6b51 100644
--- a/containers/libreportal/frontend/components/apps/core/js/instance-manager.js
+++ b/containers/libreportal/frontend/components/apps/core/js/instance-manager.js
@@ -85,7 +85,7 @@ class InstanceManager {
         <div class="lp-instance-row">
           <label class="lp-instance-field">
             <span>Domain</span>
-            <select id="lp-instance-domain">${domainOptions}</select>
+            <select id="lp-instance-domain" class="form-control">${domainOptions}</select>
           </label>
           <label class="lp-instance-field">
             <span>Subdomain</span>
diff --git a/containers/libreportal/frontend/components/apps/port-manager/css/port-manager.css b/containers/libreportal/frontend/components/apps/port-manager/css/port-manager.css
index fd0a918..07e713b 100755
--- a/containers/libreportal/frontend/components/apps/port-manager/css/port-manager.css
+++ b/containers/libreportal/frontend/components/apps/port-manager/css/port-manager.css
@@ -405,6 +405,14 @@ div.panel-fields > div.form-field[id^="PORT_"] {
   transform: scale(1.2);
 }
 
+/* Themed dropdowns (custom-select.js) inside the dense port grid: match the
+   compact metrics of the sibling text inputs above so rows line up. */
+.port-field .custom-select-button {
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
 .port-manager-hidden {
   display: none;
 }
diff --git a/containers/libreportal/frontend/core/forms/js/custom-select.js b/containers/libreportal/frontend/core/forms/js/custom-select.js
index 917203b..972c0f3 100644
--- a/containers/libreportal/frontend/core/forms/js/custom-select.js
+++ b/containers/libreportal/frontend/core/forms/js/custom-select.js
@@ -282,8 +282,19 @@
 
   // Classes that participate in the themed dropdown. Add more here
   // (or use data-no-enhance to opt a specific <select> out) as new
-  // dropdown surfaces appear in the app.
-  const ENHANCE_CLASSES = ['form-control', 'theme-selector'];
+  // dropdown surfaces appear in the app. Only <select>s with one of
+  // these classes are enhanced — same-class <input>/<textarea> are
+  // skipped (shouldEnhance requires an HTMLSelectElement).
+  const ENHANCE_CLASSES = [
+    'form-control', 'theme-selector',
+    // Per-app config forms (components/apps/core/config-form.js) and the
+    // app tools forms — these render selects (theme, domain, backup
+    // strategy, gluetun, …) with these classes instead of form-control.
+    'form-select', 'form-input', 'config-input',
+    // Port manager grid (components/apps/port-manager) — one select per column.
+    'port-service', 'port-protocol', 'port-access', 'port-traefik',
+    'port-button-enabled', 'port-login-required', 'port-recommended',
+  ];
   const ENHANCE_SELECTOR = ENHANCE_CLASSES.map(c => `select.${c}`).join(',');
 
   function shouldEnhance(el) {