From d92aeecfae7c766cc5025d77ae80a088057d7662 Mon Sep 17 00:00:00 2001
From: nesquena-hermes <nesquena-hermes@users.noreply.github.com>
Date: Mon, 10 Aug 2026 20:15:12 +0000
Subject: [PATCH] fix(kanban): keep board-settings field in-viewport on short
 landscape phones

The default-workdir layout test (#5932) failed on CI at 480x320 for all
locales: the board modal is centered in the overlay, and at short landscape
heights the capped modal's lower rows render below the fold, so the workdir
field's bottom (366) exceeded the 320px viewport. Anchor the overlay to the
top at (max-width:640px and max-height:480px) so the capped, internally
scrollable modal is reachable from the top, and switch the cap to 100dvh for
reliable mobile viewport height. Verified: all 15 layout cases pass.
---
 static/style.css | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/static/style.css b/static/style.css
index 8b2489e6..5c1d4a99 100644
--- a/static/style.css
+++ b/static/style.css
@@ -7073,12 +7073,23 @@ main.main.showing-insights > #mainInsights{display:flex;overflow-y:auto;}
   .kanban-modal-overlay{align-items:safe center;overflow-y:auto;padding:12px;}
   .kanban-modal{
     padding:16px 16px 14px;border-radius:14px;
-    max-height:calc(100vh - 24px);overflow-y:auto;
+    max-height:calc(100dvh - 24px);overflow-y:auto;
   }
   .kanban-modal-row-inline{flex-direction:column;gap:0;}
   .kanban-column-body{overscroll-behavior:auto;}
 }
 
+/* Short landscape phones (e.g. 480×320): a tall form (long localized labels)
+   can exceed the viewport height. Anchor the modal to the top instead of
+   centering so the capped, internally-scrollable modal is reachable from the
+   top of the overlay. Centering here would push the lower rows below the fold
+   even though the modal itself scrolls. The max-height cap + overflow stay so
+   the inner form scrolls; only the alignment changes. */
+@media (max-width: 640px) and (max-height: 480px){
+  .kanban-modal-overlay{align-items:flex-start;}
+  .kanban-modal{max-height:calc(100dvh - 24px);}
+}
+
 /* ── Logs panel (#1455) ───────────────────────────────────────────────────── */
 main.main.showing-logs > #mainLogs{display:flex;}
 .logs-control-panel{display:flex;flex-direction:column;gap:8px;padding:12px;overflow-y:auto;}