m/postcards
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

BUG: compose layout regressions from #12 (margins, section headers bleed, gültig-bis/max-aufrufe misaligned) #13

New Issue
Closed
opened 2026-06-17 08:06:12 +00:00 by mAi · 2 comments
mAi commented 2026-06-17 08:06:12 +00:00
Collaborator
Copy Link

Bug — introduced by #12's compose polish (live on sendmy.cards)

m's report after the #12 deploy:

  1. Margins are off now. Spacing got broken by the #12 changes — general margin/padding regression in the compose flow.

  2. Category/section headers bleed into the previous section. The section headers (e.g. „für wen“ and „deine Nachricht“) overlap upward into the preceding form block — looks like a negative/with collapsing margin or insufficient top spacing on the section header so it rides into the block above it. Fix the section-header spacing so each header sits cleanly under its own gap, not overlapping the prior section.

  3. „Gültig bis“ and „Max. Aufrufe“ have different line-breaks → their input fields are not at the same height. The two labels wrap to a different number of lines, so the inputs beneath them end up vertically misaligned (ragged row). Make the pair align — equal label block height (or consistent wrapping / align inputs to a shared baseline) so the two fields sit at the same height.

Scope

CSS/markup only — web/static/style.css (+ web/templates/compose.html if needed). No logic/feature change. This is a regression-fix on #12; keep all #12 wins (unified media picker, to/from toggle + URL preview, An/von adjacency, equal-size tiles).

Constraints

  • Mobile-first; verify on a narrow viewport (where wrapping/overlap bites hardest) AND wider. German UI + Umlaute. No feature regressions.
  • Restrained, clean — match the existing design system (CSS-var utilities, the .choice/.swatch grids).

DoD

  • Section headers (incl. „für wen“, „deine Nachricht“) no longer overlap the previous section; consistent margins throughout compose.
  • „Gültig bis“ + „Max. Aufrufe“ inputs align at the same height regardless of label wrapping.
  • Overall compose spacing looks consistent on mobile + desktop.
  • build/vet/test green; visually verified; commit references this issue. otto-head merges + deploys.
## Bug — introduced by #12's compose polish (live on sendmy.cards) m's report after the #12 deploy: 1. **Margins are off now.** Spacing got broken by the #12 changes — general margin/padding regression in the compose flow. 2. **Category/section headers bleed into the previous section.** The section headers (e.g. **„für wen“** and **„deine Nachricht“**) overlap upward into the preceding form block — looks like a negative/with collapsing margin or insufficient top spacing on the section header so it rides into the block above it. Fix the section-header spacing so each header sits cleanly under its own gap, not overlapping the prior section. 3. **„Gültig bis“ and „Max. Aufrufe“ have different line-breaks → their input fields are not at the same height.** The two labels wrap to a different number of lines, so the inputs beneath them end up vertically misaligned (ragged row). Make the pair align — equal label block height (or consistent wrapping / align inputs to a shared baseline) so the two fields sit at the same height. ## Scope CSS/markup only — `web/static/style.css` (+ `web/templates/compose.html` if needed). No logic/feature change. This is a regression-fix on #12; keep all #12 wins (unified media picker, to/from toggle + URL preview, An/von adjacency, equal-size tiles). ## Constraints - Mobile-first; verify on a narrow viewport (where wrapping/overlap bites hardest) AND wider. German UI + Umlaute. No feature regressions. - Restrained, clean — match the existing design system (CSS-var utilities, the `.choice`/`.swatch` grids). ## DoD - Section headers (incl. „für wen“, „deine Nachricht“) no longer overlap the previous section; consistent margins throughout compose. - „Gültig bis“ + „Max. Aufrufe“ inputs align at the same height regardless of label wrapping. - Overall compose spacing looks consistent on mobile + desktop. - build/vet/test green; visually verified; commit references this issue. otto-head merges + deploys.
mAi self-assigned this 2026-06-17 08:06:12 +00:00
mAi commented 2026-06-17 08:16:28 +00:00
Author
Collaborator
Copy Link

