Make task list, teams and settings pages max width of $desktop and centered

src/styles/components/list-backgrounds.scss

@@ -15,7 +15,7 @@
     flex-flow: row wrap;
 
     .image {
-      width: calc(100% / 6 - 1em);
+      width: calc(100% / 5 - 1em);
       height: 120px;
       margin: .5em;
       background-size: cover;
@@ -23,7 +23,7 @@
       display: flex;
 
       @media screen and (min-width: $desktop) {
-        &:nth-child(6n) {
+        &:nth-child(5n) {
           page-break-after: always; // CSS 2.1 syntax
           break-after: always; // New syntax
         }

src/styles/components/tasks.scss

@@ -2,7 +2,6 @@
   margin-top: 1rem;
   padding: 0;
   text-align: left;
-  max-width: 80vw;
 
   @media screen and (min-width: $tablet) {
     &.short {
@@ -149,4 +148,3 @@
     }
   }
 }
-

src/styles/theme/theme.scss

@@ -63,3 +63,9 @@ button.table {
 .pagination {
   padding-bottom: 1em;
 }
+
+.is-max-width-desktop {
+  width: 100%;
+  max-width: $desktop;
+  margin: 0 auto;
+}

src/views/list/EditList.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container edit-list" :class="{ 'is-loading': listService.loading}">
+	<div class="loader-container edit-list is-max-width-desktop" :class="{ 'is-loading': listService.loading}">
 		<div class="notification is-warning" v-if="list.isArchived">
 			This list is archived.
 			It is not possible to create new or edit tasks or it.

src/views/list/views/List.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container" :class="{ 'is-loading': taskCollectionService.loading}">
+	<div class="loader-container is-max-width-desktop" :class="{ 'is-loading': taskCollectionService.loading}">
 		<div class="filter-container">
 			<div class="items">
 				<div class="search">

src/views/namespaces/EditNamespace.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container" v-bind:class="{ 'is-loading': namespaceService.loading}">
+	<div class="loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': namespaceService.loading}">
 		<div class="notification is-warning" v-if="namespace.isArchived">
 			This namespace is archived.
 			It is not possible to create new lists or edit it.

src/views/tasks/ShowTasks.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="is-max-width-desktop">
 		<h3 v-if="showAll">Current tasks</h3>
 		<h3 v-else>Tasks from {{startDate.toLocaleDateString()}} until {{endDate.toLocaleDateString()}}</h3>
 		<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks)">

src/views/teams/EditTeam.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container" v-bind:class="{ 'is-loading': teamService.loading}">
+	<div class="loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': teamService.loading}">
 		<div class="card is-fullwidth" v-if="userIsAdmin">
 			<header class="card-header">
 				<p class="card-header-title">

src/views/teams/ListTeams.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="content loader-container" v-bind:class="{ 'is-loading': teamService.loading}">
+	<div class="content loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': teamService.loading}">
 		<router-link :to="{name:'teams.create'}" class="button is-success button-right" >
 			<span class="icon is-small">
 				<icon icon="plus"/>

src/views/user/Settings.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-			class="loader-container"
+			class="loader-container is-max-width-desktop"
 			:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }">
 		<!-- Password update -->
 		<div class="card">