stwaidele/dorfteich
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 22 Wiki Activity

Checkbox-Aufzählungen: Textzeile vertikal ausrichten #137

New Issue
Closed
opened 2026-07-19 00:18:36 +02:00 by fable-5 · 1 comment
fable-5 commented 2026-07-19 00:18:36 +02:00
Collaborator
Copy Link

Problem

Bei Checkbox-Aufzählungen (- [ ] / - [x]) sitzt die Textzeile nicht auf gleicher Höhe wie die Checkbox. Im Lesemodus deutlich stärker kaputt als im Editor.

Ursache (aus Analyse)

  • Lesemodus/Public: docToHtml erzeugt in renderListItems (packages/shared/src/editor-schema/html.ts ~L77-88) je Item ein rohes <input type="checkbox"> direkt gefolgt von einem Block-<p>. Die einzige Task-List-CSS (apps/web/src/styles/base.css ~L1584-1593) ist auf .editor-content gescoped und greift in den Lese-Containern (.public-page__body, .comment__body, .legal-page__body, .home-page, .history-panel__preview) gar nicht → Bullet sichtbar, Checkbox inline, <p> mit Default-margin: 1em 0 bricht um/versetzt.
  • Editor: flex + align-items: flex-start greift, aber das innere <p> behält Default-Obermarge → Text leicht nach unten versetzt.

Beachte: Die beiden Renderpfade erzeugen unterschiedliches DOM — Editor-NodeView (apps/web/src/editor/nodes/task-item.tsx): li > label > input + li > div > p; Read-HTML: li > input + li > p.

Umsetzung

  1. Task-List-Styles so umschreiben, dass sie in allen Lese-Containern greifen (Scope von .editor-content lösen bzw. gemeinsame Regel für die Content-Wrapper): ul[data-type='task_list'] → list-style:none, kleines padding-left; li[data-type='task_item'] → display:flex, align-items:flex-start (oder baseline, visuell prüfen), gap.
  2. Obermarge des ersten Absatzes im Item neutralisieren (li[data-type='task_item'] > p:first-child { margin-top: 0 } bzw. für den Editor-Fall die > div > p-Struktur) — in beiden Pfaden.
  3. Checkbox-Vertikalausrichtung feinjustieren (z. B. kleines margin-top auf dem input), damit die Box optisch auf der Textoberkante sitzt.
  4. Visuelle Kontrolle in Editor und öffentlicher Ansicht; Screenshot-Beleg.

Akzeptanzkriterien

  • Checkbox und Textzeile bündig — im Editor und in Lese-/öffentlicher Ansicht.
  • Robust bei gemischt an/aus, mehrzeiligem Text, verschachtelten Listen.
  • Keine Regression bei normalen Aufzählungen/Listen.
  • pnpm lint + betroffene CI-Packs grün.
## Problem Bei Checkbox-Aufzählungen (`- [ ]` / `- [x]`) sitzt die **Textzeile nicht auf gleicher Höhe** wie die Checkbox. Im **Lesemodus deutlich stärker kaputt** als im Editor. ## Ursache (aus Analyse) - **Lesemodus/Public:** `docToHtml` erzeugt in `renderListItems` (`packages/shared/src/editor-schema/html.ts` ~L77-88) je Item ein rohes `<input type="checkbox">` **direkt gefolgt von einem Block-`<p>`**. Die einzige Task-List-CSS (`apps/web/src/styles/base.css` ~L1584-1593) ist auf `.editor-content` **gescoped** und greift in den Lese-Containern (`.public-page__body`, `.comment__body`, `.legal-page__body`, `.home-page`, `.history-panel__preview`) **gar nicht** → Bullet sichtbar, Checkbox inline, `<p>` mit Default-`margin: 1em 0` bricht um/versetzt. - **Editor:** flex + `align-items: flex-start` greift, aber das innere `<p>` behält Default-Obermarge → Text leicht nach unten versetzt. Beachte: Die beiden Renderpfade erzeugen **unterschiedliches DOM** — Editor-NodeView (`apps/web/src/editor/nodes/task-item.tsx`): `li > label > input` + `li > div > p`; Read-HTML: `li > input` + `li > p`. ## Umsetzung 1. Task-List-Styles so umschreiben, dass sie **in allen Lese-Containern** greifen (Scope von `.editor-content` lösen bzw. gemeinsame Regel für die Content-Wrapper): `ul[data-type='task_list']` → `list-style:none`, kleines `padding-left`; `li[data-type='task_item']` → `display:flex`, `align-items:flex-start` (oder `baseline`, visuell prüfen), `gap`. 2. **Obermarge des ersten Absatzes im Item neutralisieren** (`li[data-type='task_item'] > p:first-child { margin-top: 0 }` bzw. für den Editor-Fall die `> div > p`-Struktur) — in **beiden** Pfaden. 3. Checkbox-Vertikalausrichtung feinjustieren (z. B. kleines `margin-top` auf dem `input`), damit die Box optisch auf der Textoberkante sitzt. 4. Visuelle Kontrolle in Editor **und** öffentlicher Ansicht; Screenshot-Beleg. ## Akzeptanzkriterien - [ ] Checkbox und Textzeile bündig — im Editor **und** in Lese-/öffentlicher Ansicht. - [ ] Robust bei gemischt an/aus, mehrzeiligem Text, verschachtelten Listen. - [ ] Keine Regression bei normalen Aufzählungen/Listen. - [ ] `pnpm lint` + betroffene CI-Packs grün.
fable-5 added this to the M19 — Darstellungs-Fixes milestone 2026-07-19 00:18:36 +02:00
fable-5 commented 2026-07-19 21:48:49 +02:00
Author
Collaborator
Copy Link

