From 6845fb0f005f0bdc15a258ae2ebd7f9be5341f76 Mon Sep 17 00:00:00 2001
From: Matt <mtt.lov@gmail.com>
Date: Fri, 6 Aug 2021 17:56:38 -0700
Subject: [PATCH] Improve object view on small screens

---
 netbox/project-static/dist/netbox-dark.css  | Bin 806443 -> 806565 bytes
 netbox/project-static/dist/netbox-light.css | Bin 501305 -> 501393 bytes
 netbox/project-static/styles/netbox.scss    |  11 ++++++++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
index 9d5efdc363e7ad5d18ed851357d2203a955c2de4..2a25e77693c2b7a2dbf9b1d49ea887ea46cc1f6e 100644
GIT binary patch
delta 90
zcmV-g0Hyz{oH3=HF@S^tgaU*Egam{Iga(8Mgb0KQgbK6^q2-rdaRm{Vky`~Hm(Z99
w4VS^`3lx`d8U`tsd*urh5@u{=cr9dUa%E$5X>V>ia&LE&F%u-W>*WhTXwrEhf&c&j

delta 67
zcmV-J0KEUDoiVGNF@S^tgaU*Egam{Iga(8Mgb0KQgbK6^q2-souLTO1pj!nHm(Z99
Z4VQCp1tXVG0}KS0f8`4gw|M3YEoeYL7()O6

diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css
index dd8a891c45219d0f0c545f8ed0efdc006a3826fc..99d4674980d125b243e53c090357d7479ba66e1d 100644
GIT binary patch
delta 79
zcmV-V0I>hL%pQ@=9)N@agaU*Egam{Iga)(+(O;K9qz4g~p<o9em*9Q{2AAMs1qYWg
lR0A6mWNCITbZK;KWi4ZGZggR3Ze?<p;8Ft=xA<QNK}M9@9XbF2

delta 44
zcmbPuR&M7RxrP?T7N!>F7M2#)7Pc+y7vrbvdoy!Q=SXB1m|oDt&bvJzf!)y!0B1A~
Ae*gdg

diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index 82e836585..058526cbb 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -250,9 +250,18 @@ table {
 
 div.title-container {
   display: flex;
+  // On small screens, `flex-direction: column;` ensures the control buttons don't appear on the
+  // same line as the title, but rather break to the next line.
+  flex-direction: column;
   flex-wrap: wrap;
   justify-content: space-between;
 
+  @include media-breakpoint-up(lg) {
+    // On large screens, `flex-direction: row;` allows the control buttons to appear vertically
+    // aligned with the title.
+    flex-direction: row;
+  }
+
   #content-title {
     display: flex;
     flex: 1 0;
@@ -501,7 +510,7 @@ div.content-container {
   position: relative;
   display: flex;
   flex-direction: column;
-  width: calc(100% - 3rem);  // $sidenav-width-closed
+  width: calc(100% - #{$sidenav-width-closed});
   min-height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;