From 8b378cd4e7ae7f3075d8945dcdaf29dff6047657 Mon Sep 17 00:00:00 2001
From: Franco Fichtner <franco@opnsense.org>
Date: Thu, 16 Nov 2023 11:29:16 +0100
Subject: [PATCH] ui: unify dropdown width

Fix a nasty scroll bar bug with alias proto selector, style
and adjust all manual widths accordingly.  For a strange reason
the text inputs are 2px shorter in the base forms than the modals
and the static pages so adjust the width to 346 in that case.
---
 .../mvc/app/views/OPNsense/Firewall/alias.volt     | 14 ++++++++++----
 .../app/views/layout_partials/form_input_tr.volt   |  2 +-
 src/www/firewall_nat_1to1_edit.php                 |  2 +-
 src/www/firewall_nat_edit.php                      |  2 +-
 src/www/firewall_nat_npt_edit.php                  |  2 +-
 src/www/firewall_nat_out_edit.php                  |  2 +-
 src/www/firewall_rules_edit.php                    |  2 +-
 7 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/opnsense/mvc/app/views/OPNsense/Firewall/alias.volt b/src/opnsense/mvc/app/views/OPNsense/Firewall/alias.volt
index 3c3ad9a77..1c7624696 100644
--- a/src/opnsense/mvc/app/views/OPNsense/Firewall/alias.volt
+++ b/src/opnsense/mvc/app/views/OPNsense/Firewall/alias.volt
@@ -33,6 +33,10 @@
         }
     }
 
+    .dropdown-fixup {
+        overflow-x: hidden !important;
+    }
+
     .alias_table {
         background-color: transparent !important;
     }
@@ -333,6 +337,8 @@
                 case 'geoip':
                     $("#alias_type_geoip").show();
                     $("#alias\\.proto").selectpicker('show');
+                    /* work around JS injection of nasty overflow scroll bar being injected */
+                    $("#row_alias\\.type > td > .dropdown:last > .dropdown-menu > .inner").addClass('dropdown-fixup');
                     break;
                 case 'asn':
                     $("#alias_type_default").show();
@@ -766,8 +772,8 @@
                                         </div>
                                     </td>
                                     <td>
-                                        <select id="alias.type" class="selectpicker" data-width="200px"></select>
-                                        <select id="alias.proto" multiple="multiple" title="" class="selectpicker" data-width="110px"></select>
+                                        <select id="alias.type" class="selectpicker" data-width="245px"></select>
+                                        <select id="alias.proto" multiple="multiple" title="{{lang._('None')}}" class="selectpicker" data-width="100px"></select>
                                     </td>
                                     <td>
                                         <span class="help-block" id="help_block_alias.type"></span>
@@ -781,7 +787,7 @@
                                         </div>
                                     </td>
                                     <td>
-                                        <select id="alias.categories"  multiple="multiple" class="tokenize"></select>
+                                        <select id="alias.categories" multiple="multiple" class="tokenize" data-width="348px"></select>
                                         <span class="hidden" data-for="help_for_alias.categories">
                                             {{lang._('For grouping purposes you may select multiple groups here to organize items.')}}
                                         </span>
@@ -835,7 +841,7 @@
                                             <select multiple="multiple"
                                                     id="alias.content"
                                                     class="tokenize"
-                                                    data-width="334px"
+                                                    data-width="348px"
                                                     data-allownew="true"
                                                     data-nbdropdownelements="10"
                                                     data-live-search="true"
diff --git a/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt b/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt
index b063375f2..517080140 100644
--- a/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt
+++ b/src/opnsense/mvc/app/views/layout_partials/form_input_tr.volt
@@ -79,7 +79,7 @@
                     id="{{ id }}"
                     class="{{style|default('selectpicker')}}"
                     {% if hint|default(false) %}data-hint="{{hint}}"{% endif %}