Umgesetzt in vier Schritten (die Renderpfade unterscheiden sich stärker als gedacht):

  • d1d98a9: Task-List-CSS von .editor-content entscopet (griff in Lese-Containern nicht) + Margen-Reset.
  • baea736: :first-child → :first-of-type — im Lesemodus-Markup ist das <input> das erste Kind, das <p> war nie :first-child.
  • 3ed3cbb: Kind-Ketten → NACHFAHREN-Selektoren — der TipTap-NodeView der angemeldeten Ansicht nestet das <p> zwei Wrapper tief (li > div[data-node-view-content] > div > p).
  • d07f8bb: Feinjustierung nach Stefans Pixel-Feedback — nur der label-Pfad (NodeView) bekommt margin-top: calc(0.25em − 3px).

Verifiziert: per Messung (getBoundingClientRect) und visuell in ÖFFENTLICHER und ANGEMELDETER Ansicht auf Test/Int; finale Abnahme durch Stefan („Passt jetzt"). Deployt bis 60be198.

Umgesetzt in vier Schritten (die Renderpfade unterscheiden sich stärker als gedacht): - `d1d98a9`: Task-List-CSS von `.editor-content` entscopet (griff in Lese-Containern nicht) + Margen-Reset. - `baea736`: `:first-child` → `:first-of-type` — im Lesemodus-Markup ist das `<input>` das erste Kind, das `<p>` war nie `:first-child`. - `3ed3cbb`: Kind-Ketten → NACHFAHREN-Selektoren — der TipTap-NodeView der angemeldeten Ansicht nestet das `<p>` zwei Wrapper tief (`li > div[data-node-view-content] > div > p`). - `d07f8bb`: Feinjustierung nach Stefans Pixel-Feedback — nur der label-Pfad (NodeView) bekommt `margin-top: calc(0.25em − 3px)`. Verifiziert: per Messung (getBoundingClientRect) und visuell in ÖFFENTLICHER und ANGEMELDETER Ansicht auf Test/Int; finale Abnahme durch Stefan („Passt jetzt"). Deployt bis `60be198`.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels   
area:auth

   
area:docs

   
area:export

   
area:ops

   
area:storage

   
area:supply-chain

   
auth

Authentication, permissions, quotas

  
backend

API server (apps/api)

  
blocked

Blocked on external dependency/infrastructure

  
collab

Collaboration server (apps/collab)

  
deployment

Docker, CI/CD, hosting

  
docs

Documentation

  
effort:L

   
effort:M

   
effort:S

   
frontend

SPA (apps/web)

  
plugins

Plugin system and SDK

  
qa

Tests, fixtures, e2e

  
vs-nfd

   
vs-nfd:blocker
No Label
area:auth
area:docs
area:export
area:ops
area:storage
area:supply-chain
auth
backend
blocked
collab
deployment
docs
effort:L
effort:M
effort:S
frontend
plugins
qa
vs-nfd
vs-nfd:blocker
Milestone
Clear milestone
No items
No Milestone
M19 — Darstellungs-Fixes
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: stwaidele/dorfteich#137
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?