Merge pull request #4055 from wowsims/sidebar-alignment

Make sidebar stats align to bottom when they don't use the entire view height
wowsims · Nov 21, 2023 · 991571e · 991571e
2 parents 57593f3 + 5a1dc7b
commit 991571e
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/ui/scss/core/sim_ui/_sidebar.scss b/ui/scss/core/sim_ui/_sidebar.scss
@@ -3,7 +3,6 @@
 @import "../components/sim_title_dropdown";
 
 .sim-sidebar {
-  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -18,7 +17,6 @@
     padding-bottom: map.get($spacers, 3);
     display: flex;
     flex-direction: column;
-    flex-grow: 1;
 
     &> *:not(:last-child) {
       margin-bottom: map.get($spacers, 4);
@@ -71,6 +69,21 @@
   }
 }
 
+@include media-breakpoint-up(md) {
+  .sim-sidebar {
+    // Allow the stats to align to the bottom of the viewport if the section is small enough to avoid scrolling
+    .sim-sidebar-content {
+      min-height: calc(100vh - $sim-header-height);
+
+      .sim-sidebar-footer {
+        flex: 1;
+        display: flex;
+        align-items: flex-end;
+      }
+    }
+  }
+}
+
 @include media-breakpoint-down(lg) {
   .sim-sidebar {
     .sim-sidebar-content {