From 4c03adb6e2c8b9bea16c6b9a88a3187295a823ce Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Thu, 17 Nov 2022 15:35:21 +0100
Subject: [PATCH] feat: more horizontal space on mobile

By adding less outer padding we keep more screen space. This is important especially for small screens.
I assumed that in the task view the background of the list is not _that_ important
---
 src/components/home/contentAuth.vue | 19 ++++++-------------
 src/styles/theme/background.scss    |  5 ++++-
 src/views/tasks/TaskDetailView.vue  | 12 ++++++------
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index b11a60e63..24bc31c58 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -159,27 +159,20 @@ labelStore.loadAllLabels()
 .app-content {
 	z-index: 10;
 	position: relative;
-	padding-top: 1rem;
-
-	@media screen {
-		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
-	}
+	padding: 1.5rem 0.5rem 1rem;
 
 	@media screen and (max-width: $tablet) {
 		margin-left: 0;
-		padding-top: 1.5rem;
 		min-height: calc(100vh - 4rem);
 	}
 
+	@media screen and (min-width: $tablet) {
+		padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
+	}
 
-	@media screen {
-		&.is-menu-enabled {
+	&.is-menu-enabled {
+		@media screen and (min-width: $tablet) {
 			margin-left: $navbar-width;
-
-			@media screen and (max-width: $tablet) {
-				min-width: 100%;
-				margin-left: 0;
-			}
 		}
 	}
 
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index 150cb754f..07cf655b0 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -26,7 +26,10 @@
 
   .task-view {
     border-radius: $radius;
-    margin: 0 1rem;
+
+    @media screen and (min-width: $tablet) {
+      margin-inline: 1rem;
+    }
   }
 
   .kanban .tasks {
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 0c2c4d8f7..900862421 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -810,8 +810,8 @@ async function setPercentDone(percentDone: number) {
 }
 
 .task-view {
-	padding: 1rem;
-	padding-bottom: 0;
+	padding-top: 1rem;
+	padding-inline: .5rem;
   background-color: var(--site-background);
 	
   @media screen and (min-width: $desktop) {
@@ -862,10 +862,10 @@ h3 .button {
 }
 
 .remove {
-color: var(--danger);
-vertical-align: middle;
-padding-left: .5rem;
-line-height: 1;
+	color: var(--danger);
+	vertical-align: middle;
+	padding-left: .5rem;
+	line-height: 1;
 }
 
 :deep(.datepicker) {
-- 
2.40.1