From ac0dc0ff89df099d8d74f2f2cbaf9f4de6762dc7 Mon Sep 17 00:00:00 2001
From: Franco Fichtner <franco@opnsense.org>
Date: Wed, 22 Nov 2023 14:30:32 +0100
Subject: [PATCH] firewall: fix bootstrap-select update fallout

data-width="auto" use is probably still broken in a few places
but better fix these per user report.
---
 src/www/firewall_nat_1to1_edit.php | 38 +++++++-------
 src/www/firewall_nat_edit.php      | 48 ++++++++---------
 src/www/firewall_nat_npt_edit.php  | 10 ++--
 src/www/firewall_nat_out_edit.php  | 84 +++++++++++++++---------------
 src/www/firewall_rules_edit.php    | 28 +++++-----
 src/www/firewall_scrub_edit.php    | 54 +++++++++----------
 6 files changed, 129 insertions(+), 133 deletions(-)

diff --git a/src/www/firewall_nat_1to1_edit.php b/src/www/firewall_nat_1to1_edit.php
index 76e587538..a933142fd 100644
--- a/src/www/firewall_nat_1to1_edit.php
+++ b/src/www/firewall_nat_1to1_edit.php
@@ -271,8 +271,7 @@ include("head.inc");
                   <tr>
                     <td><a id="help_for_interface" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Interface"); ?></td>
                     <td>
-                      <div class="input-group">
-                        <select name="interface" class="selectpicker" data-width="auto" data-live-search="true">
+                        <select name="interface" class="selectpicker" data-width="348px" data-live-search="true">
   <?php
                           foreach (legacy_config_get_interfaces(array("enable" => true)) as $iface => $ifdetail): ?>
                           <option value="<?=$iface;?>" <?= $iface == $pconfig['interface'] ? "selected=\"selected\"" : ""; ?>>
@@ -280,7 +279,6 @@ include("head.inc");
                           </option>
                           <?php endforeach; ?>
                         </select>
-                      </div>
                       <div class="hidden" data-for="help_for_interface">
                         <?=gettext("Choose which interface this rule applies to"); ?>.<br />
                         <?=gettext("Hint: in most cases, you'll want to use WAN here"); ?>
@@ -290,7 +288,7 @@ include("head.inc");
                   <tr>
                     <td><a id="help_for_type" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Type"); ?></td>
                     <td>
-                      <select name="type" class="selectpicker" data-width="auto" id="nattype">
+                      <select name="type" class="selectpicker" data-width="348px" id="nattype">
                           <option value="binat" <?=$pconfig['type'] == 'binat' || empty($pconfig['type']) ? "selected=\"selected\"" : ""; ?>>
                             <?=gettext("BINAT");?>
                           </option>
@@ -328,10 +326,10 @@ include("head.inc");
                   <tr>
                       <td><a id="help_for_src" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Source"); ?></td>
                       <td>
-                        <table class="table table-condensed">
+                        <table style="max-width: 348px">
                           <tr>
                             <td>
-                              <select name="src" id="src" class="selectpicker" data-live-search="true" data-size="5" data-width="auto" data-hide-disabled="true">
+                              <select name="src" id="src" class="selectpicker" data-live-search="true" data-size="5" data-width="348px" data-hide-disabled="true">
                                 <option data-other=true value="<?=$pconfig['src'];?>" <?=!is_specialnet($pconfig['src']) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                                 <optgroup label="<?=gettext("Aliases");?>" data-type="nat">
   <?php                        foreach (legacy_list_aliases("network") as $alias):
@@ -348,17 +346,19 @@ include("head.inc");
                             </select>
                           </td>
                         </tr>
+                      </table>
+                      <!-- updates to "other" option in src -->
+                      <table style="max-width: 348px">
                         <tr>
-                          <td>
-                            <div class="input-group">
-                            <!-- updates to "other" option in src -->
+                          <td style="width:285px">
                             <input type="text" for="src" value="<?=$pconfig['src'];?>" aria-label="<?=gettext("Source address");?>"/>
