Make filter buttons look better on mobile

src/styles/components/gantt.scss

@@ -198,7 +198,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
   }
 
   .filter-container {
-    margin-top: -133px;
+    margin-top: -136px;
   }
 }
 

src/styles/components/list.scss

@@ -66,7 +66,7 @@
   max-width: 180px;
   position: absolute;
   right: 1.5em;
-  margin-top: -56px;
+  margin-top: -59px;
   z-index: 4;
 
   .items {
@@ -85,7 +85,6 @@
   .card {
     text-align: left;
     margin-top: calc(1rem - 1px);
-    float: right;
   }
 
   .fancycheckbox {
@@ -125,10 +124,14 @@
 
   @media screen and (max-width: $tablet) {
     position: static;
-    margin: 1rem 0;
+    margin: 0 0 1rem 0;
     max-width: 100%;
     min-width: auto;
 
+    .items {
+      justify-content: center;
+    }
+
     .search {
       width: 100%;
 
@@ -141,16 +144,16 @@
 
 .link-share-container .gantt-chart-container .filter-container,
 .gantt-chart-container .filter-container {
-  margin-top: -133px;
+  margin-top: -136px;
 }
 
 .link-share-container .list-view .filter-container {
-  margin-top: -44px;
+  margin-top: -47px;
 }
 
 .link-share-container .filter-container {
   right: 9rem;
-  margin-top: -56px;
+  margin-top: -59px;
 }
 
 .list-namespace-title {

src/styles/components/switch-view.scss

@@ -5,8 +5,8 @@
   font-size: .8em;
   box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
   height: $switch-view-height;
-  margin-bottom: 1em;
-
+  margin-bottom: 1rem;
+  
   a {
     padding: .5em;
     display: inline-block;
@@ -38,3 +38,10 @@
     }
   }
 }
+
+@media screen and (max-width: $tablet) {
+  .switch-view-container {
+    display: flex;
+    justify-content: center;
+  }
+}

src/views/list/ShowList.vue

@@ -3,27 +3,29 @@
 		:class="{ 'is-loading': listService.loading}"
 		class="loader-container"
 	>
-		<div class="switch-view">
-			<router-link
-				:class="{'is-active': $route.name === 'list.list'}"
-				:to="{ name: 'list.list',   params: { listId: listId } }">
-				List
-			</router-link>
-			<router-link
-				:class="{'is-active': $route.name === 'list.gantt'}"
-				:to="{ name: 'list.gantt',  params: { listId: listId } }">
-				Gantt
-			</router-link>
-			<router-link
-				:class="{'is-active': $route.name === 'list.table'}"
-				:to="{ name: 'list.table',  params: { listId: listId } }">
-				Table
-			</router-link>
-			<router-link
-				:class="{'is-active': $route.name === 'list.kanban'}"
-				:to="{ name: 'list.kanban', params: { listId: listId } }">
-				Kanban
-			</router-link>
+		<div class="switch-view-container">
+			<div class="switch-view">
+				<router-link
+					:class="{'is-active': $route.name === 'list.list'}"
+					:to="{ name: 'list.list',   params: { listId: listId } }">
+					List
+				</router-link>
+				<router-link
+					:class="{'is-active': $route.name === 'list.gantt'}"
+					:to="{ name: 'list.gantt',  params: { listId: listId } }">
+					Gantt
+				</router-link>
+				<router-link
+					:class="{'is-active': $route.name === 'list.table'}"
+					:to="{ name: 'list.table',  params: { listId: listId } }">
+					Table
+				</router-link>
+				<router-link
+					:class="{'is-active': $route.name === 'list.kanban'}"
+					:to="{ name: 'list.kanban', params: { listId: listId } }">
+					Kanban
+				</router-link>
+			</div>
 		</div>
 		<div class="notification is-warning" v-if="list.isArchived">
 			This list is archived.