From fc4877c3bdb17f81ce3f76dfc32a07026219b5c1 Mon Sep 17 00:00:00 2001 From: kristianwind Date: Thu, 27 Aug 2026 12:24:29 +0200 Subject: [PATCH] fix(mobile): stop the task drawer's priority/due row overflowing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On a phone the detail drawer's field grid stayed two columns, so each field got half the viewport. Prioritet collapsed to "Ing" and the due row — a date input plus fixed-width time and duration fields — ran off the right edge. Below 560px the grid now stacks to one column per field and the due row wraps. Co-Authored-By: Claude Opus 4.8 --- web/src/lib/components/TaskDetail.svelte | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/web/src/lib/components/TaskDetail.svelte b/web/src/lib/components/TaskDetail.svelte index b227e41..30cae2e 100644 --- a/web/src/lib/components/TaskDetail.svelte +++ b/web/src/lib/components/TaskDetail.svelte @@ -1115,5 +1115,21 @@ width: auto; border-left: 0; } + + /* Two columns is half a phone each: Prioritet collapses to "Ing" and the + due-row (date + fixed-width time + duration) runs off the right edge. One + column per field gives each its full width; the due-row wraps if even that + is not enough. */ + .grid { + grid-template-columns: 1fr; + } + + .due { + flex-wrap: wrap; + } + + .due input[type='date'] { + flex: 1 1 100%; + } }