Local services (#1614)

files/app/main/status/e/local-services.ut

@@ -319,19 +319,20 @@ if (f) {
         traffic may be included. When forwarding a port range, specify the range as <b>start-end</b>.
         The top line of each entry describes where the traffic originates, the bottom line where it is destined.")}}
         {% } %}
-        <div class="cols port-forwards-label">
+        <div class="port-forwards-label">
             <div>addresses</div>
             <div>ports</div>
             <div>protocol</div>
             <div>enabled</div>
+            <div style="min-width:24px"></div>
         </div>
         <form>
             <div id="port-forwards">{%
                 for (let i = 0; i < length(ports); i++) {
                     const p = ports[i];
                     %}<div class="noborder forward adr">
-                        <div>
-                            <div>
+                        <div class="cols">
+                            <div class="cols">
                                 {% if (dhcp.mode === 0) { %}
                                 <select name="port_src">
                                     <option value="wifi" {{p.src == "wifi" ? "selected" : ""}}>Mesh</option>
@@ -351,7 +352,7 @@ if (f) {
                                 </select>
                                 <label class="switch"><input type="checkbox" name="port_enable" {{p.enabled ? "checked" : ""}}></label>
                             </div>
-                            <div>
+                            <div class="cols">
                                 <select name="port_dst">
                                 {%
                                     for (let j = as[3]; j <= ae[3]; j++) {
@@ -362,6 +363,8 @@ if (f) {
                                 %}
                                 </select>
                                 <input name="port_dport" type="text" required placeholder="LAN Port" pattern="{{constants.patPort}}" value="{{p.dport}}">
+                                <div></div>
+                                <div></div>
                             </div>
                         </div>
                         <button>-</button>
@@ -427,7 +430,7 @@ if (f) {
                 return;
             }
             const ports = [];
-            const rows = htmx.findAll("#port-forwards .cols .row");
+            const rows = htmx.findAll("#port-forwards .forward");
             for (let i = 0; i < rows.length; i++) {
                 const r = rows[i];
                 const src = htmx.find(r, "[name=port_src]");

files/app/resource/css/admin.css

@@ -799,37 +799,63 @@ label.switch
     flex: 0;
     padding-right: 6px;
 }
-#ctrl-modal #port-forwards > .cols
+#ctrl-modal .port-forwards-label
+{
+    display: flex;
+}
+#ctrl-modal .port-forwards-label div
+{
+    margin-right: 2px;
+}
+#ctrl-modal #port-forwards > .adr
 {
     padding-bottom: 6px;
 }
+#ctrl-modal #port-forwards > .adr > .cols > .cols
+{
+    flex-wrap: nowrap;
+    min-width: 100%;
+}
+#ctrl-modal #port-forwards > .adr > .cols > .cols > *
+{
+    margin: 2px 2px 0 0;
+}
 #ctrl-modal #port-forwards label.switch input
 {
-    top: 1px;
-    height: 28px;
+    top: -3px;
     margin-left: 0;
 }
 #ctrl-modal #port-forwards select[name=port_src],
-#ctrl-modal #port-forwards input[name=port_src],
-#ctrl-modal #port-forwards select[name=port_dst]
+#ctrl-modal #port-forwards select[name=port_dst],
+#ctrl-modal .port-forwards-label div:nth-child(1)
 {
     width: 180px;
-    max-width: 180px;
-    overflow-x: hidden;
+    min-width: 180px;
+    flex-grow: 1;
 }
 #ctrl-modal #port-forwards input[name=port_sports],
 #ctrl-modal #port-forwards input[name=port_dport],
 #ctrl-modal .port-forwards-label div:nth-child(2)
 {
     width: 110px;
+    min-width: 110px;
+    flex-grow: 1;
 }
+#ctrl-modal #port-forwards select[name=port_type],
+#ctrl-modal #port-forwards div:nth-child(3),
 #ctrl-modal .port-forwards-label div:nth-child(3)
 {
     width: 92px;
+    min-width: 92px;
+    flex: 0;
 }
+#ctrl-modal #port-forwards label,
+#ctrl-modal #port-forwards div:nth-child(4),
 #ctrl-modal .port-forwards-label div:nth-child(4)
 {
     width: 56px;
+    min-width: 56px;
+    flex: 0;
 }
 #ctrl-modal:has(#port-forwards:empty) .port-forwards-label
 {

files/app/resource/css/mobile.css

@@ -188,6 +188,20 @@ body.mobile #ctrl-modal #local-services .service .cols:last-child select
 {
     width: 120px;
 }
+body.mobile #ctrl-modal #port-forwards select[name=port_src],
+body.mobile #ctrl-modal #port-forwards select[name=port_dst],
+body.mobile #ctrl-modal .port-forwards-label div:nth-child(1)
+{
+    width: 90px;
+    min-width: 90px;
+}
+body.mobile #ctrl-modal #port-forwards input[name=port_sports],
+body.mobile #ctrl-modal #port-forwards input[name=port_dport],
+body.mobile #ctrl-modal .port-forwards-label div:nth-child(2)
+{
+    width: 70px;
+    min-width: 70px;
+}
 
 body.mobile .tunnel .cols .cols.pwnw input[name=network]
 {