From 387c3813000be8d64e58da0c82014574729545a8 Mon Sep 17 00:00:00 2001
From: Monviech <79600909+Monviech@users.noreply.github.com>
Date: Fri, 28 Feb 2025 13:45:51 +0100
Subject: [PATCH] mvc/view: Ensure fields stay aligned relatively to another
 when headers are used in forms (#8364)

* mvc/view: Ensure fields stay aligned relatively to another when headers are used in forms.

* mvc/view: Add style that forces consistency in smaller viewport sizes in base forms.

* mvc/view: Make classes more selective so the style does not leak when modal-dialog and form-inline exist in the same view (e.g. dnsmasq).

* mvc/view: Ensure the change in base_dialog is backwards compatible when msgzone_width is defined (e.g. in Intrusion Detection)
---
 .../views/layout_partials/base_dialog.volt    | 34 +++++++++++++++----
 .../app/views/layout_partials/base_form.volt  | 29 +++++++++++-----
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt b/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt
index 9338c0c1f..55060d5ad 100644
--- a/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt
+++ b/src/opnsense/mvc/app/views/layout_partials/base_dialog.volt
@@ -1,5 +1,5 @@
 {#
- # Copyright (c) 2014-2015 Deciso B.V.
+ # Copyright (c) 2014-2025 Deciso B.V.
  # All rights reserved.
  #
  # Redistribution and use in source and binary forms, with or without modification,
@@ -66,11 +66,17 @@
             <div class="modal-body">
                 <form id="frm_{{base_dialog_id}}">
                   <div class="table-responsive">
-                    <table class="table table-striped table-condensed">
+                    <table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
                         <colgroup>
+                        {% if msgzone_width is defined %}
                             <col class="col-md-3"/>
-                            <col class="col-md-{{ 12-3-msgzone_width|default(5) }}"/>
-                            <col class="col-md-{{ msgzone_width|default(5) }}"/>
+                            <col class="col-md-{{ 12 - 3 - msgzone_width }}"/>
+                            <col class="col-md-{{ msgzone_width }}"/>
+                        {% else %}
+                            <col style="width: 25%;" />
+                            <col style="width: 40%;" />
+                            <col style="width: 35%;" />
+                        {% endif %}
                         </colgroup>
                         <tbody>
                         {%  if base_dialog_advanced|default(false) or base_dialog_help|default(false) %}
@@ -100,11 +106,17 @@
     </table>
   </div>
   <div class="table-responsive {{field['style']|default('')}}">
-    <table class="table table-striped table-condensed">
+    <table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
         <colgroup>
+        {% if msgzone_width is defined %}
             <col class="col-md-3"/>
-            <col class="col-md-{{ 12-3-msgzone_width|default(5) }}"/>
-            <col class="col-md-{{ msgzone_width|default(5) }}"/>
+            <col class="col-md-{{ 12 - 3 - msgzone_width }}"/>
+            <col class="col-md-{{ msgzone_width }}"/>
+        {% else %}
+            <col style="width: 25%;" />
+            <col style="width: 40%;" />
+            <col style="width: 35%;" />
+        {% endif %}
         </colgroup>
         <thead style="cursor: pointer;">
           <tr{% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
@@ -144,3 +156,11 @@
         </div>
     </div>
 </div>
+
+{# Ensure all fields stay the same width relative to each other inside the modal #}
+<style>
+    .modal-dialog .bootstrap-select:not(.bs-container),
+    .modal-dialog .tokenize ul.tokens-container {
+        width: 100% !important;
+    }
+</style>
diff --git a/src/opnsense/mvc/app/views/layout_partials/base_form.volt b/src/opnsense/mvc/app/views/layout_partials/base_form.volt
index b09117a15..193d20a45 100644
--- a/src/opnsense/mvc/app/views/layout_partials/base_form.volt
+++ b/src/opnsense/mvc/app/views/layout_partials/base_form.volt
@@ -1,5 +1,5 @@
 {#
- # Copyright (c) 2014-2015 Deciso B.V.
+ # Copyright (c) 2014-2025 Deciso B.V.
  # All rights reserved.
  #
  # Redistribution and use in source and binary forms, with or without modification,
@@ -52,11 +52,11 @@
 {% endfor %}
 <form id="{{base_form_id}}" class="form-inline" data-title="{{data_title|default('')}}">
   <div class="table-responsive">
-    <table class="table table-striped table-condensed">
+    <table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
         <colgroup>
-            <col class="col-md-3"/>
-            <col class="col-md-4"/>
-            <col class="col-md-5"/>
+            <col style="width: 25%;" />
+            <col style="width: 40%;" />
+            <col style="width: 35%;" />
         </colgroup>
         <tbody>
 {% if advanced|default(false) or help|default(false) %}
@@ -78,11 +78,11 @@
     </table>
   </div>
   <div class="table-responsive {{field['style']|default('')}}">
-    <table class="table table-striped table-condensed table-responsive">
+    <table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
         <colgroup>
-            <col class="col-md-3"/>
-            <col class="col-md-4"/>
-            <col class="col-md-5"/>
+            <col style="width: 25%;" />
+            <col style="width: 40%;" />
+            <col style="width: 35%;" />
         </colgroup>
         <thead style="cursor: pointer;" class="{{field['style']|default('')}}">
           <tr {% if field['advanced']|default(false)=='true' %} data-advanced="true"{% endif %}>
@@ -116,3 +116,14 @@
     </table>
   </div>
 </form>
+
+{# Ensure all fields stay the same width relative to each other inside the modal #}
+<style>
+  @media (max-width: 760px) {
+    .form-inline .bootstrap-select:not(.bs-container),
+    .form-inline .tokenize ul.tokens-container {
+      width: 100% !important;
+      min-width: 0 !important;
+    }
+  }
+</style>