From e531090200833e5fc1ac073175b0be0cff171eee Mon Sep 17 00:00:00 2001
From: kkthxbye-code <festll234@gmail.com>
Date: Tue, 20 Dec 2022 11:53:58 +0100
Subject: [PATCH] Fix wrong HTML causing tab list to extend past the end of the
 parent row

---
 netbox/templates/dcim/inventoryitem_edit.html | 76 +++++++++----------
 1 file changed, 37 insertions(+), 39 deletions(-)

diff --git a/netbox/templates/dcim/inventoryitem_edit.html b/netbox/templates/dcim/inventoryitem_edit.html
index 8a5fb4ae0..006b6f008 100644
--- a/netbox/templates/dcim/inventoryitem_edit.html
+++ b/netbox/templates/dcim/inventoryitem_edit.html
@@ -31,46 +31,44 @@
       <div class="row mb-2">
         <h5 class="offset-sm-3">Component Assignment</h5>
       </div>
-      <div class="row mb-2">
-        <div class="offset-sm-3">
-          <ul class="nav nav-pills" role="tablist">
+      <div class="row mb-2 offset-sm-3">
+        <ul class="nav nav-pills" role="tablist">
+          <li role="presentation" class="nav-item">
+              <button role="tab" type="button" id="consoleport_tab" data-bs-toggle="tab" aria-controls="consoleport" data-bs-target="#consoleport" class="nav-link {% if form.initial.consoleport or form.no_component %}active{% endif %}">
+                Console Port
+              </button>
+            </li>
             <li role="presentation" class="nav-item">
-                <button role="tab" type="button" id="consoleport_tab" data-bs-toggle="tab" aria-controls="consoleport" data-bs-target="#consoleport" class="nav-link {% if form.initial.consoleport or form.no_component %}active{% endif %}">
-                  Console Port
-                </button>
-              </li>
-              <li role="presentation" class="nav-item">
-                <button role="tab" type="button" id="consoleserverport_tab" data-bs-toggle="tab" aria-controls="consoleserverport" data-bs-target="#consoleserverport" class="nav-link {% if form.initial.consoleserverport %}active{% endif %}">
-                  Console Server Port
-                </button>
-              </li>
-              <li role="presentation" class="nav-item">
-                <button role="tab" type="button" id="frontport_tab" data-bs-toggle="tab" aria-controls="frontport" data-bs-target="#frontport" class="nav-link {% if form.initial.frontport %}active{% endif %}">
-                  Front Port
-                </button>
-              </li>
-              <li role="presentation" class="nav-item">
-                <button role="tab" type="button" id="interface_tab" data-bs-toggle="tab" aria-controls="interface" data-bs-target="#interface" class="nav-link {% if form.initial.interface %}active{% endif %}">
-                  Interface
-                </button>
-              </li>
-              <li role="presentation" class="nav-item">
-                <button role="tab" type="button" id="poweroutlet_tab" data-bs-toggle="tab" aria-controls="poweroutlet" data-bs-target="#poweroutlet" class="nav-link {% if form.initial.poweroutlet %}active{% endif %}">
-                  Power Outlet
-                </button>
-              </li>
-              <li role="presentation" class="nav-item">
-                <button role="tab" type="button" id="powerport_tab" data-bs-toggle="tab" aria-controls="powerport" data-bs-target="#powerport" class="nav-link {% if form.initial.powerport %}active{% endif %}">
-                  Power Port
-                </button>
-              </li>
-              <li role="presentation" class="nav-item">
-                <button role="tab" type="button" id="rearport_tab" data-bs-toggle="tab" aria-controls="rearport" data-bs-target="#rearport" class="nav-link {% if form.initial.rearport %}active{% endif %}">
-                  Rear Port
-                </button>
-              </li>
-          </ul>
-        </div>
+              <button role="tab" type="button" id="consoleserverport_tab" data-bs-toggle="tab" aria-controls="consoleserverport" data-bs-target="#consoleserverport" class="nav-link {% if form.initial.consoleserverport %}active{% endif %}">
+                Console Server Port
+              </button>
+            </li>
+            <li role="presentation" class="nav-item">
+              <button role="tab" type="button" id="frontport_tab" data-bs-toggle="tab" aria-controls="frontport" data-bs-target="#frontport" class="nav-link {% if form.initial.frontport %}active{% endif %}">
+                Front Port
+              </button>
+            </li>
+            <li role="presentation" class="nav-item">
+              <button role="tab" type="button" id="interface_tab" data-bs-toggle="tab" aria-controls="interface" data-bs-target="#interface" class="nav-link {% if form.initial.interface %}active{% endif %}">
+                Interface
+              </button>
+            </li>
+            <li role="presentation" class="nav-item">
+              <button role="tab" type="button" id="poweroutlet_tab" data-bs-toggle="tab" aria-controls="poweroutlet" data-bs-target="#poweroutlet" class="nav-link {% if form.initial.poweroutlet %}active{% endif %}">
+                Power Outlet
+              </button>
+            </li>
+            <li role="presentation" class="nav-item">
+              <button role="tab" type="button" id="powerport_tab" data-bs-toggle="tab" aria-controls="powerport" data-bs-target="#powerport" class="nav-link {% if form.initial.powerport %}active{% endif %}">
+                Power Port
+              </button>
+            </li>
+            <li role="presentation" class="nav-item">
+              <button role="tab" type="button" id="rearport_tab" data-bs-toggle="tab" aria-controls="rearport" data-bs-target="#rearport" class="nav-link {% if form.initial.rearport %}active{% endif %}">
+                Rear Port
+              </button>
+            </li>
+        </ul>
       </div>
       <div class="tab-content p-0 border-0">
         <div class="tab-pane {% if form.initial.consoleport or form.no_component %}active{% endif %}" id="consoleport" role="tabpanel" aria-labeled-by="consoleport_tab">