From 66d4738ec502b8df9d9cc84117ee7460ee9f231c Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Wed, 16 Dec 2020 11:54:01 +0000
Subject: [PATCH] Make sure task title and task id are properly shown on mobile
 (#334)

Make sure task title and task id are properly shown on mobile

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/334
Co-Authored-By: konrad <konrad@kola-entertainments.de>
Co-Committed-By: konrad <konrad@kola-entertainments.de>
---
 src/styles/components/task.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 88a9ac85..1ae148e5 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -44,6 +44,15 @@
       color: lighten($grey, 25%);
       white-space: nowrap;
     }
+
+    @media screen and (max-width: $tablet) {
+      flex-direction: column;
+      align-items: start;
+
+      .title.input {
+        margin: 0 -.3em .5rem -.3em; // the title has 0.3em padding - this make the text inside of it align with the rest
+      }
+    }
   }
 
   .date-input {