From 79f726e6cd6ee8f0177d3e8d8d5c63d79af23b8c Mon Sep 17 00:00:00 2001
From: Matt <mtt.lov@gmail.com>
Date: Thu, 5 Aug 2021 09:59:13 -0700
Subject: [PATCH] #6797: Fix various mobile layout issues

---
 netbox/project-static/dist/netbox-dark.css   | Bin 806206 -> 806224 bytes
 netbox/project-static/dist/netbox-light.css  | Bin 501068 -> 501086 bytes
 netbox/project-static/styles/netbox.scss     |   4 +++-
 netbox/templates/dcim/cable_connect.html     |  18 +++++++++---------
 netbox/templates/dcim/device/interfaces.html |   2 +-
 netbox/templates/dcim/inc/cable_form.html    |   2 +-
 netbox/templates/dcim/rack_edit.html         |   2 +-
 netbox/templates/ipam/service_edit.html      |   6 +++---
 netbox/templates/utilities/render_field.html |  10 +++++-----
 9 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
index c24c562a981d897796ba40e709aad411eeb0d5af..6ef1beacb22b6cada9df3e09598e2ea8f122f80b 100644
GIT binary patch
delta 80
zcmV-W0I&bPnlaFtF@S^tgaU*Egam{Iga(8Mgb0KQgbK6^M&*}~2L>0HZgB+&w`%1J
mu`>)iVQgt<ZY^naWo>hpuUiE!mI4d}mv9&i47W}h4Dd60H5*a@

delta 71
zcmV-N0J#6qnlZkbF@S^tgaU*Egam{Iga(8Mgb0KQgbK6^M&$({VRdwGmr?c$7ng2v
d1qhdlas@DxU^)c1ndJ+8Gm`-yBd1Uq3^b9&7+wGX

diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css
index 6566438c461c25ba7dac380c18bbe4e52933ce8f..cb8ad40a8d22991daf0c86c8ba636254e18474d8 100644
GIT binary patch
delta 48
zcmX?eO77k%xrP?T7N!>F7M2#)7Pc+yA@S3S*u}RO#IqYJO`hMzJKe^Em23OLM)uXp
E0KTjdIRF3v

delta 52
zcmcb2O76@lxrP?T7N!>F7M2#)7Pc+yA@OVqiKQj^*3&;$v5Icbif1=cnqJ++uD<<N
IBYTT701RpqDF6Tf

diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index dd5edc5b9..236d44f1b 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -255,7 +255,7 @@ div.title-container {
 
   #content-title {
     display: flex;
-    flex: 1 0 auto;
+    flex: 1 0;
     flex-direction: column;
     padding-bottom: map.get($spacers, 2);
   }
