From b262ff602cdd7a63402390c2882b80758f4e3680 Mon Sep 17 00:00:00 2001
From: Linus Groh <mail@linusgroh.de>
Date: Wed, 18 Mar 2020 17:50:49 +0000
Subject: [PATCH] Improve mobile layout further

- Reduce header paddings
- Align buttons/dropdowns
---
 src/components/AppHeader.vue |  2 +-
 src/styles/_base.scss        | 37 +++++++++++++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 1c3d3da..0b3035a 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header :class="$mq === 'sm' ? 'header-sm' : null">
     <div v-if="$mq === 'sm'" class="header-item">
       <button
         class="button button-flat button-icon"
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 27b561b..9630e4e 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -106,6 +106,14 @@ pre {
     color: var(--color-primary-text);
     background: var(--color-primary);
 
+    &.header-sm {
+      padding: 10px;
+
+      .header-item:not(.nav-sm) .nav-item:not(:first-child) {
+        margin-left: 10px;
+      }
+    }
+
     .header-item {
       display: flex;
       align-items: center;
@@ -152,19 +160,42 @@ pre {
         left: 0;
         margin: 0;
         overflow-x: auto;
-        padding: 30px;
+        padding: 20px;
         position: absolute;
         right: 0;
-        top: 76px;
+        top: 56px;
         z-index: 1;
 
         .nav-item {
+          align-items: center;
+          display: flex;
+          flex-wrap: wrap;
+          margin-left: auto;
+          margin-right: auto;
+          max-width: 400px;
+
           &:not(:first-child) {
-            margin-left: 0;
             margin-top: 20px;
           }
 
+          > .button,
+          > .dropdown,
+          > .date-time-picker {
+            flex: 1;
+          }
+
+          > .dropdown .dropdown-button,
+          > .date-time-picker .dropdown-button {
+            width: 100%;
+          }
+
+          > .date-time-picker {
+            margin-left: 0;
+            margin-right: 0;
+          }
+
           > span {
+            flex-basis: 100%;
             margin: 0;
           }