#6828: Fix various mobile UI issues

netbox/project-static/src/search.ts

@@ -32,9 +32,7 @@ function handleSearchDropdownClick(event: Event, button: HTMLButtonElement) {
  * Initialize Search Bar Elements.
  */
 function initSearchBar() {
-  for (const dropdown of getElements<HTMLUListElement>(
-    'div.search-container ul.search-obj-selector',
-  )) {
+  for (const dropdown of getElements<HTMLUListElement>('.search-obj-selector')) {
     for (const button of dropdown.querySelectorAll<HTMLButtonElement>(
       'li > button.dropdown-item',
     )) {

netbox/project-static/styles/netbox.scss

@@ -172,6 +172,34 @@ table td > .progress {
   min-width: 6rem;
 }
 
+.nav-mobile {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  @include media-breakpoint-down(lg) {
+    display: flex;
+  }
+
+  .nav-mobile-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+.search-container {
+  display: flex;
+  width: 100%;
+
+  @include media-breakpoint-down(lg) {
+    display: none;
+  }
+}
+
 .card > .table.table-flush {
   margin-bottom: 0;
   overflow: hidden;
@@ -414,6 +442,18 @@ main.login-container {
   }
 }
 
+.footer {
+  padding-top: map.get($spacers, 4);
+  padding-right: 0;
+  padding-bottom: map.get($spacers, 3);
+  padding-left: 0;
+
+  @include media-breakpoint-down(md) {
+    // Pad the bottom of the footer on mobile devices to account for mobile browser controls.
+    margin-bottom: 8rem;
+  }
+}
+
 footer.login-footer {
   height: 4rem;
   margin-top: auto;
@@ -658,6 +698,11 @@ div.content-container {
 }
 
 .search-obj-selector {
+  @include media-breakpoint-down(lg) {
+    // Limit the height and enable scrolling on mobile devices.
+    max-height: 75vh;
+    overflow-y: auto;
+  }
   .dropdown-item,
   .dropdown-header {
     font-size: $font-size-sm;
@@ -833,7 +878,7 @@ div.field-group:not(:first-of-type) {
 
 label.required {
   font-weight: $font-weight-bold;
-  &::after {
+  &:after {
     font-family: 'Material Design Icons';
     content: '\f06C4';
     font-weight: normal;
@@ -853,29 +898,34 @@ div.bulk-buttons {
   display: flex;
   justify-content: space-between;
   margin: $spacer / 2 0;
+
   // Each group of buttons needs to be contained separately for alignment purposes. This way, you
   // can put some buttons in a group that aligns left, and other buttons in a group that aligns
   // right.
-  & > div.bulk-button-group {
+  > div.bulk-button-group {
     display: flex;
+    flex-wrap: wrap;
+
     &:first-of-type:not(:last-of-type) {
       // If there are multiple bulk button groups and this is the first, the first button in the
       // group should *not* have left spacing applied, so the button group aligns with the rest
       // of the page elements.
-      & > *:first-child {
+      > *:first-child {
         margin-left: 0;
       }
     }
+
     &:last-of-type:not(:first-of-type) {
       // If there are multiple bulk button groups and this is the last, the last button in the
       // group should *not* have right spacing applied, so the button group aligns with the rest
       // of the page elements.
-      & > *:last-child {
+      > *:last-child {
         margin-right: 0;
       }
     }
+
     // However, the rest of the buttons should have spacing applied in all directions.
-    & > * {
+    > * {
       margin: $spacer / 4;
     }
   }

netbox/project-static/styles/sidenav.scss

@@ -80,12 +80,22 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out;
   border-right: 1px solid $border-color;
   transition: $transition-100ms-ease-in-out;
 
-  // Media fixes for iPhone 5 like resolutions
+  // Media fixes for mobile resolutions.
   @include media-breakpoint-down(lg) {
     transform: translateX(-$sidenav-width-closed);
+
     + .content-container[class] {
       margin-left: 0;
     }
+
+    .profile-button-container[class] {
+      display: block;
+    }
+  }
+
+  .profile-button-container {
+    display: none;
+    padding: $sidenav-link-spacing-y $sidenav-link-spacing-x;
   }
 
   + .content-container {
@@ -322,6 +332,7 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out;
     position: absolute;
     opacity: 0;
   }
+
   @include media-breakpoint-down(lg) {
     transform: translateX(0);
   }
@@ -331,14 +342,17 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out;
   .sidenav-header {
     padding: $spacer * 0.5;
   }
+
   .sidenav-brand {
     position: absolute;
     opacity: 0;
     transform: translateX(-150%);
   }
+
   .sidenav-brand-icon {
     opacity: 1;
   }
+
   .navbar-nav > .nav-item {
     > .nav-link {
       &:after {
@@ -354,6 +368,7 @@ $transition-100ms-ease-in-out: all 0.1s ease-in-out;
   .nav-link-text {
     opacity: 0;
   }
+
   @include parent-link() {
     &.active {
       margin-right: 0;