mAi: #91 - t-paliad-260 — submission-draft mobile layout: drop sticky on sidebar at ≤900px

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

@@ -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;