From 4cb99fb6274254aea9956bdc4c59a230ea8f7f49 Mon Sep 17 00:00:00 2001
From: mAi <mai@flexsiebels.de>
Date: Mon, 25 May 2026 14:58:21 +0200
Subject: [PATCH] =?UTF-8?q?mAi:=20#91=20-=20t-paliad-260=20=E2=80=94=20sub?=
 =?UTF-8?q?mission-draft=20mobile=20layout:=20drop=20sticky=20on=20sidebar?=
 =?UTF-8?q?=20at=20=E2=89=A4900px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approach A: stack vertically. At single-column widths the variable
editor was sticky + max-height: calc(100vh - 2rem), so it stayed
pinned at the top of the viewport while the user scrolled down to
read the preview, visually overlaying the preview pane.

Add a media-query override that switches the sidebar to position:
static, max-height: none, overflow-y: visible at the same ≤900px
breakpoint where the grid already collapses to one column. The
sidebar now reflows above the preview, takes its natural height,
and scrolls away as the user moves down — no overlay, no
horizontal scroll. Desktop (≥901px) layout unchanged: sidebar
keeps its sticky behavior side-by-side with the preview.

Verified at 375 / 414 / 768 / 1280 px in Playwright on the
populated editor body — same renderer serves both URL shapes
(/submissions/draft/{id} and
/projects/{id}/submissions/{code}/draft/{id}).
---
 frontend/src/styles/global.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 066acb9..eb0ef86 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -5725,6 +5725,21 @@ dialog.modal::backdrop {
     overflow-y: auto;
 }
 
+/* t-paliad-260 — at single-column widths, drop the sticky/max-height
+   constraints on the variable editor so it reflows above the preview
+   and scrolls away naturally instead of overlaying the preview pane
+   (sticky + calc(100vh - 2rem) keep the form pinned at the top of the
+   viewport while the user scrolls down to read the preview). Must come
+   after the unscoped .submission-draft-sidebar block to win source
+   order at equal specificity. */
+@media (max-width: 900px) {
+    .submission-draft-sidebar {
+        position: static;
+        max-height: none;
+        overflow-y: visible;
+    }
+}
+
 .submission-draft-switcher {
     display: flex;
     align-items: center;