#6797: Fix various mobile layout issues

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

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>

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 %}

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>

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>

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>

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">