fix: Fix layout for small viewport width

tohjustin · Feb 12, 2020 · a386eaf · a386eaf
1 parent a4a20de
commit a386eaf
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -38,7 +38,6 @@ $responsive-card__margin-y: $margin__card;
 
 @mixin responsive-card__width--100 {
   margin-right: 0;
-  min-width: 450px;
   width: calc(100% - #{$responsive-card__margin-x});
 }
 

diff --git a/src/styles/app.scss b/src/styles/app.scss
@@ -2,7 +2,7 @@
 @import "normalize";
 @import "variables";
 
-$banner__height: $base__size * 3;
+$banner__padding: $base__size / 2 $base__size * 1.5;
 
 body {
   font-family: $font-family;
@@ -27,21 +27,29 @@ text {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  width: 100vw;
+  min-width: 412px;
 }
 
 .app__banner {
-  display: flex;
-  height: $banner__height;
+  padding: $banner__padding;
+  flex: 0 0 auto;
 }
 
 .app__container {
   display: flex;
-  height: calc(100% - #{$banner__height});
-  flex-grow: 1;
-}
-
-.app__view {
   height: 100%;
-  width: 100%;
-  overflow-y: scroll;
+  overflow: auto;
+  flex: 1 0;
+
+  .app__navbar {
+    flex: 0 0;
+  }
+
+  .app__view {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    flex: 1 0;
+  }
 }
diff --git a/src/views/history/styles.scss b/src/views/history/styles.scss
@@ -4,6 +4,14 @@
 .history-view__header {
   display: flex;
   align-items: center;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  max-width: 100%;
+
+  &:not(:first-child) {
+    justify-content: flex-end;
+  }
 }
 
 .history-view__status {