-                    data-width="{{width|default("334px")}}"
+                    data-width="{{width|default("346px")}}"
                     data-allownew="{{allownew|default("false")}}"
                     data-sortable="{{sortable|default("false")}}"
                     data-live-search="true"
diff --git a/src/www/firewall_nat_1to1_edit.php b/src/www/firewall_nat_1to1_edit.php
index c4eadee54..76e587538 100644
--- a/src/www/firewall_nat_1to1_edit.php
+++ b/src/www/firewall_nat_1to1_edit.php
@@ -422,7 +422,7 @@ include("head.inc");
                   <tr>
                     <td><a id="help_for_category" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Category"); ?></td>
                     <td>
-                      <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-width="334px" data-live-search="true">
+                      <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-width="348px" data-live-search="true">
   <?php
                       foreach ((new OPNsense\Firewall\Category())->iterateCategories() as $category):
                         $catname = htmlspecialchars($category['name'], ENT_QUOTES | ENT_HTML401);?>
diff --git a/src/www/firewall_nat_edit.php b/src/www/firewall_nat_edit.php
index 015954c9f..c926baf06 100644
--- a/src/www/firewall_nat_edit.php
+++ b/src/www/firewall_nat_edit.php
@@ -995,7 +995,7 @@ $( document ).ready(function() {
                 <tr>
                   <td><a id="help_for_category" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Category"); ?></td>
                   <td>
-                    <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-width="334px" data-live-search="true">
+                    <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-width="348px" data-live-search="true">
 <?php
                     foreach ((new OPNsense\Firewall\Category())->iterateCategories() as $category):
                       $catname = htmlspecialchars($category['name'], ENT_QUOTES | ENT_HTML401);?>
diff --git a/src/www/firewall_nat_npt_edit.php b/src/www/firewall_nat_npt_edit.php
index 0063af302..494680ff9 100644
--- a/src/www/firewall_nat_npt_edit.php
+++ b/src/www/firewall_nat_npt_edit.php
@@ -234,7 +234,7 @@ $( document ).ready(function() {
                   <tr>
                     <td><a id="help_for_category" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Category"); ?></td>
                     <td>
-                      <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-width="334px" data-live-search="true">
+                      <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-width="348px" data-live-search="true">
   <?php
                       foreach ((new OPNsense\Firewall\Category())->iterateCategories() as $category):
                         $catname = htmlspecialchars($category['name'], ENT_QUOTES | ENT_HTML401);?>
diff --git a/src/www/firewall_nat_out_edit.php b/src/www/firewall_nat_out_edit.php
index db8cbeb7e..ef3691226 100644
--- a/src/www/firewall_nat_out_edit.php
+++ b/src/www/firewall_nat_out_edit.php
@@ -815,7 +815,7 @@ include("head.inc");
                 <tr>
                   <td><a id="help_for_category" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Category"); ?></td>
                   <td>
-                    <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-width="334px" data-live-search="true">
+                    <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-width="348px" data-live-search="true">
 <?php
                     foreach ((new OPNsense\Firewall\Category())->iterateCategories() as $category):
                       $catname = htmlspecialchars($category['name'], ENT_QUOTES | ENT_HTML401);?>
diff --git a/src/www/firewall_rules_edit.php b/src/www/firewall_rules_edit.php
index ed03e85cc..ae561746c 100644
--- a/src/www/firewall_rules_edit.php
+++ b/src/www/firewall_rules_edit.php
@@ -1306,7 +1306,7 @@ include("head.inc");
                   <tr>
                     <td><a id="help_for_category" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Category"); ?></td>
                     <td>
-                      <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-sortable="false" data-width="334px" data-live-search="true">
+                      <select name="category[]" id="category" multiple="multiple" class="tokenize" data-allownew="true" data-sortable="false" data-width="348px" data-live-search="true">
 <?php
                       foreach ((new OPNsense\Firewall\Category())->iterateCategories() as $category):
                         $catname = htmlspecialchars($category['name'], ENT_QUOTES | ENT_HTML401);?>