m/paliad
1
0
Fork 0
Code Issues 146 Pull Requests 8 Actions 1 Packages Projects Releases Wiki Activity

Submissions draft editor: preview pane overlaid by form on mobile — stack below or tab-toggle #91

New Issue
Open
opened 2026-05-25 12:53:28 +00:00 by mAi · 1 comment
mAi commented 2026-05-25 12:53:28 +00:00
Collaborator
Copy Link

m's report (2026-05-25 14:52)

https://paliad.de/submissions/draft/47599031-dfd3-4294-afac-ba643195a141

The draft preview only shows on wide screens, so not on mobile. But it should — it is overlayed by the main form on those screens instead of showing below it or in a separate tab

Scope

On the submission-draft editor (/submissions/draft/{id} for project-less drafts and /projects/{id}/submissions/{code}/draft/{id} for project-scoped drafts) the layout at mobile widths fails: the preview pane gets overlaid by the variable-editor form rather than reflowing to below it or switching to a tab.

What to do

  1. Reproduce at mobile widths (Playwright at 375 / 414 / 768 px) on the URL m linked.
  2. Audit the current layout in frontend/src/submission-draft.tsx + frontend/src/client/submission-draft.ts — likely two-column flex/grid with no responsive collapse. The overlay is probably an position: absolute or shared-stacking-context that collapses incorrectly when columns wrap.
  3. Pick fix (coder's call, document in commit):
    • A. Stack vertically below breakpoint (≤768px or wherever desktop layout begins): variable editor on top, preview below. User scrolls. (R) — simplest, mirrors the natural read order.
    • B. Tab toggle on mobile: a single <button> row at top with "Variablen" / "Vorschau" that swaps which pane is visible. Closer to a native-app feel.
  4. Whatever path: kill the overlay. No position: absolute or layered z-indexing that pushes one pane over another on narrow screens.
  5. Verify the SAME page at /submissions/draft/{id} (project-less) AND /projects/{id}/submissions/{code}/draft/{id} (project-scoped) — they share the renderer.

Files most likely touched

  • frontend/src/submission-draft.tsx
  • frontend/src/client/submission-draft.ts
  • frontend/src/styles/global.css — mobile breakpoint rules for .submission-draft-* classes

Hard rules

  • No regression on desktop — the side-by-side variable editor + preview stays at ≥desktop breakpoint.
  • No horizontal scroll on mobile (consistent with #86 hard rule).
  • go build ./... && go test ./internal/... && cd frontend && bun run build clean.
  • Branch: mai/<worker>/submission-draft-mobile-layout.

Out of scope

  • Touch / swipe gestures on the tabbed mobile layout.
  • Variable editor UX improvements beyond layout.
  • The export / preview rendering logic (just layout).

Reporting

mai report completed with branch + SHAs + chosen approach (A/B) + verification path on paliad.de mobile viewport: open /submissions/draft/47599031-dfd3-4294-afac-ba643195a141 at 375px → confirm preview is visible (below or via tab), no overlap with variable editor.

## m's report (2026-05-25 14:52) > https://paliad.de/submissions/draft/47599031-dfd3-4294-afac-ba643195a141 > > The draft preview only shows on wide screens, so not on mobile. But it should — it is overlayed by the main form on those screens instead of showing below it or in a separate tab ## Scope On the submission-draft editor (`/submissions/draft/{id}` for project-less drafts and `/projects/{id}/submissions/{code}/draft/{id}` for project-scoped drafts) the layout at mobile widths fails: the preview pane gets **overlaid** by the variable-editor form rather than reflowing to below it or switching to a tab. ## What to do 1. Reproduce at mobile widths (Playwright at 375 / 414 / 768 px) on the URL m linked. 2. Audit the current layout in `frontend/src/submission-draft.tsx` + `frontend/src/client/submission-draft.ts` — likely two-column flex/grid with no responsive collapse. The overlay is probably an `position: absolute` or shared-stacking-context that collapses incorrectly when columns wrap. 3. Pick fix (coder's call, document in commit): - **A. Stack vertically** below breakpoint (≤768px or wherever desktop layout begins): variable editor on top, preview below. User scrolls. **(R)** — simplest, mirrors the natural read order. - **B. Tab toggle** on mobile: a single `<button>` row at top with "Variablen" / "Vorschau" that swaps which pane is visible. Closer to a native-app feel. 4. Whatever path: kill the overlay. No `position: absolute` or layered z-indexing that pushes one pane over another on narrow screens. 5. Verify the SAME page at /submissions/draft/{id} (project-less) AND /projects/{id}/submissions/{code}/draft/{id} (project-scoped) — they share the renderer. ## Files most likely touched - `frontend/src/submission-draft.tsx` - `frontend/src/client/submission-draft.ts` - `frontend/src/styles/global.css` — mobile breakpoint rules for `.submission-draft-*` classes ## Hard rules - **No regression on desktop** — the side-by-side variable editor + preview stays at ≥desktop breakpoint. - **No horizontal scroll** on mobile (consistent with #86 hard rule). - `go build ./... && go test ./internal/... && cd frontend && bun run build` clean. - Branch: `mai/<worker>/submission-draft-mobile-layout`. ## Out of scope - Touch / swipe gestures on the tabbed mobile layout. - Variable editor UX improvements beyond layout. - The export / preview rendering logic (just layout). ## Reporting `mai report completed` with branch + SHAs + chosen approach (A/B) + verification path on paliad.de mobile viewport: open /submissions/draft/47599031-dfd3-4294-afac-ba643195a141 at 375px → confirm preview is visible (below or via tab), no overlap with variable editor.
mAi self-assigned this 2026-05-25 12:53:28 +00:00
mAi commented 2026-05-25 12:58:48 +00:00
Author
Collaborator
Copy Link

Done — chose Approach A (stack vertically).

Root cause

.submission-draft-grid already collapsed to one column at ≤900px, but .submission-draft-sidebar kept position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto at all widths. On mobile that meant: variable editor pinned to the top of the viewport, occupying almost full viewport height, scrolling along with the user — so as the user scrolled down to read the preview, the form visually overlaid the preview pane.

Not an position: absolute issue, not a z-index issue — just sticky behaviour misapplied below the column-collapse breakpoint.

Fix

One CSS block appended after the unscoped .submission-draft-sidebar rule (source-order needed to win at equal specificity), inside the same @media (max-width: 900px) where the grid already collapses:

@media (max-width: 900px) {
    .submission-draft-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

Sidebar now reflows above the preview, takes its natural height, and scrolls away as the user moves down. Desktop layout (≥901px) untouched.

Verification

Static repro from frontend/dist/submission-draft.html with the populated editor body injected (tall variable form + 30 preview paragraphs), Playwright at four widths:

width sidebar position overlap h-scroll grid columns
375 px static none no 1 col
414 px static none no 1 col
768 px static none no 1 col
1280 px sticky side-by-side no 360px 648px

Scroll-behaviour check at 375px: after window.scrollTo(0, 3400), sidebar bottom: -292px (fully out of viewport), preview top: -268px (in viewport). Sidebar scrolls away, preview reads.

Same renderer serves both URL shapes (/submissions/draft/{id} for project-less drafts and /projects/{id}/submissions/{code}/draft/{id} for project-scoped), so the fix applies to both.

Build status

  • cd frontend && bun run build — clean
  • go build ./... — clean
  • go test -short ./internal/... — clean (all packages pass)

Branch / commit

Branch: mai/hermes/gitster-submissions
Commit: 4cb99fb627

Ready for review / merge.

Done — chose **Approach A** (stack vertically). ## Root cause `.submission-draft-grid` already collapsed to one column at `≤900px`, but `.submission-draft-sidebar` kept `position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto` at all widths. On mobile that meant: variable editor pinned to the top of the viewport, occupying almost full viewport height, scrolling along with the user — so as the user scrolled down to read the preview, the form visually overlaid the preview pane. Not an `position: absolute` issue, not a z-index issue — just sticky behaviour misapplied below the column-collapse breakpoint. ## Fix One CSS block appended after the unscoped `.submission-draft-sidebar` rule (source-order needed to win at equal specificity), inside the same `@media (max-width: 900px)` where the grid already collapses: ```css @media (max-width: 900px) { .submission-draft-sidebar { position: static; max-height: none; overflow-y: visible; } } ``` Sidebar now reflows above the preview, takes its natural height, and scrolls away as the user moves down. Desktop layout (≥901px) untouched. ## Verification Static repro from `frontend/dist/submission-draft.html` with the populated editor body injected (tall variable form + 30 preview paragraphs), Playwright at four widths: | width | sidebar position | overlap | h-scroll | grid columns | |---|---|---|---|---| | 375 px | `static` | none | no | 1 col | | 414 px | `static` | none | no | 1 col | | 768 px | `static` | none | no | 1 col | | 1280 px | `sticky` | side-by-side | no | `360px 648px` | Scroll-behaviour check at 375px: after `window.scrollTo(0, 3400)`, sidebar `bottom: -292px` (fully out of viewport), preview `top: -268px` (in viewport). Sidebar scrolls away, preview reads. Same renderer serves both URL shapes (`/submissions/draft/{id}` for project-less drafts and `/projects/{id}/submissions/{code}/draft/{id}` for project-scoped), so the fix applies to both. ## Build status - `cd frontend && bun run build` — clean - `go build ./...` — clean - `go test -short ./internal/...` — clean (all packages pass) ## Branch / commit Branch: `mai/hermes/gitster-submissions` Commit: https://mgit.msbls.de/m/paliad/commit/4cb99fb6274254aea9956bdc4c59a230ea8f7f49 Ready for review / merge.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
deferred
Parked — not pursuing now, may un-park later
done
Work completed by an agent; awaiting m to close
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/paliad#91
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?