From e0d120da5dd415765525135924ba1846610c1d5d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 24 Jan 2021 12:31:30 +0100
Subject: [PATCH] Fix kanban height on mobile

---
 src/styles/components/kanban.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 99dcc435..1ed1a048 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -4,6 +4,8 @@ $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 $bucket-width: 300px;
 
 $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
+$crazy-height-calculation-tasks: '#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem';
+$filter-container-height: '1rem - #{$switch-view-height}';
 
 .app-content.list\.kanban {
   padding-bottom: 0;
@@ -19,6 +21,10 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
   margin: 0 -1.5rem;
   padding: 0 1.5rem;
 
+  @media screen and (max-width: $tablet) {
+    height: calc(#{$crazy-height-calculation} - #{$filter-container-height});
+  }
+
   .bucket {
     background-color: $bucket-background;
     border-radius: $radius;
@@ -31,9 +37,13 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
     max-width: $bucket-width;
 
     .tasks {
-      max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem);
+      max-height: calc(#{$crazy-height-calculation-tasks});
       overflow: auto;
 
+      @media screen and (max-width: $tablet) {
+        max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});
+      }
+
       .task {
 
         &:first-child {