Fix tab styling

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';

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;
+}

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;
+      }
+    }
+  }
+}

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">
+        <div class="container-xl tab-content py-3">
-          {% block tabs %}{% endblock %}
           {# TODO: Remove content-wrapper block #}
           {% block content-wrapper %}
               {% block content %}{% endblock %}

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 %}
+{% block content %}{% endblock %}
-  <div class="tab-content">
-    {% block content %}{% endblock %}
-  </div>
-{% endblock content-wrapper %}
 
 {% block modals %}
   {% include 'inc/htmx_modal.html' %}

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 %}
+{% block content %}
-  <div class="tab-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" %}