fix circuit termination styles

netbox/templates/circuits/circuittermination_edit.html

@@ -8,29 +8,27 @@
   <div class="card">
       <h5 class="card-header">Termination</h5>
       <div class="card-body">
-          <div class="form-group">
-              <label class="col-md-3 control-label">Provider</label>
-              <div class="col-md-9">
-                  <p class="form-control-static">{{ obj.circuit.provider }}</p>
-              </div>
+          <div class="form-floating mb-3">
+              <input class="form-control" value="{{ obj.circuit.provider }}" disabled />
+              <label>Provider</label>
           </div>
-          <div class="form-group">
-              <label class="col-md-3 control-label">Circuit</label>
-              <div class="col-md-9">
-                  <p class="form-control-static">{{ obj.circuit.cid }}</p>
-              </div>
+          <div class="form-floating mb-3">
+              <input class="form-control" value="{{ obj.circuit.cid }}" disabled />
+              <label>Circuit</label>
           </div>
-          <div class="form-group">
-              <label class="col-md-3 control-label">Termination</label>
-              <div class="col-md-9">
-                  <p class="form-control-static">{{ form.term_side.value }}</p>
-              </div>
+          <div class="form-floating mb-3">
+              <input class="form-control" value="{{ form.term_side.value }}" disabled />
+              <label>Termination</label>
           </div>
           {% render_field form.mark_connected %}
           {% with providernetwork_tab_active=form.initial.provider_network %}
-              <ul class="nav nav-tabs" role="tablist">
-                  <li role="presentation"{% if not providernetwork_tab_active %} class="active"{% endif %}><a href="#site" role="tab" data-toggle="tab">Site</a></li>
-                  <li role="presentation"{% if providernetwork_tab_active %} class="active"{% endif %}><a href="#providernetwork" role="tab" data-toggle="tab">Provider Network</a></li>
+              <ul class="nav nav-tabs mb-3" role="tablist">
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link{% if not providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-target="#site" data-bs-toggle="tab">Site</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link{% if providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#providernetwork">Provider Network</button>
+                </li>
               </ul>
               <div class="tab-content">
                   <div class="tab-pane{% if not providernetwork_tab_active %} active{% endif %}" id="site">

netbox/templates/circuits/inc/circuit_termination.html

@@ -43,17 +43,19 @@
                     <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
                     <span class="text-muted">Marked as connected</span>
                     {% elif termination.cable %}
+                        
+                        <div class="float-end">
+                        <a href="{% url 'circuits:circuittermination_trace' pk=termination.pk %}" class="btn btn-primary btn-sm lh-1" title="Trace">
+                            <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
+                        </a>
                         {% if perms.dcim.delete_cable %}
-                        <div class="pull-right">
-                            <a href="{% url 'dcim:cable_delete' pk=termination.cable.pk %}?return_url={{ termination.circuit.get_absolute_url }}" title="Remove cable" class="btn btn-danger btn-sm">
+                            <a href="{% url 'dcim:cable_delete' pk=termination.cable.pk %}?return_url={{ termination.circuit.get_absolute_url }}" title="Remove cable" class="btn btn-danger btn-sm lh-1">
                                 <i class="mdi mdi-ethernet-cable-off" aria-hidden="true"></i> Disconnect
                             </a>
+                            {% endif %}
                         </div>
-                        {% endif %}
+                        
                         <a href="{{ termination.cable.get_absolute_url }}">{{ termination.cable }}</a>
-                        <a href="{% url 'circuits:circuittermination_trace' pk=termination.pk %}" class="btn btn-primary btn-sm" title="Trace">
-                            <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i>
-                        </a>
                         {% with peer=termination.get_cable_peer %}
                             to
                             {% if peer.device %}
@@ -61,11 +63,11 @@
                             {% elif peer.circuit %}
                                 <a href="{{ peer.circuit.get_absolute_url }}">{{ peer.circuit }}</a>
                             {% endif %}
-                            ({{ peer }})
+                            <span class="text-muted">{{ peer }}</span>
                         {% endwith %}
                     {% else %}
                         {% if perms.dcim.add_cable %}
-                            <div class="pull-right">
+                            <div class="float-end">
                                 <span class="dropdown">
                                     <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                         <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> Connect
@@ -81,7 +83,7 @@
                         {% endif %}
                     </td>
                 </tr>
-            {% else %}
+            {% comment %} {% else %} {% endcomment %}
                 <tr>
                     <td>Provider Network</td>
                     <td>