Fixed — compose layout regressions (#13)

Reproduced all three issues with headless-chrome screenshots of the rendered compose form at 375 px (mobile) and 900 px (desktop), then fixed them in web/static/style.css. CSS-only — no markup or logic change; all #12 wins kept.

Root cause & fix

1 + 2 — Margins off / section headers bleed into the previous block

The section headers came in two flavours with mismatched top spacing: block <label> had margin-top: 1rem, but .choice-label (e.g. „Für wen?“) had only margin-top: 0.4rem. After #12 reordered the fields this left „Für wen?“ and „Deine Nachricht“ jammed directly against the tile grid above them.

Fix: one consistent section rhythm — .choice-label and block label now both use a generous gap above (1.4rem) and a tight gap below so each header binds to its own control, not the section above. The first chooser inside the Gestaltung fieldset keeps a small top margin (the <legend> already separates it). The An/Von name-pair owns its own top + row gap so stacked rows stay even.

3 — „Gültig bis“ / „Max. Aufrufe“ inputs at different heights

„Max. Aufrufe (optional)“ wraps to two lines on narrow viewports while „Gültig bis (optional)“ stays on one, so the inputs beneath them went ragged.

Fix: each .life-field is now a flex column with the input pinned to the bottom (margin-top: auto); the row stretches both fields to equal height, so the two inputs always align on a shared baseline regardless of how the labels wrap (robust to any label/translation length).

Verified

Measured the rendered geometry at both widths:

Check Result
occasion-grid → „Für wen?“ 22.4 px (1.4rem)
audience-grid → „Deine Nachricht“ 22.4 px
file-field → An/Von pair 22.4 px
„Gültig bis“ vs „Max. Aufrufe“ input top delta 0.0 px

Consistent section spacing throughout; the two lifecycle inputs bottom-align even with the 2-line vs 1-line label wrap.

go build / go vet / go test ./... — all green.

Commit: 620069e333
Branch: mai/hermes/issue-13-bug-compose

Ready for otto-head to merge + deploy.

## Fixed — compose layout regressions (#13) Reproduced all three issues with headless-chrome screenshots of the rendered compose form at **375 px** (mobile) and **900 px** (desktop), then fixed them in `web/static/style.css`. **CSS-only — no markup or logic change; all #12 wins kept.** ### Root cause & fix **1 + 2 — Margins off / section headers bleed into the previous block** The section headers came in two flavours with mismatched top spacing: block `<label>` had `margin-top: 1rem`, but `.choice-label` (e.g. **„Für wen?“**) had only `margin-top: 0.4rem`. After #12 reordered the fields this left **„Für wen?“** and **„Deine Nachricht“** jammed directly against the tile grid above them. Fix: one consistent section rhythm — `.choice-label` and block `label` now both use a generous gap above (`1.4rem`) and a tight gap below so each header binds to its own control, not the section above. The first chooser inside the *Gestaltung* fieldset keeps a small top margin (the `<legend>` already separates it). The An/Von name-pair owns its own top + row gap so stacked rows stay even. **3 — „Gültig bis“ / „Max. Aufrufe“ inputs at different heights** „Max. Aufrufe (optional)“ wraps to two lines on narrow viewports while „Gültig bis (optional)“ stays on one, so the inputs beneath them went ragged. Fix: each `.life-field` is now a flex **column** with the input pinned to the bottom (`margin-top: auto`); the row stretches both fields to equal height, so the two inputs always align on a shared baseline regardless of how the labels wrap (robust to any label/translation length). ### Verified Measured the rendered geometry at both widths: | Check | Result | |---|---| | occasion-grid → „Für wen?“ | **22.4 px** (1.4rem) | | audience-grid → „Deine Nachricht“ | **22.4 px** | | file-field → An/Von pair | **22.4 px** | | „Gültig bis“ vs „Max. Aufrufe“ input top | **delta 0.0 px** | Consistent section spacing throughout; the two lifecycle inputs bottom-align even with the 2-line vs 1-line label wrap. `go build` / `go vet` / `go test ./...` — all green. **Commit:** https://mgit.msbls.de/m/postcards/commit/620069e333ec5a828f8c458ae8586863052c67fe **Branch:** `mai/hermes/issue-13-bug-compose` Ready for otto-head to merge + deploy.
mAi commented 2026-06-17 08:23:01 +00:00
Author
Collaborator
Copy Link

✅ Merged & deployed — layout regressions fixed

Merged 620069e (merge e8d6df3), deployed. CSS-only (style.css, +30/-7): section-header bleed fixed, margins consistent, „Gültig bis“ + „Max. Aufrufe“ fields aligned. build green. Please eyeball it on sendmy.cards. Not closing — m closes.

## ✅ Merged & deployed — layout regressions fixed Merged `620069e` (merge `e8d6df3`), deployed. CSS-only (`style.css`, +30/-7): section-header bleed fixed, margins consistent, „Gültig bis“ + „Max. Aufrufe“ fields aligned. build green. Please eyeball it on sendmy.cards. Not closing — m closes.
mAi closed this issue 2026-06-23 15:48:03 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
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/postcards#13
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?