From f0ebfb7f58c8f044ae25d2e40661cebf581e57d3 Mon Sep 17 00:00:00 2001
From: Martin Filser <github-wekan@linux-email.de>
Date: Tue, 30 Nov 2021 13:07:43 +0100
Subject: [PATCH] List header styling on mobile view

- nearly to the same as in desktop view
---
 client/components/lists/list.styl | 33 +++++++++++++++++++------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/client/components/lists/list.styl b/client/components/lists/list.styl
index 289aa2a2d..52fbbb82c 100644
--- a/client/components/lists/list.styl
+++ b/client/components/lists/list.styl
@@ -157,18 +157,6 @@
     float: left
 
 @media screen and (max-width: 800px)
-  .list-header-menu
-    position: absolute
-    padding: 27px 19px
-    margin-top: 1px
-    top: -7px
-    margin-right: 7px
-    right: -3px
-
-  .list-header
-    .list-header-name
-      margin-left: 1.4rem
-
   .mini-list
     flex: 0 0 60px
     height: auto
@@ -212,7 +200,6 @@
     display: flex
     align-items: center
     .list-header-left-icon
-      display: inline
       padding: 7px
       padding-right: 27px
       margin-top: 1px
@@ -235,6 +222,26 @@
       right: 10px
       font-size: 24px
 
+  .list-header
+    display: grid
+    grid-template-columns: 30px 5fr 1fr
+    .list-header-left-icon
+      display: grid
+      grid-row: 1/3
+      grid-column: 1
+    .list-header-name
+      grid-row: 1
+      grid-column: 2
+      align-self: end
+    .cardCount
+      grid-row: 2
+      grid-column: 2
+      align-self: start
+    .list-header-menu
+      grid-row: 2
+      grid-column: 3
+      align-self: start
+
 .link-board-wrapper
   display: flex
   align-items: baseline