From a23b4a96ee25557ef8cc984cf8f716de47b72dd9 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 27 Feb 2022 16:36:20 +0100
Subject: [PATCH] fix: kanban board layout on mobile

---
 src/styles/components/list.scss | 2 +-
 src/views/list/ListWrapper.vue  | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index 6475a395..5fbb0677 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -23,7 +23,7 @@ $filter-container-top-link-share-list: -47px;
     display: flex;
     justify-content: flex-end;
 
-    .button:not(:last-child) {
+    .button:not(:last-of-type) {
       margin-right: .5rem;
     }
   }
diff --git a/src/views/list/ListWrapper.vue b/src/views/list/ListWrapper.vue
index d816b90e..9b3911a7 100644
--- a/src/views/list/ListWrapper.vue
+++ b/src/views/list/ListWrapper.vue
@@ -139,6 +139,7 @@ async function loadList(listIdToLoad: number) {
   @media screen and (max-width: $tablet) {
     display: flex;
     justify-content: center;
+    flex-direction: column;
   }
 }
 
@@ -149,7 +150,7 @@ async function loadList(listIdToLoad: number) {
   font-size: .75rem;
   box-shadow: var(--shadow-sm);
   height: $switch-view-height;
-  margin-bottom: 1rem;
+  margin: 0 auto 1rem;
   padding: .5rem;
 
   a {