-                            <select name="srcmask" class="selectpicker input-group-btn" data-size="5" id="srcmask"  data-width="auto" for="src" >
+                          </td>
+                          <td>
+                            <select name="srcmask" class="selectpicker" data-size="5" id="srcmask" data-width="70px" for="src" >
                             <?php for ($i = 32; $i > 0; $i--): ?>
                               <option value="<?=$i;?>" <?= $i == $pconfig['srcmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
                             <?php endfor; ?>
                             </select>
-                          </div>
                           </td>
                         </tr>
                       </table>
@@ -379,10 +379,10 @@ include("head.inc");
                   <tr>
                     <td><a id="help_for_dst" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Destination"); ?></td>
                     <td>
-                      <table class="table table-condensed">
+                      <table style="max-width:348px">
                         <tr>
                           <td>
-                            <select name="dst" id="dst" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                            <select name="dst" id="dst" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                               <option data-other=true value="<?=$pconfig['dst'];?>" <?=!is_specialnet($pconfig['dst']) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                               <optgroup label="<?=gettext("Aliases");?>">
   <?php                        foreach (legacy_list_aliases("network") as $alias):
@@ -399,17 +399,19 @@ include("head.inc");
                             </select>
                           </td>
                         </tr>
+                      </table>
+                      <!-- updates to "other" option in dst -->
+                      <table style="max-width:348px">
                         <tr>
-                          <td>
-                            <div class="input-group">
-                            <!-- updates to "other" option in dst -->
+                          <td style="width:285px">
                             <input type="text" for="dst" value="<?= !is_specialnet($pconfig['dst']) ? $pconfig['dst'] : "";?>" aria-label="<?=gettext("Destination address");?>"/>
-                            <select name="dstmask" class="selectpicker input-group-btn" data-size="5" id="dstmask"  data-width="auto" for="dst" >
+                          </td>
+                          <td>
+                            <select name="dstmask" class="selectpicker" data-size="5" id="dstmask"  data-width="70px" for="dst" >
                             <?php for ($i = 32; $i > 0; $i--): ?>
                               <option value="<?=$i;?>" <?= $i == $pconfig['dstmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
                             <?php endfor; ?>
                             </select>
-                          </div>
                           </td>
                         </tr>
                       </table>
diff --git a/src/www/firewall_nat_edit.php b/src/www/firewall_nat_edit.php
index c926baf06..f3ff6dd88 100644
--- a/src/www/firewall_nat_edit.php
+++ b/src/www/firewall_nat_edit.php
@@ -559,8 +559,7 @@ $( document ).ready(function() {
                 <tr>
                   <td><a id="help_for_interface" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Interface"); ?></td>
                   <td>
-                    <div class="input-group">
-                      <select name="interface[]" class="selectpicker" data-width="auto" data-live-search="true" multiple="multiple">
+                      <select name="interface[]" class="selectpicker" data-width="348px" data-live-search="true" multiple="multiple">
 <?php
                         foreach (legacy_config_get_interfaces(array("enable" => true)) as $iface => $ifdetail): ?>
                         <option value="<?=$iface;?>" <?= in_array($iface, $pconfig['interface'] ?? []) ? "selected=\"selected\"" : ""; ?>>
@@ -568,7 +567,6 @@ $( document ).ready(function() {
                         </option>
                         <?php endforeach; ?>
                       </select>
-                    </div>
                     <div class="hidden" data-for="help_for_interface">
                       <?=gettext("Choose which interface this rule applies to."); ?><br />
                       <?=gettext("Hint: in most cases, you'll want to use WAN here."); ?>
@@ -578,7 +576,7 @@ $( document ).ready(function() {
                 <tr>
                   <td><a id="help_for_ipv46" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("TCP/IP Version");?></td>
                   <td>
-                    <select name="ipprotocol" class="selectpicker" data-width="auto" data-live-search="true" data-size="5" >
+                    <select name="ipprotocol" class="selectpicker" data-width="348px" data-live-search="true" data-size="5" >
 <?php
                     foreach (array('inet' => 'IPv4','inet6' => 'IPv6', 'inet46' => 'IPv4+IPv6') as $proto => $name): ?>
                     <option value="<?=$proto;?>" <?= $proto == $pconfig['ipprotocol'] ? "selected=\"selected\"" : "";?>>
@@ -595,15 +593,13 @@ $( document ).ready(function() {
                 <tr>
                   <td><a id="help_for_proto" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Protocol"); ?></td>
                   <td>
-                    <div class="input-group">
-                      <select id="proto" name="protocol" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                      <select id="proto" name="protocol" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
 <?php foreach (get_protocols() as $proto): ?>
                         <option value="<?=strtolower($proto);?>" <?= strtolower($proto) == $pconfig['protocol'] ? "selected=\"selected\"" : ""; ?>>
                           <?= $proto ?>
                         </option>
 <?php endforeach ?>
               </select>
-                    </div>
                     <div class="hidden" data-for="help_for_proto">
                       <?=gettext("Choose which IP protocol " ."this rule should match."); ?><br/>
                       <?=gettext("Hint: in most cases, you should specify"); ?> <em><?=gettext("TCP"); ?></em> &nbsp;<?=gettext("here."); ?>
@@ -631,10 +627,10 @@ $( document ).ready(function() {
                 <tr class="advanced_opt_src hidden">
                     <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Source"); ?></td>
                     <td>
-                      <table class="table table-condensed">
+                      <table style="max-width: 348px">
                         <tr>
                           <td>
-                            <select name="src" id="src" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                            <select name="src" id="src" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                               <option data-other=true value="<?=$pconfig['src'];?>" <?=!is_specialnet($pconfig['src']) && !is_alias($pconfig['src']) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                               <optgroup label="<?=gettext("Aliases");?>">
 <?php                        foreach (legacy_list_aliases("network") as $alias):
@@ -651,17 +647,19 @@ $( document ).ready(function() {
                           </select>
                         </td>
                       </tr>
-                      <tr>
-                        <td>
-                          <div class="input-group">
+                      </table>
+                      <table style="max-width: 348px">
+                        <tr>
+                          <td style="width:285px">
                           <!-- updates to "other" option in  src -->
                           <input type="text" id="src_address" for="src" value="<?=$pconfig['src'];?>" aria-label="<?=gettext("Source address");?>"/>
-                          <select name="srcmask" data-network-id="src_address" class="selectpicker ipv4v6net input-group-btn" data-size="5" id="srcmask"  data-width="auto" for="src" >
+                        </td>
+                        <td>
+                          <select name="srcmask" data-network-id="src_address" class="selectpicker ipv4v6net" data-size="5" id="srcmask"  data-width="70px" for="src" >
                           <?php for ($i = 128; $i > 0; $i--): ?>
                             <option value="<?=$i;?>" <?= $i == $pconfig['srcmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
                           <?php endfor; ?>
                           </select>
-                        </div>
                         </td>
                       </tr>
                     </table>
@@ -745,10 +743,10 @@ $( document ).ready(function() {
                 <tr>
                   <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Destination"); ?></td>
                   <td>
-                    <table class="table table-condensed">
+                    <table style="max-width: 348px">
                       <tr>
                         <td>
-                          <select name="dst" id="dst" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                          <select name="dst" id="dst" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                             <option data-other=true value="<?=$pconfig['dst'];?>" <?=!is_specialnet($pconfig['dst']) && !is_alias($pconfig['dst']) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                             <optgroup label="<?=gettext("Aliases");?>">
 <?php                        foreach (legacy_list_aliases("network") as $alias):
@@ -795,17 +793,19 @@ $( document ).ready(function() {
                           </select>
                         </td>
                       </tr>
+                    </table>
+                    <!-- updates to "other" option in dst -->
+                    <table style="max-width: 348px">
                       <tr>
-                        <td>
-                          <div class="input-group">
-                          <!-- updates to "other" option in dst -->
+                        <td style="width: 285px">
                           <input type="text" id="dst_address" for="dst" value="<?= !is_specialnet($pconfig['dst']) ? $pconfig['dst'] : "";?>" aria-label="<?=gettext("Destination address");?>"/>
-                          <select name="dstmask" data-network-id="dst_address" class="selectpicker ipv4v6net input-group-btn" data-size="5" id="dstmask"  data-width="auto" for="dst" >
+                        </td>
+                        <td>
+                          <select name="dstmask" data-network-id="dst_address" class="selectpicker ipv4v6net" data-size="5" id="dstmask" data-width="70px" for="dst">
                           <?php for ($i = 128; $i > 0; $i--): ?>
                             <option value="<?=$i;?>" <?= $i == $pconfig['dstmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
                           <?php endfor; ?>
                           </select>
-                        </div>
                         </td>
                       </tr>
                     </table>
@@ -876,10 +876,10 @@ $( document ).ready(function() {
                 <tr class="act_no_rdr">
                   <td><a id="help_for_localip" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Redirect target IP"); ?></td>
                   <td>
-                    <table class="table table-condensed">
+                    <table style="max-width: 348px">
                       <tr>
                         <td>
-                          <select name="target" id="target" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                          <select name="target" id="target" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                             <option data-other=true value="<?=$pconfig['target'];?>" <?=!is_alias($pconfig['target']) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                             <optgroup label="<?=gettext("Aliases");?>">
 <?php
@@ -893,10 +893,8 @@ $( document ).ready(function() {
                       </tr>
                       <tr>
                         <td>
-                          <div class="input-group">
                           <!-- updates to "other" option in target -->
                           <input type="text" id="target_address" for="target" value="<?=$pconfig['target'];?>" aria-label="<?=gettext("Redirect target IP");?>"/>
-                        </div>
                         </td>
                       </tr>
                     </table>
diff --git a/src/www/firewall_nat_npt_edit.php b/src/www/firewall_nat_npt_edit.php
index 494680ff9..2c5418dba 100644
--- a/src/www/firewall_nat_npt_edit.php
+++ b/src/www/firewall_nat_npt_edit.php
@@ -177,8 +177,7 @@ $( document ).ready(function() {
                   <tr>
                     <td><a id="help_for_interface" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Interface"); ?></td>
                     <td>
-                      <div class="input-group">
-                        <select name="interface" class="selectpicker" data-width="auto" data-live-search="true">
+                        <select name="interface" class="selectpicker" data-width="348px" data-live-search="true">
   <?php
                           foreach (legacy_config_get_interfaces(array("enable" => true)) as $iface => $ifdetail): ?>
                           <option value="<?=$iface;?>" <?= $iface == $pconfig['interface'] ? "selected=\"selected\"" : ""; ?>>
@@ -186,7 +185,6 @@ $( document ).ready(function() {
                           </option>
                           <?php endforeach; ?>
                         </select>
-                      </div>
                       <div class="hidden" data-for="help_for_interface">
                         <?=gettext("Choose which interface this rule applies to"); ?>.<br />
                         <?=gettext("Hint: in most cases, you'll want to use WAN here"); ?>
@@ -196,13 +194,13 @@ $( document ).ready(function() {
                   <tr>
                     <td><a id="help_for_src" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Internal IPv6 Prefix"); ?></td>
                     <td>
-                      <table style="border:0;">
+                      <table style="max-width:348px;">
                         <tr>
-                          <td style="width:348px">
+                          <td style="width:285px">
                             <input name="src" type="text" value="<?=$pconfig['src'];?>" aria-label="<?=gettext("Internal IPv6 Prefix");?>"/>
                           </td>
                           <td>
-                            <select name="srcmask" class="selectpicker" data-size="5"  data-width="auto">
+                            <select name="srcmask" class="selectpicker" data-size="5"  data-width="70px">
                               <?php for ($i = 128; $i > 0; $i--): ?>
                                 <option value="<?=$i;?>" <?= $i == $pconfig['srcmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
                               <?php endfor; ?>
diff --git a/src/www/firewall_nat_out_edit.php b/src/www/firewall_nat_out_edit.php
index ef3691226..65eb02fec 100644
--- a/src/www/firewall_nat_out_edit.php
+++ b/src/www/firewall_nat_out_edit.php
@@ -447,18 +447,15 @@ include("head.inc");
                 <tr>
                   <td><a id="help_for_interface" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Interface"); ?></td>
                   <td>
-                    <div class="input-group">
-                      <select name="interface" class="selectpicker" data-width="auto" data-live-search="true">
-<?php
-                        foreach (legacy_config_get_interfaces(array("enable" => true)) as $iface => $ifdetail): ?>
+                      <select name="interface" class="selectpicker" data-width="348px" data-live-search="true">
+<?php foreach (legacy_config_get_interfaces(array("enable" => true)) as $iface => $ifdetail): ?>
                         <option value="<?=$iface;?>" <?= $iface == $pconfig['interface'] ? "selected=\"selected\"" : ""; ?>>
                           <?=htmlspecialchars($ifdetail['descr']);?>
                         </option>
-                        <?php endforeach; ?>
+<?php endforeach ?>
                       </select>
-                    </div>
                     <div class="hidden" data-for="help_for_interface">
-                      <?=gettext("Choose which interface this rule applies to"); ?>.<br />
+                      <?=gettext('Choose which interface this rule applies to.') ?><br />
                       <?=gettext("Hint: in most cases, you'll want to use WAN here"); ?>
                     </div>
                   </td>
@@ -466,7 +463,7 @@ include("head.inc");
                 <tr>
                   <td><a id="help_for_ipv46" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("TCP/IP Version");?></td>
                   <td>
-                    <select name="ipprotocol" class="selectpicker" data-width="auto" data-live-search="true" data-size="5" >
+                    <select name="ipprotocol" class="selectpicker" data-width="348px" data-live-search="true" data-size="5" >
 <?php
                     foreach (array('inet' => 'IPv4','inet6' => 'IPv6') as $proto => $name): ?>
                     <option value="<?=$proto;?>" <?= $proto == $pconfig['ipprotocol'] ? "selected=\"selected\"" : "";?>>
@@ -483,16 +480,13 @@ include("head.inc");
                 <tr>
                   <td><a id="help_for_proto" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Protocol"); ?></td>
                   <td>
-                    <div class="input-group">
-                      <select id="proto" name="protocol" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
-<?php                foreach (get_protocols() as $proto):
-?>
+                      <select id="proto" name="protocol" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
+<?php foreach (get_protocols() as $proto): ?>
               <option value="<?=strtolower($proto);?>" <?= strtolower($proto) == $pconfig['protocol'] ? "selected=\"selected\"" : ""; ?>><?=$proto;?></option>
-<?php                endforeach; ?>
+<?php endforeach ?>
               </select>
-                    </div>
                     <div class="hidden" data-for="help_for_proto">
-                      <?=gettext("Choose which IP protocol " ."this rule should match."); ?><br/>
+                      <?=gettext("Choose which IP protocol this rule should match."); ?><br/>
                       <?=gettext("Hint: in most cases, you should specify"); ?> <em><?=gettext("TCP"); ?></em> &nbsp;<?=gettext("here."); ?>
                     </div>
                   </td>
@@ -509,10 +503,10 @@ include("head.inc");
                 <tr>
                     <td><a id="help_for_source" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?= gettext('Source address') ?></td>
                     <td>
-                      <table class="table table-condensed">
+                      <table style="max-width: 348px">
                         <tr>
                           <td>
-                            <select name="source" id="source" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                            <select name="source" id="source" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                               <option data-other=true value="<?=$pconfig['source'];?>" <?=!is_alias($pconfig['source']) && !in_array($pconfig['source'],array('(self)','any'))  ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                               <optgroup label="<?=gettext("Aliases");?>">
 <?php                            foreach (legacy_list_aliases("network") as $alias):
@@ -529,17 +523,19 @@ include("head.inc");
                           </select>
                         </td>
                       </tr>
-                      <tr>
-                        <td>
-                          <div class="input-group">
-                          <!-- updates to "other" option in  source -->
-                          <input type="text" for="source" id="src_address" value="<?=$pconfig['source'];?>" aria-label="<?=gettext("Source address");?>"/>
-                          <select name="source_subnet"  data-network-id="src_address" class="selectpicker ipv4v6net input-group-btn" data-size="5" id="srcmask"  data-width="auto" for="source" >
-                          <?php for ($i = 128; $i > 0; $i--): ?>
-                            <option value="<?=$i;?>" <?= $i == $pconfig['source_subnet'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
-                          <?php endfor; ?>
-                          </select>
-                        </div>
+                    </table>
+                    <!-- updates to "other" option in  source -->
+                    <table style="max-width: 348px">
+                        <tr>
+                          <td style="width: 285px">
+                            <input type="text" for="source" id="src_address" value="<?=$pconfig['source'];?>" aria-label="<?=gettext("Source address");?>"/>
+                          </td>
+                          <td>
+                            <select name="source_subnet"  data-network-id="src_address" class="selectpicker ipv4v6net" data-size="5" id="srcmask" data-width="70px" for="source">
+                            <?php for ($i = 128; $i > 0; $i--): ?>
+                              <option value="<?=$i;?>" <?= $i == $pconfig['source_subnet'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
+                            <?php endfor; ?>
+                            </select>
                         </td>
                       </tr>
                     </table>
@@ -596,10 +592,10 @@ include("head.inc");
                 <tr>
                     <td><a id="help_for_destination" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?= gettext('Destination address') ?></td>
                     <td>
-                      <table class="table table-condensed">
+                      <table style="max-width: 348px">
                         <tr>
                           <td>
-                            <select name="destination" id="destination" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                            <select name="destination" id="destination" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                               <option data-other=true value="<?=$pconfig['destination'];?>" <?=!is_alias($pconfig['destination']) && $pconfig['destination'] != 'any' ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                               <optgroup label="<?=gettext("Aliases");?>">
 <?php                             foreach (legacy_list_aliases("network") as $alias):
@@ -616,17 +612,19 @@ include("head.inc");
                           </select>
                         </td>
                       </tr>
+                    </table>
+                    <!-- updates to "other" option in  source -->
+                    <table style="max-width: 348px">
                       <tr>
-                        <td>
-                          <div class="input-group">
-                          <!-- updates to "other" option in  source -->
+                        <td style="width:285px">
                           <input type="text" id="dst_address" for="destination" value="<?=$pconfig['destination'];?>" aria-label="<?=gettext("Destination address");?>"/>
-                          <select name="destination_subnet" data-network-id="dst_address" class="selectpicker ipv4v6net input-group-btn" id="dstmask" data-size="5" data-width="auto" for="destination" >
+                        </td>
+                        <td>
+                          <select name="destination_subnet" data-network-id="dst_address" class="selectpicker ipv4v6net" id="dstmask" data-size="5" data-width="auto" for="destination" >
                           <?php for ($i = 128; $i > 0; $i--): ?>
                             <option value="<?=$i;?>" <?= $i == $pconfig['destination_subnet'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
                           <?php endfor; ?>
                           </select>
-                        </div>
                         </td>
                       </tr>
                     </table>
@@ -674,10 +672,10 @@ include("head.inc");
                 <tr>
                     <td><a id="help_for_target" href="#" class="showhelp"><i class="fa fa-info-circle"></i></a> <?=gettext("Translation / target"); ?></td>
                     <td>
-                      <table class="table table-condensed">
+                      <table style="max-width: 348px">
                         <tr>
                           <td>
-                            <select name="targetip" id="targetip" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                            <select name="targetip" id="targetip" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                                 <option value="" <?= empty($pconfig['targetip']) ? "selected=\"selected\"" : "";?> > <?=gettext("Interface address");?> </option>
                                 <option data-other=true value="<?=$pconfig['targetip'];?>" <?= !empty($pconfig['targetip']) && !array_key_exists($pconfig['targetip'], formTranslateAddresses() ) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
 <?php                              foreach (formTranslateAddresses() as $optKey => $optValue): ?>
@@ -688,17 +686,19 @@ include("head.inc");
                             </select>
                           </td>
                         </tr>
+                      </table>
+		      <!-- updates to "other" option in  source -->
+                      <table style="max-width: 348px">
                         <tr>
-                          <td>
-                            <div class="input-group">
-                              <!-- updates to "other" option in  source -->
+                          <td style="width:285px">
                               <input type="text" id="targetip_text" for="targetip" value="<?=$pconfig['targetip'];?>" aria-label="<?=gettext("Translation address");?>"/>
-                              <select name="targetip_subnet" data-network-id="targetip_text" class="selectpicker ipv4v6net input-group-btn" id="targetip_subnet" data-size="5" data-width="auto" for="targetip" >
+                          </td>
+                          <td>
+                              <select name="targetip_subnet" data-network-id="targetip_text" class="selectpicker ipv4v6net" id="targetip_subnet" data-size="5" data-width="70px" for="targetip" >
                               <?php for ($i = 128; $i > 0; $i--): ?>
                                 <option value="<?=$i;?>" <?= $i == $pconfig['targetip_subnet'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
                               <?php endfor; ?>
                               </select>
-                            </div>
                           </td>
                         </tr>
                       </table>
diff --git a/src/www/firewall_rules_edit.php b/src/www/firewall_rules_edit.php
index ae561746c..6a5b44332 100644
--- a/src/www/firewall_rules_edit.php
+++ b/src/www/firewall_rules_edit.php
@@ -1059,10 +1059,10 @@ include("head.inc");
                   <tr>
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Source"); ?></td>
                       <td>
-                        <table class="table table-condensed">
+                        <table style="max-width: 348px">
                           <tr>
                             <td>
-                              <select <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?> name="src" id="src" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                              <select <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?> name="src" id="src" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                                 <option data-other=true value="<?=$pconfig['src'];?>" <?=!is_specialnet($pconfig['src']) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                                 <optgroup label="<?=gettext("Aliases");?>">
   <?php                        foreach (legacy_list_aliases("network") as $alias):
@@ -1082,18 +1082,18 @@ include("head.inc");
                         <tr>
                           <td>
                             <div>
-                              <table style="border:0;">
+                              <table style="max-width: 348px">
                                 <tbody>
                                   <tr>
-                                      <td style="width:348px">
+                                      <td style="width:285px">
                                         <!-- updates to "other" option in  src -->
                                         <input <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?>  type="text" id="src_address" for="src" value="<?=$pconfig['src'];?>" aria-label="<?=gettext("Source address");?>"/>
                                       </td>
                                       <td>
-                                        <select <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?> name="srcmask" data-network-id="src_address" class="selectpicker ipv4v6net" data-size="5" id="srcmask"  data-width="auto" for="src" >
-                                        <?php for ($i = 128; $i > 0; $i--): ?>
+                                        <select <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?> name="srcmask" data-network-id="src_address" class="selectpicker ipv4v6net" data-size="5" id="srcmask" data-width="70px" for="src">
+<?php for ($i = 128; $i > 0; $i--): ?>
                                           <option value="<?=$i;?>" <?= $i == $pconfig['srcmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
-                                        <?php endfor; ?>
+<?php endfor ?>
                                         </select>
                                       </td>
                                   </tr>
@@ -1187,10 +1187,10 @@ include("head.inc");
                   <tr>
                     <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Destination"); ?></td>
                     <td>
-                      <table class="table table-condensed">
+                      <table style="max-width: 348px">
                         <tr>
                           <td>
-                            <select <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?> name="dst" id="dst" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                            <select <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?> name="dst" id="dst" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                               <option data-other=true value="<?=$pconfig['dst'];?>" <?=!is_specialnet($pconfig['dst']) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                               <optgroup label="<?=gettext("Aliases");?>">
   <?php                        foreach (legacy_list_aliases("network") as $alias):
@@ -1209,18 +1209,18 @@ include("head.inc");
                         </tr>
                         <tr>
                           <td>
-                            <table style="border:0;">
+                            <table style="max-width: 348px">
                               <tbody>
                                 <tr>
-                                    <td style="width:348px">
+                                    <td style="width:285px">
                                       <!-- updates to "other" option in  src -->
                                       <input <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?>  type="text" id="dst_address" for="dst" value="<?=$pconfig['dst'];?>" aria-label="<?=gettext("Destination address");?>"/>
                                     </td>
                                     <td>
-                                      <select <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?> name="dstmask" class="selectpicker ipv4v6net" data-network-id="dst_address" data-size="5" id="dstmask"  data-width="auto" for="dst" >
-                                      <?php for ($i = 128; $i > 0; $i--): ?>
+                                      <select <?=!empty($pconfig['associated-rule-id']) ? "disabled" : "";?> name="dstmask" class="selectpicker ipv4v6net" data-network-id="dst_address" data-size="5" id="dstmask" data-width="70px" for="dst">
+<?php for ($i = 128; $i > 0; $i--): ?>
                                         <option value="<?=$i;?>" <?= $i == $pconfig['dstmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
-                                      <?php endfor; ?>
+<?php endfor; ?>
                                       </select>
                                     </td>
                                 </tr>
diff --git a/src/www/firewall_scrub_edit.php b/src/www/firewall_scrub_edit.php
index b54b051d3..067bb2d49 100644
--- a/src/www/firewall_scrub_edit.php
+++ b/src/www/firewall_scrub_edit.php
@@ -355,10 +355,10 @@ include("head.inc");
                   <tr>
                       <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Source"); ?></td>
                       <td>
-                        <table class="table table-condensed">
+                        <table  style="max-width:348px;">
                           <tr>
                             <td>
-                              <select name="src" id="src" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                              <select name="src" id="src" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                                 <option data-other=true value="<?=$pconfig['src'];?>" <?=!is_specialnet($pconfig['src']) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                                 <optgroup label="<?=gettext("Aliases");?>">
   <?php                        foreach (legacy_list_aliases("network") as $alias):
@@ -377,25 +377,23 @@ include("head.inc");
                         </tr>
                         <tr>
                           <td>
-                            <div>
-                              <table style="border:0;">
-                                <tbody>
-                                  <tr>
-                                      <td style="width:348px">
-                                        <!-- updates to "other" option in  src -->
-                                        <input type="text" id="src_address" for="src" value="<?=$pconfig['src'];?>" aria-label="<?=gettext("Source address");?>"/>
-                                      </td>
-                                      <td>
-                                        <select name="srcmask" data-network-id="src_address" class="selectpicker ipv4v6net" data-size="5" id="srcmask"  data-width="auto" for="src" >
-                                        <?php for ($i = 128; $i > 0; $i--): ?>
-                                          <option value="<?=$i;?>" <?= $i == $pconfig['srcmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
-                                        <?php endfor; ?>
-                                        </select>
-                                      </td>
-                                  </tr>
-                                </tbody>
-                              </table>
-                          </div>
+                            <table>
+                              <tbody>
+                                <tr>
+                                  <td style="width:285px">
+                                    <!-- updates to "other" option in  src -->
+                                    <input type="text" id="src_address" for="src" value="<?=$pconfig['src'];?>" aria-label="<?=gettext("Source address");?>"/>
+                                  </td>
+                                  <td>
+                                    <select name="srcmask" data-network-id="src_address" class="selectpicker ipv4v6net" data-size="5" id="srcmask" data-width="70px" for="src">
+                                    <?php for ($i = 128; $i > 0; $i--): ?>
+                                      <option value="<?=$i;?>" <?= $i == $pconfig['srcmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
+                                    <?php endfor; ?>
+                                    </select>
+                                  </td>
+                                 </tr>
+                              </tbody>
+                            </table>
                           </td>
                         </tr>
                       </table>
@@ -455,10 +453,10 @@ include("head.inc");
                   <tr>
                     <td><i class="fa fa-info-circle text-muted"></i> <?=gettext("Destination"); ?></td>
                     <td>
-                      <table class="table table-condensed">
+                      <table  style="max-width: 348px">
                         <tr>
                           <td>
-                            <select name="dst" id="dst" class="selectpicker" data-live-search="true" data-size="5" data-width="auto">
+                            <select name="dst" id="dst" class="selectpicker" data-live-search="true" data-size="5" data-width="348px">
                               <option data-other=true value="<?=$pconfig['dst'];?>" <?=!is_specialnet($pconfig['dst']) ? "selected=\"selected\"" : "";?>><?=gettext("Single host or Network"); ?></option>
                               <optgroup label="<?=gettext("Aliases");?>">
   <?php                        foreach (legacy_list_aliases("network") as $alias):
@@ -477,18 +475,18 @@ include("head.inc");
                         </tr>
                         <tr>
                           <td>
-                            <table style="border:0;">
+                            <table style="max-width: 348px">
                               <tbody>
                                 <tr>
-                                    <td style="width:348px">
+                                    <td style="width:285px">
                                       <!-- updates to "other" option in  src -->
                                       <input type="text" id="dst_address" for="dst" value="<?=$pconfig['dst'];?>" aria-label="<?=gettext("Destination address");?>"/>
                                     </td>
                                     <td>
-                                      <select name="dstmask" data-network-id="dst_address" class="selectpicker ipv4v6net" data-size="5" id="dstmask"  data-width="auto" for="dst" >
-                                      <?php for ($i = 128; $i > 0; $i--): ?>
+                                      <select name="dstmask" data-network-id="dst_address" class="selectpicker ipv4v6net" data-size="5" id="dstmask" data-width="70px" for="dst">
+<?php for ($i = 128; $i > 0; $i--): ?>
                                         <option value="<?=$i;?>" <?= $i == $pconfig['dstmask'] ? "selected=\"selected\"" : ""; ?>><?=$i;?></option>
-                                      <?php endfor; ?>
+<?php endfor  ?>
                                       </select>
                                     </td>
                                 </tr>