#6372: Responsive layout improvements

netbox/project-static/netbox.scss

@@ -107,9 +107,11 @@ span.profile-button .dropdown-menu {
   box-shadow: $box-shadow;
   &:not(.show) {
     opacity: 0;
+    pointer-events: none;
   }
   &.show {
     opacity: 1;
+    pointer-events: auto;
   }
 }
 
@@ -389,9 +391,11 @@ div.content-container {
 }
 
 // Prevent scrolling of body content when nav menu is open on mobile.
-.sidebar.collapse.show ~ .content-container {
+.sidebar.collapse.show ~ .content-container > .content {
   @media (max-width: map.get($grid-breakpoints, 'md')) {
     position: fixed;
+    top: 0;
+    left: 0;
     overflow-y: hidden;
   }
 }
@@ -412,8 +416,9 @@ div.content-container {
     max-width: $sidebar-width;
   }
 
-  @media (max-width: map.get($grid-breakpoints, 'md')) {
+  @include media-breakpoint-down(md) {
     top: 8.125rem;
+    background-color: var(--nbx-body-bg);
   }
 
   div.accordion-item {
@@ -468,6 +473,11 @@ div.content-container {
     position: sticky;
     height: 8rem;
     background-color: var(--nbx-sidebar-bg);
+
+    @include media-breakpoint-down(md) {
+      background-color: var(--nbx-body-bg);
+    }
+
     .nav-link {
       padding: 0.5rem 0.25rem;
     }

netbox/templates/base/layout.html

@@ -23,7 +23,7 @@
             <div class="d-block d-md-none mx-1 my-3 search-container">
               {% search_options %}
             </div>
-            <div class="d-flex d-md-none mx-1 my-3 justify-content-end">
+            <div class="d-flex d-md-none mx-1 my-3 justify-content-center justify-content-md-end order-last order-md-0">
               {% include 'inc/profile_button.html' %}
             </div>
             {% nav %}
@@ -65,8 +65,8 @@
         {# Top bar #}
         <nav class="navbar navbar-light sticky-top flex-md-nowrap p-3 search container-fluid">
           <div class="d-md-none w-100 d-flex justify-content-between align-items-center my-3">
-              <a class="px-2 sidebar-logo d-block d-md-none" href="{% url 'home' %}">
-                <img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" />
+              <a class="p-2 sidebar-logo d-block d-md-none" href="{% url 'home' %}">
+                <img src="{% static 'netbox_logo.svg' %}" alt="NetBox logo" width="100%" />
               </a>
               <button
                 type="button"

netbox/templates/home.html

@@ -11,7 +11,7 @@
   <div class="stats-container">
     <div class="row masonry">
       {% for section in stats %}
-      <div class="col col-sm-12 col-md-4 my-2 masonry-item">
+      <div class="col col-sm-12 col-lg-6 col-xl-4 my-2 masonry-item">
         <div class="card">
           <h5 class="card-header text-primary">{{ section.label }}</h5>
           <div class="card-body">