@@ -721,6 +721,8 @@ div.bulk-buttons {
   > div.bulk-button-group {
     display: flex;
     flex-wrap: wrap;
+    // For small screens: don't fill the available space (thereby expanding the size of the button).
+    align-items: flex-start;
 
     &:first-of-type:not(:last-of-type) {
       // If there are multiple bulk button groups and this is the first, the first button in the
diff --git a/netbox/templates/dcim/cable_connect.html b/netbox/templates/dcim/cable_connect.html
index e012c23b9..e60b8b92f 100644
--- a/netbox/templates/dcim/cable_connect.html
+++ b/netbox/templates/dcim/cable_connect.html
@@ -23,43 +23,43 @@
                     {% if termination_a.device %}
                         {# Device component #}
                         <div class="row mb-3">
-                            <label class="col-sm-3 col-form-label text-end">Region</label>
+                            <label class="col-sm-3 col-form-label text-lg-end">Region</label>
                             <div class="col">
                                 <input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
                             </div>
                         </div>
                         <div class="row mb-3">
-                            <label class="col-sm-3 col-form-label text-end">Site</label>
+                            <label class="col-sm-3 col-form-label text-lg-end">Site</label>
                             <div class="col">
                                 <input class="form-control" value="{{ termination_a.device.site }}" disabled />
                             </div>
                         </div>
                         <div class="row mb-3">
-                            <label class="col-sm-3 col-form-label text-end">Location</label>
+                            <label class="col-sm-3 col-form-label text-lg-end">Location</label>
                             <div class="col">
                                 <input class="form-control" value="{{ termination_a.device.location|default:"None" }}" disabled />
                             </div>
                         </div>
                         <div class="row mb-3">
-                            <label class="col-sm-3 col-form-label text-end">Rack</label>
+                            <label class="col-sm-3 col-form-label text-lg-end">Rack</label>
                             <div class="col">
                                 <input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
                             </div>
                         </div>
                         <div class="row mb-3">
-                            <label class="col-sm-3 col-form-label text-end">Device</label>
+                            <label class="col-sm-3 col-form-label text-lg-end">Device</label>
                             <div class="col">
                                 <input class="form-control" value="{{ termination_a.device }}" disabled />
                             </div>
                         </div>
                         <div class="row mb-3">
-                            <label class="col-sm-3 col-form-label text-end">Type</label>
+                            <label class="col-sm-3 col-form-label text-lg-end">Type</label>
                             <div class="col">
                                 <input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
                             </div>
                         </div>
                         <div class="row mb-3">
-                            <label class="col-sm-3 col-form-label text-end">Name</label>
+                            <label class="col-sm-3 col-form-label text-lg-end">Name</label>
                             <div class="col">
                                 <input class="form-control" value="{{ termination_a }}" disabled />
                             </div>
@@ -94,7 +94,7 @@
                 </div>
             </div>
         </div>
-        <div class="col col-md-2 d-flex flex-column justify-content-center align-items-center">
+        <div class="col col-md-2 flex-column justify-content-center align-items-center d-none d-md-flex">
             <i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
         </div>
         <div class="col col-md-5">
@@ -140,7 +140,7 @@
                         {% render_field form.termination_b_circuit %}
                     {% endif %}
                     <div class="row mb-3">
-                        <label class="col-sm-3 col-form-label text-end">Type</label>
+                        <label class="col-sm-3 col-form-label text-lg-end">Type</label>
                         <div class="col">
                             <input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
                         </div>
diff --git a/netbox/templates/dcim/device/interfaces.html b/netbox/templates/dcim/device/interfaces.html
index 3f306de9f..00ce32a05 100644
--- a/netbox/templates/dcim/device/interfaces.html
+++ b/netbox/templates/dcim/device/interfaces.html
@@ -34,7 +34,7 @@
             </div>
         </div>
     </div>
-    {% render_table interface_table 'inc/table.html' %}
+    {% include 'inc/responsive_table.html' with table=interface_table %}
     <div class="noprint bulk-buttons">
         <div class="bulk-button-group">
         {% if perms.dcim.change_interface %}
diff --git a/netbox/templates/dcim/inc/cable_form.html b/netbox/templates/dcim/inc/cable_form.html
index 4f93f9010..6d88c26ae 100644
--- a/netbox/templates/dcim/inc/cable_form.html
+++ b/netbox/templates/dcim/inc/cable_form.html
@@ -7,7 +7,7 @@
         {% render_field form.label %}
         {% render_field form.color %}
         <div class="row mb-3">
-            <label class="col-sm-3 col-form-label text-end">{{ form.length.label }}</label>
+            <label class="col-sm-3 col-form-label text-lg-end">{{ form.length.label }}</label>
             <div class="col-md-5">
                 {{ form.length }}
             </div>
diff --git a/netbox/templates/dcim/rack_edit.html b/netbox/templates/dcim/rack_edit.html
index 530f23244..55be5649b 100644
--- a/netbox/templates/dcim/rack_edit.html
+++ b/netbox/templates/dcim/rack_edit.html
@@ -30,7 +30,7 @@
         {% render_field form.width %}
         {% render_field form.u_height %}
         <div class="row mb-3">
-            <label class="col col-md-3 col-form-label text-end">Outer Dimensions</label>
+            <label class="col col-md-3 col-form-label text-lg-end">Outer Dimensions</label>
             <div class="col col-md-3">
                 {{ form.outer_width }}
                 <div class="form-text">Width</div>
diff --git a/netbox/templates/ipam/service_edit.html b/netbox/templates/ipam/service_edit.html
index dd256207f..f37046469 100644
--- a/netbox/templates/ipam/service_edit.html
+++ b/netbox/templates/ipam/service_edit.html
@@ -6,14 +6,14 @@
         <h5 class="text-center">Service</h5>
         {% if obj.device %}
             <div class="row mb-3">
-                <label class="col-sm-3 col-form-label text-end">Device</label>
+                <label class="col-sm-3 col-form-label text-lg-end">Device</label>
                 <div class="col">
                     <input class="form-control" value="{{ obj.device }}" disabled />
                 </div>
             </div>
         {% else %}
             <div class="row mb-3">
-                <label class="col-sm-3 col-form-label text-end">Virtual Machine</label>
+                <label class="col-sm-3 col-form-label text-lg-end">Virtual Machine</label>
                 <div class="col">
                     <input class="form-control" value="{{ obj.virtual_machine }}" disabled />
                 </div>
@@ -21,7 +21,7 @@
         {% endif %}
         {% render_field form.name %}
         <div class="row">
-            <label class="col-sm-3 col-form-label text-end">Port(s)</label>
+            <label class="col-sm-3 col-form-label text-lg-end">Port(s)</label>
             <div class="col-2">
                 {{ form.protocol }}
             </div>
diff --git a/netbox/templates/utilities/render_field.html b/netbox/templates/utilities/render_field.html
index c67df331a..2471f2322 100644
--- a/netbox/templates/utilities/render_field.html
+++ b/netbox/templates/utilities/render_field.html
@@ -26,7 +26,7 @@
 {% elif field|widget_type == 'textarea' and not field.label %}
     <div class="row mb-3">
         {% if label %}
-        <label class="col-sm-3 col-form-label text-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
+        <label class="col-sm-3 col-form-label text-lg-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
             {{ label }}
         </label>
         {% else %}
@@ -47,7 +47,7 @@
 
 {% elif field|widget_type == 'slugwidget' %}
     <div class="row mb-3">
-        <label class="col-sm-3 col-form-label text-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
+        <label class="col-sm-3 col-form-label text-lg-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
             {{ field.label }}
         </label>
         <div class="col">
@@ -63,7 +63,7 @@
 {% elif field|widget_type == 'selectspeedwidget' %}
     {# This is outside the widget because bootstrap requires a specific order for border-radius purposes. #}
     <div class="row mb-3">
-        <label class="col-sm-3 col-form-label text-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
+        <label class="col-sm-3 col-form-label text-lg-end{% if field.field.required %} required{% endif %}" for="{{ field.id_for_label }}">
             {{ field.label }}
         </label>
         <div class="col">
@@ -102,7 +102,7 @@
 
 {% elif field|widget_type == 'selectmultiple' %}
     <div class="row">
-        <label for="{{ field.id_for_label }}" class="form-label col col-md-3 text-end{% if field.field.required %} required{% endif %}">
+        <label for="{{ field.id_for_label }}" class="form-label col col-md-3 text-lg-end{% if field.field.required %} required{% endif %}">
             {{ field.label }}
         </label>
         <div class="col col-md-9">
@@ -118,7 +118,7 @@
 
 {% else %}
     <div class="row mb-3">
-        <label for="{{ field.id_for_label }}" class="col-sm-3 col-form-label text-end{% if field.field.required %} required{% endif %}">
+        <label for="{{ field.id_for_label }}" class="col-sm-3 col-form-label text-lg-end{% if field.field.required %} required{% endif %}">
             {{ field.label }}
         </label>
         <div class="col">