From 6439a91f1122fe287ce1958cac1f8e29d06a200a Mon Sep 17 00:00:00 2001
From: Jeremy Stretch <jstretch@netboxlabs.com>
Date: Mon, 8 Jan 2024 17:10:09 -0500
Subject: [PATCH] Fix tab styling

---
 netbox/project-static/dist/netbox.css         | Bin 542980 -> 543464 bytes
 netbox/project-static/styles/netbox.scss      |   2 +
 .../styles/transitional/_layout.scss          |   8 ++++
 .../styles/transitional/_tabs.scss            |  21 ++++++++++
 netbox/templates/base/layout.html             |  39 +++++++++++-------
 netbox/templates/generic/object.html          |  10 ++---
 netbox/templates/generic/object_list.html     |   8 ++--
 7 files changed, 62 insertions(+), 26 deletions(-)
 create mode 100644 netbox/project-static/styles/transitional/_layout.scss
 create mode 100644 netbox/project-static/styles/transitional/_tabs.scss

diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css
index 2472556f3813dff4493e82540bf10a6344cd41c2..67ccb028731f571606267ca38520a69e66c477e5 100644
GIT binary patch
delta 189
zcmZpfr1)a0VnYjK3sVbo3rh=Y3tJ2O77jKK7QKSR^yv?$vkFg7aOL2e>@Z7+w-zLp
zs+*CTn37sFz0rX~VsgMC*2!__xcD@!b2IaRGMVWaB~}L0Sv@%Zv4T}kU%Zn|ae90@
zEBo{byVw+2KqgG@-^C_5{oF1#P9*M^U2K-q4;nFwOh37sjTa)}znjf<dfaYy?&$|Q
WSh=Ss9Aamme!_^67o>!TkqZEOaYFV0

delta 32
ncmaDcRk3A~VnYjK3sVbo3rh=Y3tJ2O77jL#=?xwne;K&|zVZr(

diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index 93a88f5cd..626318f0d 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -9,4 +9,6 @@
 
 // Transitional styling to ease migration of templates from NetBox v3.x
 @import 'transitional/cards';
+@import 'transitional/layout';
 @import 'transitional/tables';
+@import 'transitional/tabs';
diff --git a/netbox/project-static/styles/transitional/_layout.scss b/netbox/project-static/styles/transitional/_layout.scss
new file mode 100644
index 000000000..e1dd57b5b
--- /dev/null
+++ b/netbox/project-static/styles/transitional/_layout.scss
@@ -0,0 +1,8 @@
+// Tweak layout section colors
+.page {
+  background-color: var(--#{$prefix}bg-surface-secondary);
+}
+.page-header {
+  background-color: var(--#{$prefix}bg-surface);
+  min-height: 0;
+}
diff --git a/netbox/project-static/styles/transitional/_tabs.scss b/netbox/project-static/styles/transitional/_tabs.scss
new file mode 100644
index 000000000..86c340805
--- /dev/null
+++ b/netbox/project-static/styles/transitional/_tabs.scss
@@ -0,0 +1,21 @@
+// In-page content tabs
+.page-tabs {
+  .nav-tabs {
+    position: relative;
+
+    .nav-link {
+      &.active,
+      &:active,
+      &:hover {
+        border-color: $card-border-color;
+        border-bottom-color: transparent;
+      }
+
+      &.active {
+        color: $headings-color;
+        background: var(--#{$prefix}bg-surface-secondary);
+        border-bottom-color: transparent;
+      }
+    }
+  }
+}
diff --git a/netbox/templates/base/layout.html b/netbox/templates/base/layout.html
index c03c5a0a6..532d18e88 100644
--- a/netbox/templates/base/layout.html
+++ b/netbox/templates/base/layout.html
@@ -116,7 +116,9 @@ Blocks:
     <div class="page-wrapper">
 
       {# Page header #}
-      <div class="container-xl mt-2 d-print-none">
+      <div class="page-header m-0">
+
+        {# Banners #}
         {% if config.BANNER_TOP %}
           <div class="text-center mx-3 mb-2">
             {{ config.BANNER_TOP|safe }}
@@ -140,30 +142,39 @@ Blocks:
             </div>
           </div>
         {% endif %}
+        {# /Banners #}
 
         {% block header %}
-          <div class="row align-items-center">
+          <div class="container-xl mt-2 d-print-none">
+            <div class="row align-items-center">
+
+              {# Title #}
+              <div class="col">
+                <h2 class="page-title mb-1">{% block title %}{% endblock title %}</h2>
+                {% block subtitle %}{% endblock %}
+              </div>
+
+              {# Controls #}
+              <div class="col-auto d-print-none">
+                {% block controls %}{% endblock controls %}
+              </div>
 
-            {# Title #}
-            <div class="col">
-              <h2 class="page-title mb-1">{% block title %}{% endblock title %}</h2>
-              {% block subtitle %}{% endblock %}
             </div>
-
-            {# Controls #}
-            <div class="col-auto d-print-none">
-              {% block controls %}{% endblock controls %}
-            </div>
-
           </div>
+
+          {# Tabs #}
+          <div class="page-tabs mt-3">
+            {% block tabs %}{% endblock %}
+          </div>
+
         {% endblock header %}
       </div>
       {# /Page header #}
 
+
       {# Page body #}
       <div class="page-body">
-        <div class="container-xl">
-          {% block tabs %}{% endblock %}
+        <div class="container-xl tab-content py-3">
           {# TODO: Remove content-wrapper block #}
           {% block content-wrapper %}
               {% block content %}{% endblock %}
diff --git a/netbox/templates/generic/object.html b/netbox/templates/generic/object.html
index 675a7f768..b677e2393 100644
--- a/netbox/templates/generic/object.html
+++ b/netbox/templates/generic/object.html
@@ -19,7 +19,7 @@ Context:
 {% endcomment %}
 
 {% block header %}
-  <div class="d-flex justify-content-between align-items-center mb-2">
+  <div class="d-flex justify-content-between align-items-center mx-3 my-2">
 
     {# Breadcrumbs #}
     <ol class="breadcrumb" aria-label="breadcrumbs">
@@ -80,7 +80,7 @@ Context:
 {% endblock controls %}
 
 {% block tabs %}
-  <ul class="nav nav-tabs mb-2 px-3">
+  <ul class="nav nav-tabs px-3">
     {# Primary tab #}
     <li class="nav-item" role="presentation">
       <a class="nav-link{% if not tab %} active{% endif %}" href="{{ object.get_absolute_url }}">{{ object|meta:"verbose_name"|bettertitle }}</a>
@@ -91,11 +91,7 @@ Context:
   </ul>
 {% endblock tabs %}
 
-{% block content-wrapper %}
-  <div class="tab-content">
-    {% block content %}{% endblock %}
-  </div>
-{% endblock content-wrapper %}
+{% block content %}{% endblock %}
 
 {% block modals %}
   {% include 'inc/htmx_modal.html' %}
diff --git a/netbox/templates/generic/object_list.html b/netbox/templates/generic/object_list.html
index 335fc6af8..1195f6d99 100644
--- a/netbox/templates/generic/object_list.html
+++ b/netbox/templates/generic/object_list.html
@@ -40,7 +40,7 @@ Context:
 {% endblock controls %}
 
 {% block tabs %}
-  <ul class="nav nav-tabs page-header-tabs px-3 mb-2" role="tablist">
+  <ul class="nav nav-tabs px-3" role="tablist">
     <li class="nav-item" role="presentation">
       <a class="nav-link active" id="object-list-tab" data-bs-toggle="tab" data-bs-target="#object-list" type="button" role="tab" aria-controls="edit-form" aria-selected="true">
         {% trans "Results" %} {% badge table.page.paginator.count %}
@@ -57,8 +57,7 @@ Context:
   </ul>
 {% endblock tabs %}
 
-{% block content-wrapper %}
-  <div class="tab-content">
+{% block content %}
 
     {# Object list #}
     <div class="tab-pane show active" id="object-list" role="tabpanel" aria-labelledby="object-list-tab">
@@ -137,9 +136,8 @@ Context:
         {% include 'inc/filter_list.html' %}
       </div>
     {% endif %}
-  </div>
 
-{% endblock content-wrapper %}
+{% endblock content %}
 
 {% block modals %}
   {% table_config_form table table_name="ObjectTable" %}