[Rt-commit] rt branch, 5.0/mobile, created. rt-5.0.0alpha1-122-g13ddf1e353

Craig Kaiser craig at bestpractical.com
Mon Apr 27 17:04:44 EDT 2020


The branch, 5.0/mobile has been created
        at  13ddf1e353adeb2d56c8d3122f7e4ddb8ba024c6 (commit)

- Log -----------------------------------------------------------------
commit a175d942a16d610f474e1e0333832f3e83a7fbe3
Author: Craig <craig at bestpractical.com>
Date:   Mon Apr 27 14:25:09 2020 -0400

    Change bootstrap sm break point from 576 px to 414px
    
    Shrinking the breakpoint for the "sm" column size allows for column
    control on small mobile devices.

diff --git a/devel/third-party/bootstrap-4.2.1/scss/_variables.scss b/devel/third-party/bootstrap-4.2.1/scss/_variables.scss
index 25e26843e0..e39ebcf6f1 100644
--- a/devel/third-party/bootstrap-4.2.1/scss/_variables.scss
+++ b/devel/third-party/bootstrap-4.2.1/scss/_variables.scss
@@ -190,7 +190,7 @@ $grid-breakpoints: () !default;
 $grid-breakpoints: map-merge(
   (
     xs: 0,
-    sm: 576px,
+    sm: 375px,
     md: 768px,
     lg: 992px,
     xl: 1200px
diff --git a/share/static/css/elevator-light/bootstrap.css b/share/static/css/elevator-light/bootstrap.css
index 0a155d6615..ab3c116d11 100644
--- a/share/static/css/elevator-light/bootstrap.css
+++ b/share/static/css/elevator-light/bootstrap.css
@@ -27,7 +27,7 @@
   --light: #f8f9fa;
   --dark: #343a40;
   --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
+  --breakpoint-sm: 375px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 992px;
   --breakpoint-xl: 1200px;
@@ -544,7 +544,7 @@ pre code {
   margin-left: auto;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .container {
     max-width: 540px;
   }
@@ -814,7 +814,7 @@ pre code {
   margin-left: 91.666667%;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .col-sm {
     -ms-flex-preferred-size: 0;
     flex-basis: 0;
@@ -1788,7 +1788,7 @@ pre code {
   background-color: rgba(255, 255, 255, 0.075);
 }
 
- at media (max-width: 575.98px) {
+ at media (max-width: 374.98px) {
   .table-responsive-sm {
     display: block;
     width: 100%;
@@ -2311,7 +2311,7 @@ textarea.form-control {
   width: 100%;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .form-inline label {
     display: -ms-flexbox;
     display: flex;
@@ -3074,7 +3074,7 @@ input[type="button"].btn-block {
   left: auto;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .dropdown-menu-sm-right {
     right: 0;
     left: auto;
@@ -3107,7 +3107,7 @@ input[type="button"].btn-block {
   left: 0;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .dropdown-menu-sm-left {
     right: auto;
     left: 0;
@@ -3934,6 +3934,7 @@ input[type="button"].btn-block {
   background-color: #007bff;
   border: 0;
   border-radius: 1rem;
+  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   -webkit-appearance: none;
   appearance: none;
@@ -3941,6 +3942,7 @@ input[type="button"].btn-block {
 
 @media screen and (prefers-reduced-motion: reduce) {
   .custom-range::-webkit-slider-thumb {
+    -webkit-transition: none;
     transition: none;
   }
 }
@@ -3965,6 +3967,7 @@ input[type="button"].btn-block {
   background-color: #007bff;
   border: 0;
   border-radius: 1rem;
+  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   -moz-appearance: none;
   appearance: none;
@@ -3972,6 +3975,7 @@ input[type="button"].btn-block {
 
 @media screen and (prefers-reduced-motion: reduce) {
   .custom-range::-moz-range-thumb {
+    -moz-transition: none;
     transition: none;
   }
 }
@@ -3999,12 +4003,14 @@ input[type="button"].btn-block {
   background-color: #007bff;
   border: 0;
   border-radius: 1rem;
+  -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   appearance: none;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
   .custom-range::-ms-thumb {
+    -ms-transition: none;
     transition: none;
   }
 }
@@ -4263,7 +4269,7 @@ input[type="button"].btn-block {
   background-size: 100% 100%;
 }
 
- at media (max-width: 575.98px) {
+ at media (max-width: 374.98px) {
   .navbar-expand-sm > .container,
   .navbar-expand-sm > .container-fluid {
     padding-right: 0;
@@ -4271,7 +4277,7 @@ input[type="button"].btn-block {
   }
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .navbar-expand-sm {
     -ms-flex-flow: row nowrap;
     flex-flow: row nowrap;
@@ -4702,7 +4708,7 @@ input[type="button"].btn-block {
   margin-bottom: 15px;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .card-deck {
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
@@ -4733,7 +4739,7 @@ input[type="button"].btn-block {
   margin-bottom: 15px;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .card-group {
     -ms-flex-flow: row wrap;
     flex-flow: row wrap;
@@ -4799,7 +4805,7 @@ input[type="button"].btn-block {
   margin-bottom: 0.75rem;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .card-columns {
     -webkit-column-count: 3;
     -moz-column-count: 3;
@@ -5092,7 +5098,7 @@ a.badge-dark:hover, a.badge-dark:focus {
   border-radius: 0.3rem;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .jumbotron {
     padding: 4rem 2rem;
   }
@@ -5761,7 +5767,7 @@ a.close.disabled {
   overflow: scroll;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .modal-dialog {
     max-width: 500px;
     margin: 1.75rem auto;
@@ -6626,7 +6632,7 @@ button.bg-dark:focus {
   display: inline-flex !important;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .d-sm-none {
     display: none !important;
   }
@@ -6999,7 +7005,7 @@ button.bg-dark:focus {
   align-self: stretch !important;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .flex-sm-row {
     -ms-flex-direction: row !important;
     flex-direction: row !important;
@@ -7567,7 +7573,7 @@ button.bg-dark:focus {
   float: none !important;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .float-sm-left {
     float: left !important;
   }
@@ -8201,7 +8207,7 @@ button.bg-dark:focus {
   margin-left: auto !important;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .m-sm-0 {
     margin: 0 !important;
   }
@@ -9615,7 +9621,7 @@ button.bg-dark:focus {
   text-align: center !important;
 }
 
- at media (min-width: 576px) {
+ at media (min-width: 375px) {
   .text-sm-left {
     text-align: left !important;
   }

commit c464202af36629b50a807deeb9f47c7b2ec7e014
Author: Craig <craig at bestpractical.com>
Date:   Mon Apr 27 15:49:28 2020 -0400

    When screen is xs justify text left

diff --git a/share/static/css/elevator-light/forms.css b/share/static/css/elevator-light/forms.css
index e422e40bab..2fac13feb2 100644
--- a/share/static/css/elevator-light/forms.css
+++ b/share/static/css/elevator-light/forms.css
@@ -105,8 +105,16 @@ div.error .titlebox-title .widget a {
   background-position: center -7px;
 }
 
-.label {
-  text-align: right;
+ at media (min-width: 576px) {
+  .label {
+    text-align: right;
+  }
+}
+
+ at media (max-width: 576px) {
+  .label {
+    text-align: left;
+  }
 }
 
 .value > ul {

commit 9d593522ed783729d58184fba03ef59f36e853eb
Author: Craig <craig at bestpractical.com>
Date:   Mon Apr 27 15:50:34 2020 -0400

    Allow datepicker to be variable size

diff --git a/share/static/css/elevator-light/misc.css b/share/static/css/elevator-light/misc.css
index f5e0d21cc0..58cb22a2fc 100644
--- a/share/static/css/elevator-light/misc.css
+++ b/share/static/css/elevator-light/misc.css
@@ -52,7 +52,8 @@ textarea.messagebox, #cke_Content, #cke_UpdateContent {
 }
 
 .datepicker {
-    width: 17em;
+    max-width: 17em;
+    min-width: 10em;
 }
 
 .dashboard-subscription tr.frequency .value input {

commit ae9add2f277e8fc6fe2dc7a64dead0859fde42a9
Author: Craig <craig at bestpractical.com>
Date:   Mon Apr 27 16:22:31 2020 -0400

    Optimize search pages for mobile

diff --git a/share/html/Search/Elements/ConditionRow b/share/html/Search/Elements/ConditionRow
index 101f6293c8..22de7dc451 100644
--- a/share/html/Search/Elements/ConditionRow
+++ b/share/html/Search/Elements/ConditionRow
@@ -46,13 +46,13 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 <div class="form-row">
-  <div class="col-md-3 label">
+  <div class="col-sm-3 col-md-3 label">
     <% $handle_block->( $Condition->{'Field'}, $Condition->{'Name'} .'Field' ) |n %>
   </div>
-  <div class="col-md-2 operator">
+  <div class="col-sm-3 col-md-2 operator">
     <% $handle_block->( $Condition->{'Op'}, $Condition->{'Name'} .'Op') |n %>
   </div>
-  <div class="col-md-7 value">
+  <div class="col-sm-6 col-md-7 value">
     <% $handle_block->( $Condition->{'Value'}, 'ValueOf'. $Condition->{'Name'} ) |n %>
   </div>
 </div>
diff --git a/share/html/Search/Elements/EditFormat b/share/html/Search/Elements/EditFormat
index e3d8722057..0f6dcd507c 100644
--- a/share/html/Search/Elements/EditFormat
+++ b/share/html/Search/Elements/EditFormat
@@ -85,7 +85,8 @@ jQuery( function() {
 
     <div class="col-md-3">
       <div class="form-row">
-        <div class="col-md-12">
+        <div class="col-sm-2"></div>
+        <div class="col-sm-10 col-md-12">
           <select name="SelectDisplayColumns" multiple="multiple" class="form-control selectpicker">
 % my %seen;
 % foreach my $field ( grep !$seen{lc $_}++, @$AvailableColumns) {
@@ -99,9 +100,9 @@ jQuery( function() {
 
     <div class="col-md-3">
       <div class="form-row">
-        <div class="col-md-3 label"><&|/l&>Link</&>:</div>
+        <div class="col-sm-2 col-md-3 label"><&|/l&>Link</&>:</div>
 %# leave 1 col to save some space to the right "->"
-        <div class="col-md-8 value">
+        <div class="col-sm-10 col-md-8 value">
           <select name="Link" class="form-control selectpicker">
               <option value="None">-</option>
               <option value="Display"><&|/l&>Display</&></option>
@@ -116,13 +117,13 @@ jQuery( function() {
       </div>
 
       <div class="form-row">
-        <div class="col-md-3 label"><&|/l&>Title</&>:</div>
-        <div class="col-md-8 value"><input type="text" name="Title" size="10" class="form-control" /></div>
+        <div class="col-sm-2 col-md-3 label"><&|/l&>Title</&>:</div>
+        <div class="col-sm-10 col-md-8 value"><input type="text" name="Title" size="10" class="form-control" /></div>
       </div>
 
       <div class="form-row">
-        <div class="col-md-3 label"><&|/l&>Size</&>:</div>
-        <div class="col-md-8 value">
+        <div class="col-sm-2 col-md-3 label"><&|/l&>Size</&>:</div>
+        <div class="col-sm-10 col-md-8 value">
           <select name="Size" class="form-control selectpicker">
             <option value="">-</option>
             <option value="Small"><&|/l&>Small</&></option>
@@ -132,9 +133,9 @@ jQuery( function() {
       </div>
 
       <div class="form-row">
-        <div class="col-md-3 label"><&|/l&>Style</&>:</div>
-        <div class="col-md-8 value">
-          <select name="Face" class="form-controll selectpicker">
+        <div class="col-sm-2 col-md-3 label"><&|/l&>Style</&>:</div>
+        <div class="col-sm-10 col-md-8 value">
+          <select name="Face" class="form-control selectpicker">
             <option value="">-</option>
             <option value="Bold"><&|/l&>Bold</&></option>
             <option value="Italic"><&|/l&>Italic</&></option>
diff --git a/share/html/Search/Elements/EditSearches b/share/html/Search/Elements/EditSearches
index 3750212e16..cbf8916d5d 100644
--- a/share/html/Search/Elements/EditSearches
+++ b/share/html/Search/Elements/EditSearches
@@ -51,14 +51,14 @@
 % if ( $can_modify ) {
 
 <div class="form-row">
-  <div class="col-md-4 label"><&|/l&>Privacy</&>:</div>
-  <div class="col-md-8">
+  <div class="col-sm-3 col-md-4 label"><&|/l&>Privacy</&>:</div>
+  <div class="col-sm-9 col-md-8">
 <& SelectSearchObject, Name => 'SavedSearchOwner', Objects => \@CreateObjects, Object => ( $Object && $Object->id ) ? $Object->Object : '' &>
   </div>
 </div>
   <div class="form-row">
-    <div class="col-md-4 label"><&|/l&>Description</&>:</div>
-    <div class="col-md-8 input-group">
+    <div class="col-sm-3 col-md-4 label"><&|/l&>Description</&>:</div>
+    <div class="col-sm-9 col-md-8 input-group">
       <input type="text" size="25" name="SavedSearchDescription" value="<% $Description || '' %>" class="form-control" />
 % if ($Id ne 'new') {
 % if ( $Dirty ) {
@@ -81,8 +81,8 @@
 
   <hr />
   <div class="form-row">
-    <div class="col-md-4 label"><&|/l&>Load saved search</&>:</div>
-    <div class="col-md-8 input-group">
+    <div class="col-sm-3 col-md-4 label"><&|/l&>Load saved search</&>:</div>
+    <div class="col-sm-9 col-md-8 input-group">
 <& SelectSearchesForObjects, Name => 'SavedSearchLoad', Objects => \@LoadObjects, SearchType => $Type &>
 <input type="submit" class="button btn btn-primary" value="<% loc('Load') %>" id="SavedSearchLoadSubmit" name="SavedSearchLoadSubmit" />
     </div>
diff --git a/share/html/Search/Elements/EditSort b/share/html/Search/Elements/EditSort
index 6e34fae26a..6406744c74 100644
--- a/share/html/Search/Elements/EditSort
+++ b/share/html/Search/Elements/EditSort
@@ -48,12 +48,12 @@
 % for my $o (0..3) {
 % $Order[$o] ||= ''; $OrderBy[$o] ||= '';
 <div class="form-row">
-  <div class="col-md-4 label">
+  <div class="col-sm-4 col-md-4 label">
 % if ($o == 0) {
 <&|/l&>Order by</&>:
 % }
   </div>
-  <div class="col-md-4 value">
+  <div class="col-sm-4 col-md-4 value">
     <select name="OrderBy" class="form-control selectpicker">
 % if ($o > 0) {
       <option value=""><&|/l&>~[none~]</&></option>
@@ -70,7 +70,7 @@ selected="selected"
 % }
     </select>
   </div>
-  <div class="col-md-4">
+  <div class="col-sm-4 col-md-4">
     <select name="Order" class="form-control selectpicker">
       <option value="ASC"
 % unless ( ($Order[$o]||'') eq "DESC" ) {
@@ -88,10 +88,10 @@ selected="selected"
 % }
 
 <div class="form-row">
-  <div class="col-md-4 label">
+  <div class="col-sm-4 col-md-4 label">
     <&|/l&>Rows per page</&>:
   </div>
-  <div class="col-md-4 value">
+  <div class="col-sm-4 col-md-4 value">
     <& /Elements/SelectResultsPerPage,
         Name => "RowsPerPage",
         Default => $RowsPerPage &>

commit 13ddf1e353adeb2d56c8d3122f7e4ddb8ba024c6
Author: Craig <craig at bestpractical.com>
Date:   Mon Apr 27 16:53:02 2020 -0400

    Optimize ticket pages for mobile

diff --git a/share/html/Articles/Elements/BeforeMessageBox b/share/html/Articles/Elements/BeforeMessageBox
index e794d7a189..fe5a7eedf1 100644
--- a/share/html/Articles/Elements/BeforeMessageBox
+++ b/share/html/Articles/Elements/BeforeMessageBox
@@ -52,16 +52,16 @@
 <div class="articles-select-article">
 % unless (RT->Config->Get('HideArticleSearchOnReplyCreate')) {
   <div class="form-row">
-    <div class="form-group col-md-2 label"><&|/l&>Include Article:</&></div>
-    <div class="col-md-9 value"><& /Elements/SelectArticle, QueueObj => $QueueObj, AutoSubmit => 1 &></div>
+    <div class="form-group col-sm-2 col-md-2 label"><&|/l&>Include Article:</&></div>
+    <div class="col-sm-9 col-md-9 value"><& /Elements/SelectArticle, QueueObj => $QueueObj, AutoSubmit => 1 &></div>
   </div>
 % }
 % if ( @$topics ) {
   <div class="form-row">
-    <div class="form-group col-md-2 label">
+    <div class="form-group col-sm-2 col-md-2 label">
       <&|/l, $QueueObj->Name &>Choose from Topics for [_1]</&>:
     </div>
-    <div class="col-md-9 value">
+    <div class="col-sm-9 col-md-9 value">
       <select name="<% $name_prefix %>Articles-Include-Topic" onchange="this.form.submit()" class="form-control selectpicker">
         <option value="" selected>-</option>
 % for ( @$topics ) { 
diff --git a/share/html/Elements/SelectGroups b/share/html/Elements/SelectGroups
index cf1f36b7d0..fd5ffbf1fb 100644
--- a/share/html/Elements/SelectGroups
+++ b/share/html/Elements/SelectGroups
@@ -45,7 +45,7 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="col-md-3">
+<div class="col-sm-3 col-md-3">
   <select name="<% $SelectFieldName %>" class="selectpicker form-control">
 % foreach my $col (RT::Group->BasicColumns) {
     <option <% ($GroupField eq $col->[0]) ? 'selected="selected"' : '' %> value="<% $col->[0] %>"><% loc($col->[1]) %></option>
@@ -56,10 +56,10 @@
 % }
   </select>
 </div>
-<div class="col-md-3">
+<div class="col-sm-3 col-md-3">
   <& /Elements/SelectMatch, Name => $SelectOpName, Default => $GroupOp &>
 </div>
-<div class="col-md-3">
+<div class="col-sm-3 col-md-3">
   <input type="text" size="8" name="<% $InputStringName %>" value="<% $GroupString %>" class="form-control"/>
 </div>
 <%INIT>
diff --git a/share/html/Elements/SelectUsers b/share/html/Elements/SelectUsers
index aa7fd5afcf..3955f6e6f8 100644
--- a/share/html/Elements/SelectUsers
+++ b/share/html/Elements/SelectUsers
@@ -45,7 +45,7 @@
 %# those contributions and any derivatives thereof.
 %#
 %# END BPS TAGGED BLOCK }}}
-<div class="col-md-3">
+<div class="col-sm-3 col-md-3">
   <select name="<% $SelectFieldName %>" class="selectpicker form-control">
 % foreach my $col (@fields) {
     <option <% ($UserField eq $col->[0]) ? 'selected="selected"' : '' |n %> value="<% $col->[0] %>"><% loc($col->[1]) %></option>
@@ -56,10 +56,10 @@
 % }
   </select>
 </div>
-<div class="col-md-3">
+<div class="col-sm-3 col-md-3">
   <& /Elements/SelectMatch, Name => $SelectOpName, Default => $UserOp &>
 </div>
-<div class="col-md-3">
+<div class="col-sm-3 col-md-3">
   <input type="text" size="8" name="<% $InputStringName %>" value="<% $UserString %>" class="form-control" />
 </div>
 <%INIT>
diff --git a/share/html/Elements/ShowLinks b/share/html/Elements/ShowLinks
index 54be10d811..936dfb6590 100644
--- a/share/html/Elements/ShowLinks
+++ b/share/html/Elements/ShowLinks
@@ -48,13 +48,13 @@
 <div class="container">
 % for my $type (@display) {
   <div class="form-row <%$type%><% $clone{$type} || $Object->$type->Count ? q{} : q{ unset-field}%>">
-    <div class="label col-md-3">
+    <div class="label col-sm-3 col-md-3">
       <& ShowRelationLabel, Object => $Object, Label => $labels{$type}.':', Relation => $type &>
 %     if ($clone{$type}) {
         <span class="create">(<a href="<% $clone{$type} %>"><% loc('Create') %></a>)</span>
 %     }
     </div>
-    <div class="value col-md-9"><span class="current-value">
+    <div class="value col-sm-9 col-md-9"><span class="current-value">
       <& ShowLinksOfType, Object => $Object, Type => $type, Recurse => ($type eq 'Members') &>
     </span></div>
   </div>
@@ -69,10 +69,10 @@
   <form class="form-inline justify-content-center" action="<% RT->Config->Get('WebPath') ."/Helpers/SpawnLinkedTicket" %>" name="SpawnLinkedTicket">
   <div class="form-row">
     <input type="hidden" name="CloneTicket" value="<% $Object->id %>">
-    <div class="col-auto label">
+    <div class="col-md-auto col-sm-2 label">
       <&|/l&>Create new</&>
     </div>
-    <div class="col">
+    <div class="col-sm-3 col-md">
       <select name="LinkType" class="selectpicker form-control">
         <option value="DependsOn-new"><% loc('Depends on') %></option>
         <option value="new-DependsOn"><% loc('Depended on by') %></option>
@@ -82,13 +82,14 @@
         <option value="new-RefersTo"><% loc('Referred to by') %></option>
       </select>
     </div>
-    <div class="col-auto label">
+    <div class="col-md-auto col-sm-3 label">
       <&|/l&>Ticket in</&>
     </div>
-    <div class="col">
+    <div class="col-md col-sm-3">
       <& /Elements/SelectNewTicketQueue, Name => 'CloneQueue' &>
     </div>
-    <div class="col">
+    <div class="col-sm-3"></div>
+    <div class="col-md col-sm-12">
       <input type="submit" value="<&|/l&>Create</&>" name="SpawnLinkedTicket" class="form-control button btn btn-primary">
     </div>
   </div>
diff --git a/share/html/Ticket/Elements/AddWatchers b/share/html/Ticket/Elements/AddWatchers
index 2c3a59e786..a795b71579 100644
--- a/share/html/Ticket/Elements/AddWatchers
+++ b/share/html/Ticket/Elements/AddWatchers
@@ -54,22 +54,22 @@
 
 % if ($Users and $Users->Count) {
   <div class="form-row">
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
       <&|/l&>Type</&>
     </div>
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
       <&|/l&>Username</&>
     </div>
   </div>
 % while (my $u = $Users->Next ) {
   <div class="form-row">
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
       <&/Elements/SelectWatcherType,
         Name  => "Ticket-AddWatcher-Principal-". $u->PrincipalId,
         Queue => $Ticket->QueueObj,
       &>
     </div>
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
       <span class="form-control current-value">
         <& '/Elements/ShowUser', User => $u, style=>'verbose' &>
       </span>
@@ -80,22 +80,22 @@
 
 % if ($Groups and $Groups->Count) {
   <div class="form-row">
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
       <&|/l&>Type</&>
     </div>
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
       <&|/l&>Group</&>
     </div>
   </div>
 % while (my $g = $Groups->Next ) {
   <div class="form-row">
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
       <& /Elements/SelectWatcherType,
         Name  => "Ticket-AddWatcher-Principal-".$g->PrincipalId,
         Queue => $Ticket->QueueObj,
       &>
     </div>
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
       <span class="form-control current-value">
         <%$g->Name%> (<%$g->Description%>)
       </span>
@@ -105,10 +105,10 @@
 % }
 
   <div class="form-row">
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
       <&|/l&>Type</&>
     </div>
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
       <&|/l&>Email</&>
     </div>
   </div>
@@ -116,10 +116,10 @@
 % for my $email (@extras) {
 % $counter++;
   <div class="form-row">
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
       <&/Elements/SelectWatcherType, Name => "WatcherTypeEmail".$counter, Queue => $Ticket->QueueObj &>
     </div>
-    <div class="col-md-9">
+    <div class="col-sm-8 col-md-9">
       <input type="hidden" name="WatcherAddressEmail<%$counter%>" value="<%$email->format%>">
       <span class="form-control current-value">
         <%$email->format%>
@@ -129,10 +129,10 @@
 % }
 % for my $i (1 .. 3) {
   <div class="form-row">
-    <div class="col-md-3">
+    <div class="col-sm-4 col-md-3">
       <&/Elements/SelectWatcherType, Name => "WatcherTypeEmail" . $i, Queue => $Ticket->QueueObj &>
     </div>
-    <div class="col-md-6">
+    <div class="col-sm-8 col-md-8">
       <& /Elements/EmailInput, Name => 'WatcherAddressEmail' . $i, Size => '20' &>
     </div>
   </div>
diff --git a/share/html/Ticket/Elements/EditBasics b/share/html/Ticket/Elements/EditBasics
index 16040d6e34..b0ea1906ea 100644
--- a/share/html/Ticket/Elements/EditBasics
+++ b/share/html/Ticket/Elements/EditBasics
@@ -186,12 +186,12 @@ for my $field (@fields) {
 % for my $field (@fields) {
 %# Prefer input name as css class, e.g. "FinalPriority" instead of "Final_Priority"
   <div class="form-row <% CSSClass( $field->{args}{Name} || $field->{'name'} ) %>">
-    <div class="label col-md-3"><% loc($field->{'name'}) %>:
+    <div class="label col-sm-3 col-md-3"><% loc($field->{'name'}) %>:
 %   if ( my $hint = $field->{hint} ) {
       <span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $hint %>"></span>
 %   }
     </div>
-    <div class="value col-md-9"><% $field->{'html'} |n %></div>
+    <div class="value col-sm-9 col-md-9"><% $field->{'html'} |n %></div>
   </div>
 % }
 % $m->callback( CallbackName => 'EndOfList', TicketObj => $TicketObj, %ARGS, Fields => \@fields );
diff --git a/share/html/Ticket/Elements/EditDates b/share/html/Ticket/Elements/EditDates
index 887eb855a5..b1261f3a47 100644
--- a/share/html/Ticket/Elements/EditDates
+++ b/share/html/Ticket/Elements/EditDates
@@ -47,8 +47,8 @@
 %# END BPS TAGGED BLOCK }}}
 <div>
   <div class="form-row">
-    <div class="label col-md-3"><&|/l&>Starts</&>:</div>
-    <div class="value col-md-9">
+    <div class="label col-sm-3 col-md-3"><&|/l&>Starts</&>:</div>
+    <div class="value col-sm-9 col-md-9">
         <div class="form-row">
           <div class="col-auto">
         <& /Elements/SelectDate,
@@ -66,8 +66,8 @@
     </span>
   </div>
   <div class="form-row">
-    <div class="label col-md-3"><&|/l&>Started</&>:</div>
-    <div class="value col-md-9">
+    <div class="label col-sm-3 col-md-3"><&|/l&>Started</&>:</div>
+    <div class="value col-sm-9 col-md-9">
         <div class="form-row">
           <div class="col-auto">
         <& /Elements/SelectDate,
@@ -86,10 +86,10 @@
   </div>
 
   <div class="form-row">
-    <div class="label col-md-3">
+    <div class="label col-sm-3 col-md-3">
       <&|/l&>Last Contact</&>:
     </div>
-    <div class="value col-md-9">
+    <div class="value col-sm-9 col-md-9">
         <div class="form-row">
           <div class="col-auto">
         <& /Elements/SelectDate,
@@ -107,8 +107,8 @@
     </span>
   </div>
   <div class="form-row">
-    <div class="label col-md-3"><&|/l&>Due</&>:</div>
-    <div class="value col-md-9">
+    <div class="label col-sm-3 col-md-3"><&|/l&>Due</&>:</div>
+    <div class="value col-sm-9 col-md-9">
         <div class="form-row">
           <div class="col-auto">
         <& /Elements/SelectDate,
diff --git a/share/html/Ticket/Elements/EditMerge b/share/html/Ticket/Elements/EditMerge
index efaf27337e..5d5d9e5578 100644
--- a/share/html/Ticket/Elements/EditMerge
+++ b/share/html/Ticket/Elements/EditMerge
@@ -76,6 +76,6 @@ $Tickets => undef
 $Name => ''
 $Default => ''
 $MergeTextClass => 'ticket-merge-position'
-$LabelStyle => 'col-md-2'
-$ValueStyle => 'col-md-4'
+$LabelStyle => 'col-sm-2 col-md-2'
+$ValueStyle => 'col-sm-4 col-md-4'
 </%ARGS>
diff --git a/share/html/Ticket/Elements/EditPeople b/share/html/Ticket/Elements/EditPeople
index 40971b4cc1..5923ad230d 100644
--- a/share/html/Ticket/Elements/EditPeople
+++ b/share/html/Ticket/Elements/EditPeople
@@ -74,8 +74,8 @@
 <h3><&|/l&>People</&></h3>
 
 <div class="form-row">
-  <div class="col-md-3 label"><&|/l&>Owner</&>:</div>
-  <div class="col-md-6 value"><& /Elements/SelectOwner, Name => 'Owner', QueueObj => $Ticket->QueueObj, TicketObj => $Ticket, Default => $Ticket->OwnerObj->Id, DefaultValue => 0&></div>
+  <div class="col-md-3 col-sm-3 label"><&|/l&>Owner</&>:</div>
+  <div class="col-md-6 col-sm-6 value"><& /Elements/SelectOwner, Name => 'Owner', QueueObj => $Ticket->QueueObj, TicketObj => $Ticket, Default => $Ticket->OwnerObj->Id, DefaultValue => 0&></div>
 </div>
 
 % my @role_fields;
@@ -88,12 +88,12 @@
 % $m->callback( CustomRoles => $single_roles, SingleRoles => 1, Ticket => $Ticket, %ARGS, CallbackName => 'ModifyCustomRoles' );
 % while (my $role = $single_roles->Next) {
 <div class="form-row">
-  <div class="col-md-3 label"><% $role->Name %>:
+  <div class="col-md-3 col-sm-3 label"><% $role->Name %>:
 % if ( my $hint = $role->EntryHint ) {
     <span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $hint %>"></span>
 % }
   </div>
-  <div class="col-md-6 value"><& /Elements/SingleUserRoleInput, role => $role, Ticket => $Ticket &></div>
+  <div class="col-md-6 col-sm-6 value"><& /Elements/SingleUserRoleInput, role => $role, Ticket => $Ticket &></div>
 </div>
 
 % }
@@ -102,33 +102,33 @@
 <i><&|/l&>(Check box to delete)</&></i><br />
 
 <div class="form-row">
-  <div class="col-md-3 label">
+  <div class="col-md-3 col-sm-4 label">
     <div class="custom-control custom-checkbox">
       <input type="checkbox" id="delete-requestors-checkbox" class="checkbox custom-control-input" onclick="setCheckbox(this, /^Ticket-DeleteWatcher-Type-Requestor-/)">
       <label class="custom-control-label" for="delete-requestors-checkbox"><&|/l&>Requestors</&>:</label>
     </div>
   </div>
-  <div class="col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->Requestors &></div>
+  <div class="col-md-6 col-sm-8 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->Requestors &></div>
 </div>
 
 <div class="form-row">
-  <div class="col-md-3 label">
+  <div class="col-md-3 col-sm-4 label">
     <div class="custom-control custom-checkbox">
       <input type="checkbox" id="delete-cc-checkbox" class="checkbox custom-control-input" onclick="setCheckbox(this, /^Ticket-DeleteWatcher-Type-Cc-/)">
       <label class="custom-control-label" for="delete-cc-checkbox"><&|/l&>Cc</&>:</label>
     </div>
   </div>
-  <div class="col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->Cc &></div>
+  <div class="col-md-6 col-sm-8 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->Cc &></div>
 </div>
 
 <div class="form-row">
-  <div class="col-md-3 label">
+  <div class="col-md-3 col-sm-4 label">
     <div class="custom-control custom-checkbox">
       <input type="checkbox" id="delete-admincc-checkbox" class="checkbox custom-control-input" onclick="setCheckbox(this, /^Ticket-DeleteWatcher-Type-AdminCc-/)">
       <label class="custom-control-label" for="delete-admincc-checkbox"><&|/l&>Admin Cc</&>:</label>
     </div>
   </div>
-  <div class="col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->AdminCc &></div>
+  <div class="col-md-6 col-sm-8 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->AdminCc &></div>
 </div>
 
 % my $multi_roles = $Ticket->QueueObj->CustomRoles;
diff --git a/share/html/Ticket/Elements/EditPeopleInline b/share/html/Ticket/Elements/EditPeopleInline
index 2ab73a6671..01c5cbfa73 100644
--- a/share/html/Ticket/Elements/EditPeopleInline
+++ b/share/html/Ticket/Elements/EditPeopleInline
@@ -52,8 +52,8 @@
 </div>
 
 <div class="form-row">
-  <div class="col-md-3 label"><&|/l&>Owner</&>:</div>
-  <div class="col-md-6 value"><& /Elements/SelectOwner, Name => 'Owner', QueueObj => $Ticket->QueueObj, TicketObj => $Ticket, Default => $Ticket->OwnerObj->Id, DefaultValue => 0&></div>
+  <div class="col-sm-3 col-md-3 label"><&|/l&>Owner</&>:</div>
+  <div class="col-sm-6 col-md-6 value"><& /Elements/SelectOwner, Name => 'Owner', QueueObj => $Ticket->QueueObj, TicketObj => $Ticket, Default => $Ticket->OwnerObj->Id, DefaultValue => 0&></div>
 </div>
 
 % my @role_fields;
@@ -66,49 +66,49 @@
 
 % while (my $role = $single_roles->Next) {
 <div class="form-row">
-  <div class="col-md-3 label"><% $role->Name %>:
+  <div class="col-sm-3 col-md-3 label"><% $role->Name %>:
 % if ( my $hint = $role->EntryHint ) {
     <span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $hint %>"></span>
 % }
   </div>
-  <div class="col-md-6 value"><& /Elements/SingleUserRoleInput, role => $role, Ticket => $Ticket &></div>
+  <div class="col-sm-6 col-md-6 value"><& /Elements/SingleUserRoleInput, role => $role, Ticket => $Ticket &></div>
 </div>
 
 % }
 
 % if ($Ticket->Requestors->MembersObj->Count) {
 <div class="form-row">
-  <div class="col-md-3 label">
+  <div class="col-sm-4 col-md-3 label">
     <div class="custom-control custom-checkbox">
       <input type="checkbox" id="delete-requestors-checkbox" class="checkbox custom-control-input" onclick="setCheckbox(this, /^Ticket-DeleteWatcher-Type-Requestor-/)">
       <label class="custom-control-label" for="delete-requestors-checkbox"><&|/l&>Requestors</&>:</label>
     </div>
   </div>
-  <div class="col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->Requestors &></div>
+  <div class="col-sm-8 col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->Requestors &></div>
 </div>
 % }
 
 % if ($Ticket->Cc->MembersObj->Count) {
 <div class="form-row">
-  <div class="col-md-3 label">
+  <div class="col-sm-3 col-md-3 label">
     <div class="custom-control custom-checkbox">
       <input type="checkbox" id="delete-cc-checkbox" class="checkbox custom-control-input" onclick="setCheckbox(this, /^Ticket-DeleteWatcher-Type-Cc-/)">
       <label class="custom-control-label" for="delete-cc-checkbox"><&|/l&>Cc</&>:</label>
     </div>
   </div>
-  <div class="col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->Cc &></div>
+  <div class="col-sm-6 col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->Cc &></div>
 </div>
 % }
 
 % if ($Ticket->AdminCc->MembersObj->Count) {
 <div class="form-row">
-  <div class="col-md-3 label">
+  <div class="col-sm-3 col-md-3 label">
     <div class="custom-control custom-checkbox">
       <input type="checkbox" id="delete-admincc-checkbox" class="checkbox custom-control-input" onclick="setCheckbox(this, /^Ticket-DeleteWatcher-Type-AdminCc-/)">
       <label class="custom-control-label" for="delete-admincc-checkbox"><&|/l&>Admin Cc</&>:</label>
     </div>
   </div>
-  <div class="col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->AdminCc &></div>
+  <div class="col-sm-6 col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $Ticket->AdminCc &></div>
 </div>
 % }
 
@@ -121,7 +121,7 @@
 % my $group = $Ticket->RoleGroup($role->GroupType);
 % if ($group->Id && $group->MembersObj->Count) {
 <div class="form-row">
-  <div class="col-md-3 label">
+  <div class="col-sm-3 col-md-3 label">
     <div class="custom-control custom-checkbox">
       <input type="checkbox" id="delete-<% $role->id %>-checkbox" class="checkbox custom-control-input" onclick="setCheckbox(this, /^Ticket-DeleteWatcher-Type-RT::CustomRole-<% $role->Id %>-/)">
       <label class="custom-control-label" for="delete-<% $role->id %>-checkbox"><% $role->Name %>:
@@ -131,7 +131,7 @@
       </label>
     </div>
   </div>
-  <div class="col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $group &></div>
+  <div class="col-sm-6 col-md-6 value"><& EditWatchers, TicketObj => $Ticket, Watchers => $group &></div>
 </div>
 % }
 % }
diff --git a/share/html/Ticket/Elements/EditTransactionCustomFields b/share/html/Ticket/Elements/EditTransactionCustomFields
index 14eace229d..35619d8f1a 100644
--- a/share/html/Ticket/Elements/EditTransactionCustomFields
+++ b/share/html/Ticket/Elements/EditTransactionCustomFields
@@ -53,13 +53,13 @@
 % while (my $CF = $CustomFields->Next()) {
 % next unless $CF->CurrentUserHasRight('ModifyCustomField');
 <div class="form-row">
-<div class="label cflabel col-md-3">
+<div class="label cflabel col-sm-3 col-md-3">
   <span class="name"><% $CF->Name %>:</span>
 % if ( $CF->EntryHint ) {
   <span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<% $CF->EntryHint %>"></span>
 % }
 </div>
-<div class="value col-md-9">
+<div class="value col-sm-9 col-md-9">
 <& /Elements/EditCustomField,
     %ARGS,
     CustomField => $CF,
diff --git a/share/html/Ticket/Elements/ShowAssets b/share/html/Ticket/Elements/ShowAssets
index e7916bea9a..c67a0e41fe 100644
--- a/share/html/Ticket/Elements/ShowAssets
+++ b/share/html/Ticket/Elements/ShowAssets
@@ -182,12 +182,12 @@ if ($ShowRelatedTickets) {
 </%perl>
 
         <div class="related-tickets form-row">
-          <div class="col-md-3 label">
+          <div class="col-sm-3 col-md-3 label">
             <a href="<% $url %>">
               <&|/l, $ShowRelatedTickets &>[_1] most recently updated related tickets</&>
             </a>
           </div>
-          <div class="col-md-9 value">
+          <div class="col-sm-9 col-md-9 value">
             <& /Elements/CollectionList,
                 %search,
                 Class             => "RT::Tickets",
diff --git a/share/html/Ticket/Elements/ShowBasics b/share/html/Ticket/Elements/ShowBasics
index 46c68a12b6..a46c9fdd33 100644
--- a/share/html/Ticket/Elements/ShowBasics
+++ b/share/html/Ticket/Elements/ShowBasics
@@ -47,44 +47,44 @@
 %# END BPS TAGGED BLOCK }}}
 <div>
   <div class="id form-row">
-    <div class="label col-md-3"><&|/l&>Id</&>:</div>
-    <div class="value col-md-9"><span><%$Ticket->Id %></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Id</&>:</div>
+    <div class="value col-sm-9 col-md-6"><span><%$Ticket->Id %></span></div>
   </div>
   <div class="status form-row">
-    <div class="label col-md-3"><&|/l&>Status</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><% loc($Ticket->Status) %></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Status</&>:</div>
+    <div class="value col-sm-9 col-md-6"><span class="current-value"><% loc($Ticket->Status) %></span></div>
   </div>
 % if ( !$Ticket->QueueObj->SLADisabled ) {
   <div class="sla form-row">
-    <div class="label col-md-3"><&|/l&>SLA</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><% loc($Ticket->SLA) %></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>SLA</&>:</div>
+    <div class="value col-sm-9 col-md-6"><span class="current-value"><% loc($Ticket->SLA) %></span></div>
   </div>
 % }
 % my $totalTimeWorked = 0;
 % if (RT->Config->Get('DisplayTotalTimeWorked') && ($totalTimeWorked = $Ticket->TotalTimeWorked)) {
   <div class="total time worked sum form-row">
-    <div class="label col-md-3"><&|/l&>Total Time Worked</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowTime, minutes => $totalTimeWorked &></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Total Time Worked</&>:</div>
+    <div class="value col-sm-9 col-md-6"><span class="current-value"><& ShowTime, minutes => $totalTimeWorked &></span></div>
   </div>
 % }
 % if ($show_time_worked) {
 % if ($Ticket->TimeEstimated) {
   <div class="time estimated form-row">
-    <div class="label col-md-3"><&|/l&>Estimated</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowTime, minutes => $Ticket->TimeEstimated &></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Estimated</&>:</div>
+    <div class="value col-sm-9 col-md-6"><span class="current-value"><& ShowTime, minutes => $Ticket->TimeEstimated &></span></div>
   </div>
 % }
 % $m->callback( %ARGS, CallbackName => 'AfterTimeEstimated', TicketObj => $Ticket );
 % if ($Ticket->TimeWorked) {
   <div class="time worked sum form-row">
-    <div class="label col-md-3"><&|/l&>Worked</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowTime, minutes => $Ticket->TimeWorked &></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Worked</&>:</div>
+    <div class="value col-sm-9 col-md-6"><span class="current-value"><& ShowTime, minutes => $Ticket->TimeWorked &></span></div>
   </div>
 % }
 % if ( keys %$time_worked ) {
 <div class="time worked by-user form-row">
-  <div class="label col-md-3"><&|/l&>Users</&>:</div>
-  <div class="value col-md-9">
+  <div class="label col-sm-3 col-md-3"><&|/l&>Users</&>:</div>
+  <div class="value col-sm-9 col-md-6">
     <span class="current-value">
 %   for my $user ( keys %$time_worked ) {
       <div>
@@ -99,22 +99,22 @@
 % $m->callback( %ARGS, CallbackName => 'AfterTimeWorked', TicketObj => $Ticket );
 % if ($Ticket->TimeLeft) {
   <div class="time left form-row">
-    <div class="label col-md-3"><&|/l&>Left</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowTime, minutes => $Ticket->TimeLeft &></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Left</&>:</div>
+    <div class="value col-sm-9 col-md-6"><span class="current-value"><& ShowTime, minutes => $Ticket->TimeLeft &></span></div>
   </div>
 % }
 % }
 % $m->callback( %ARGS, CallbackName => 'AfterTimeLeft', TicketObj => $Ticket );
   <div class="priority form-row">
-    <div class="label col-md-3"><&|/l&>Priority</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowPriority, Ticket => $Ticket &></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Priority</&>:</div>
+    <div class="value col-sm-9 col-md-6"><span class="current-value"><& ShowPriority, Ticket => $Ticket &></span></div>
   </div>
 % $m->callback( %ARGS, CallbackName => 'AfterPriority', TicketObj => $Ticket );
 %# This will check SeeQueue at the ticket role level, queue level, and global level
 % if ($Ticket->CurrentUserHasRight('SeeQueue')) {
   <div class="queue form-row">
-    <div class="label col-md-3"><&|/l&>Queue</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowQueue, Ticket => $Ticket, QueueObj => $Ticket->QueueObj &></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Queue</&>:</div>
+    <div class="value col-sm-9 col-md-6"><span class="current-value"><& ShowQueue, Ticket => $Ticket, QueueObj => $Ticket->QueueObj &></span></div>
   </div>
 % }
 % $m->callback( %ARGS, CallbackName => 'AfterQueue', TicketObj => $Ticket );
diff --git a/share/html/Ticket/Elements/ShowDates b/share/html/Ticket/Elements/ShowDates
index 1823413bce..96307b35b8 100644
--- a/share/html/Ticket/Elements/ShowDates
+++ b/share/html/Ticket/Elements/ShowDates
@@ -47,55 +47,55 @@
 %# END BPS TAGGED BLOCK }}}
 <div>
   <div class="date form-row created">
-    <div class="label col-md-3"><&|/l&>Created</&>:</div>\
-    <div class="value col-md-9"><span class="current-value"><% $Ticket->CreatedObj->AsString %></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Created</&>:</div>\
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><% $Ticket->CreatedObj->AsString %></span></div>
   </div>
 % $m->callback( %ARGS, CallbackName => 'AfterCreated', TicketObj => $Ticket );
   <div class="date form-row starts<% $Ticket->StartsObj->Unix ? q{} : q{ unset-field}%>">
-    <div class="label col-md-3"><&|/l&>Starts</&>:</div>\
-    <div class="value col-md-9"><span class="current-value"><% $Ticket->StartsObj->AsString %></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Starts</&>:</div>\
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><% $Ticket->StartsObj->AsString %></span></div>
   </div>
 % $m->callback( %ARGS, CallbackName => 'AfterStarts', TicketObj => $Ticket );
   <div class="date form-row started<% $Ticket->StartedObj->Unix ? q{} : q{ unset-field}%>">
-    <div class="label col-md-3"><&|/l&>Started</&>:</div>\
-    <div class="value col-md-9"><span class="current-value"><% $Ticket->StartedObj->AsString %></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Started</&>:</div>\
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><% $Ticket->StartedObj->AsString %></span></div>
   </div>
 % $m->callback( %ARGS, CallbackName => 'AfterStarted', TicketObj => $Ticket );
   <div class="date form-row told<% $Ticket->ToldObj->Unix || $Ticket->CurrentUserHasRight('ModifyTicket') ? q{} : q{ unset-field}%>">
-    <div class="label col-md-3">
+    <div class="label col-sm-3 col-md-3">
 % if ( $Ticket->CurrentUserHasRight('ModifyTicket' ) ) {
 <a href="<% RT->Config->Get('WebPath') %>/Ticket/Display.html?id=<% $Ticket->id %>&Action=SetTold"><&|/l&>Last Contact</&></a>:
 % } else {
 <&|/l&>Last Contact</&>:
 % }
-</div><div class="value col-md-9"><span class="current-value"><% $Ticket->ToldObj->AsString %></span></div>
+</div><div class="value col-sm-9 col-md-9"><span class="current-value"><% $Ticket->ToldObj->AsString %></span></div>
   </div>
 % $m->callback( %ARGS, CallbackName => 'AfterTold', TicketObj => $Ticket );
 
   <div class="date form-row due<% $Ticket->DueObj->Unix ? q{} : q{ unset-field}%>">
-    <div class="label col-md-3"><&|/l&>Due</&>:</div>\
+    <div class="label col-sm-3 col-md-3"><&|/l&>Due</&>:</div>\
 % my $due = $Ticket->DueObj;
 % if ( $due && $due->IsSet && $due->Diff < 0 && $Ticket->QueueObj->IsActiveStatus($Ticket->Status) ) {
-    <div class="value col-md-9"><span class="current-value"><span class="overdue"><% $due->AsString  %></span></div></span>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><span class="overdue"><% $due->AsString  %></span></div></span>
 % } else {
-    <div class="value col-md-9"><span class="current-value"><% $due->AsString  %></span></div>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><% $due->AsString  %></span></div>
 % }
   </div>
 % $m->callback( %ARGS, CallbackName => 'AfterDue', TicketObj => $Ticket );
 
   <div class="date form-row resolved<% $Ticket->ResolvedObj->Unix ? q{} : q{ unset-field}%>">
-    <div class="label col-md-3"><&|/l&>Closed</&>:</div>\
-    <div class="value col-md-9"><span class="current-value"><% $Ticket->ResolvedObj->AsString  %></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Closed</&>:</div>\
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><% $Ticket->ResolvedObj->AsString  %></span></div>
   </div>
 % $m->callback( %ARGS, CallbackName => 'AfterResolved', TicketObj => $Ticket );
 
   <div class="date form-row updated">
-    <div class="label col-md-3"><&|/l&>Updated</&>:</div>\
+    <div class="label col-sm-3 col-md-3"><&|/l&>Updated</&>:</div>\
 % my $UpdatedString = $Ticket->LastUpdated ? loc("[_1] by [_2]", $Ticket->LastUpdatedAsString, $m->scomp('/Elements/ShowUser', User => $Ticket->LastUpdatedByObj)) : loc("Never");
 % if ($UpdatedLink) {
-    <div class="value col-md-9"><span class="current-value"><a href="<% $UpdatedLink %>"><% $UpdatedString | n %></a></span></div>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><a href="<% $UpdatedLink %>"><% $UpdatedString | n %></a></span></div>
 % } else {
-    <div class="value col-md-9"><span class="current-value"><% $UpdatedString | n %></span></div>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><% $UpdatedString | n %></span></div>
 % }
   </div>
 % $m->callback( %ARGS, CallbackName => 'AfterUpdated', TicketObj => $Ticket );
diff --git a/share/html/Ticket/Elements/ShowPeople b/share/html/Ticket/Elements/ShowPeople
index 953cd807ab..1e33beaac5 100644
--- a/share/html/Ticket/Elements/ShowPeople
+++ b/share/html/Ticket/Elements/ShowPeople
@@ -47,9 +47,9 @@
 %# END BPS TAGGED BLOCK }}}
 <div>
   <div class="form-row owner">
-    <div class="label col-md-3"><&|/l&>Owner</&>:</div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Owner</&>:</div>
 % my $owner = $Ticket->OwnerObj;
-    <div class="value col-md-9"><span class="current-value"><& /Elements/ShowUser, User => $owner, Ticket => $Ticket &>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><& /Elements/ShowUser, User => $owner, Ticket => $Ticket &>
     <& /Elements/ShowUserEmailFrequency, User => $owner, Ticket => $Ticket &>
 % $m->callback( User => $owner, Ticket => $Ticket, %ARGS, CallbackName => 'AboutThisUser' );
     </span></div>
@@ -72,22 +72,22 @@
 
 %     my $user = $users->First || RT->Nobody;
   <div class="form-row">
-    <div class="label col-md-3"><% $role->Name %>:</div>
-    <div class="value col-md-9"><span class="current-value"><& /Elements/ShowUser, User => $user, Ticket => $Ticket &></span></div>
+    <div class="label col-sm-3 col-md-3"><% $role->Name %>:</div>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><& /Elements/ShowUser, User => $user, Ticket => $Ticket &></span></div>
   </div>
 % }
 
   <div class="form-row requestors">
-    <div class="label col-md-3"><&|/l&>Requestors</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowGroupMembers, Group => $Ticket->Requestors, Ticket => $Ticket &></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Requestors</&>:</div>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><& ShowGroupMembers, Group => $Ticket->Requestors, Ticket => $Ticket &></span></div>
   </div>
   <div class="form-row cc<% $Ticket->Cc->MembersObj->Count ? q{} : q{ unset-field}%>">
-    <div class="label col-md-3"><&|/l&>Cc</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowGroupMembers, Group => $Ticket->Cc, Ticket => $Ticket &></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>Cc</&>:</div>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><& ShowGroupMembers, Group => $Ticket->Cc, Ticket => $Ticket &></span></div>
   </div>
   <div class="form-row admincc<% $Ticket->AdminCc->MembersObj->Count ? q{} : q{ unset-field}%>">
-    <div class="label col-md-3"><&|/l&>AdminCc</&>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowGroupMembers, Group => $Ticket->AdminCc, Ticket => $Ticket &></span></div>
+    <div class="label col-sm-3 col-md-3"><&|/l&>AdminCc</&>:</div>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><& ShowGroupMembers, Group => $Ticket->AdminCc, Ticket => $Ticket &></span></div>
   </div>
 
 % my $multi_roles = $Ticket->QueueObj->CustomRoles;
@@ -98,8 +98,8 @@
 % $m->callback( CustomRoles => $multi_roles, SingleRoles => 0, Ticket => $Ticket, %ARGS, CallbackName => 'ModifyCustomRoles' );
 % while (my $role = $multi_roles->Next) {
   <div class="form-row">
-    <div class="label col-md-3"><% $role->Name %>:</div>
-    <div class="value col-md-9"><span class="current-value"><& ShowGroupMembers, Group => $Ticket->RoleGroup($role->GroupType), Ticket => $Ticket &></span></div>
+    <div class="label col-sm-3 col-md-3"><% $role->Name %>:</div>
+    <div class="value col-sm-9 col-md-9"><span class="current-value"><& ShowGroupMembers, Group => $Ticket->RoleGroup($role->GroupType), Ticket => $Ticket &></span></div>
   </div>
 % }
 
diff --git a/share/html/Ticket/Elements/ShowRequestor b/share/html/Ticket/Elements/ShowRequestor
index e23054923f..26d2cc76c5 100644
--- a/share/html/Ticket/Elements/ShowRequestor
+++ b/share/html/Ticket/Elements/ShowRequestor
@@ -136,7 +136,7 @@
           [<a href="<% RT->Config->Get('WebPath') . '/Admin/Users/Memberships.html?id=' . $requestor->id %>" ><&|/l&>Edit</&></a>]
 % }
         </div>
-        <div class="value col-md-9"><& /Elements/ShowMemberships, UserObj => $requestor, Limit => $grouplimit &></div>
+        <div class="value col-sm-9 col-md-9"><& /Elements/ShowMemberships, UserObj => $requestor, Limit => $grouplimit &></div>
       </div>
 % }
 
diff --git a/share/html/Ticket/Elements/UpdateCc b/share/html/Ticket/Elements/UpdateCc
index e8b029bc09..7676a65411 100644
--- a/share/html/Ticket/Elements/UpdateCc
+++ b/share/html/Ticket/Elements/UpdateCc
@@ -48,18 +48,18 @@
 % $m->callback(CallbackName => 'BeforeCc', ARGSRef => \%ARGS, Ticket => $TicketObj, one_time_Ccs => \@one_time_Ccs, txn_addresses => \%txn_addresses);
 
 <div class="form-row">
-  <div class="col-md-2 label">
+  <div class="col-sm-2 col-md-2 label">
     <&|/l&>One-time Cc</&>:
   </div>
-  <div class="col-md-9 value">
+  <div class="col-sm-9 col-md-9 value">
     <& /Elements/EmailInput, Name => 'UpdateCc', Size => undef, Default => $ARGS{UpdateCc}, AutocompleteMultiple => 1, Options => \@one_time_Ccs &>
     <input type="hidden" id="UpdateIgnoreAddressCheckboxes" name="UpdateIgnoreAddressCheckboxes" value="0">
   </div>
 </div>
 
 <div class="form-row mt-0">
-  <div class="col-md-2 label"></div>
-  <div class="col-md-9 value">
+  <div class="col-sm-2 col-md-2 label"></div>
+  <div class="col-sm-9 col-md-9 value">
     <div class="form-row">
 %if (scalar @one_time_Ccs) {
 %   if ($hide_cc_suggestions) {
@@ -69,14 +69,14 @@
       <div class="OneTimeCcs d-flex flex-wrap hidden">
 %   }
 
-      <div class="col-md-auto"><span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<&|/l&>check to add</&>"></span></div>
+      <div class="col-sm-auto col-md-auto"><span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<&|/l&>check to add</&>"></span></div>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="custom-control-input" id="AllSuggestedCc" name="AllSuggestedCc" value="1" onclick="setCheckbox(this, /^UpdateCc-/, null, true)">
         <label class="custom-control-label" for="AllSuggestedCc"><% loc('All recipients') %></label>
       </div>
 %}
 %foreach my $addr ( @one_time_Ccs ) {
-      <div class="col-md-auto">
+      <div class="col-sm-auto col-md-auto">
         <span class="ticket-update-suggested-cc">
           <div class="custom-control custom-checkbox">
             <input
@@ -101,17 +101,17 @@
 </div>
 
 <div class="form-row">
-  <div class="col-md-2 label">
+  <div class="col-sm-2 col-md-2 label">
     <&|/l&>One-time Bcc</&>:
   </div>
-  <div class="col-md-9 value">
+  <div class="col-sm-9 col-md-9 value">
     <& /Elements/EmailInput, Name => 'UpdateBcc', Size => undef, Default => $ARGS{UpdateBcc}, AutocompleteMultiple => 1, Options => \@one_time_Ccs &>
   </div>
 </div>
 
 <div class="form-row mt-0">
-  <div class="col-md-2 label"></div>
-  <div class="col-md-9 value">
+  <div class="col-sm-2 col-md-2 label"></div>
+  <div class="col-sm-9 col-md-9 value">
     <div class="form-row">
 %if (scalar @one_time_Ccs) {
 %   if ($hide_cc_suggestions) {
@@ -121,14 +121,14 @@
       <div class="OneTimeCcs d-flex flex-wrap hidden">
 %   }
 
-      <div class="col-md-auto"><span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<&|/l&>check to add</&>"></span></div>
+      <div class="col-sm-auto col-md-auto"><span class="far fa-question-circle icon-helper" data-toggle="tooltip" data-placement="top" data-original-title="<&|/l&>check to add</&>"></span></div>
       <div class="custom-control custom-checkbox">
         <input type="checkbox" class="checkbox custom-control-input" id="AllSuggestedBcc" name="AllSuggestedBcc" value="1" onclick="setCheckbox(this, /^UpdateBcc-/, null, true)">
         <label class="custom-control-label" for="AllSuggestedBcc"><% loc('All recipients') %></label>
       </div>
 %}
 %foreach my $addr ( @one_time_Ccs ) {
-      <div class="col-md-auto">
+      <div class="col-sm-auto col-md-auto">
         <span class="ticket-update-suggested-cc">
           <div class="custom-control custom-checkbox">
             <input
diff --git a/share/html/Ticket/Update.html b/share/html/Ticket/Update.html
index 100c7cb9fc..9add5cf98f 100644
--- a/share/html/Ticket/Update.html
+++ b/share/html/Ticket/Update.html
@@ -75,13 +75,13 @@
 
 % if ( $TicketObj->CurrentUserHasRight('SeeQueue') ) {
 <div class="form-row">
-  <div class="label col-md-3"><&|/l&>Queue</&>:</div>
-  <div class="value col-md-9"><span class="current-value form-control"><% $TicketObj->QueueObj->Name %></span></div>
+  <div class="label col-sm-3 col-md-3"><&|/l&>Queue</&>:</div>
+  <div class="value col-sm-9 col-md-9"><span class="current-value form-control"><% $TicketObj->QueueObj->Name %></span></div>
 </div>
 % }
 
-<div class="form-row"><div class="label col-md-3"><&|/l&>Update Type</&>:</div>
-<div class="value col-md-9"><select class="form-control selectpicker" name="UpdateType" id="UpdateType">
+<div class="form-row"><div class="label col-sm-3 col-md-3"><&|/l&>Update Type</&>:</div>
+<div class="value col-sm-9 col-md-9"><select class="form-control selectpicker" name="UpdateType" id="UpdateType">
 % if ($CanComment) {
 <option value="private" <% ($ARGS{'UpdateType'} &&  $ARGS{'UpdateType'} eq "private") ? qq[ selected="selected"] : !$ARGS{'UpdateType'}&&$CommentDefault |n %>><&|/l&>Comments (Not sent to requestors)</&></option>
 % }
@@ -155,7 +155,7 @@
 % if ( $gnupg_widget ) {
 <div class="form-row">
   <div class="col-md-2 label empty"></div>
-  <div class="col-md-9 value">
+  <div class="col-sm-9 col-md-9 value">
     <& /Elements/Crypt/SignEncryptWidget,
         self => $gnupg_widget,
         TicketObj => $TicketObj,
@@ -166,10 +166,10 @@
 % $m->callback( %ARGS, CallbackName => 'AfterGnuPG' );
 
 <div class="form-row">
-  <div class="form-group col-md-2 label">
+  <div class="form-group col-sm-2 col-md-2 label">
     <&|/l&>Subject</&>:
   </div>
-  <div class="col-md-9 value">
+  <div class="col-sm-9 col-md-9 value">
     <input class="form-control" type="text" name="UpdateSubject" value="<% $ARGS{UpdateSubject} || $TicketObj->Subject || '' %>" />
 % $m->callback( %ARGS, CallbackName => 'AfterSubject' );
   </div>

-----------------------------------------------------------------------


More information about the rt-commit mailing list