Skip to content

Tabstrook: "+" direct na het laatste tabblad; vierkante sluitknop projectoverzichtskaart; rondleiding in eigen Suspense-grens - #293

Open
Nozzit wants to merge 3 commits into
mainfrom
claude/ui-tabplus-kaartsluitknop
Open

Nozzit wants to merge 3 commits into
mainfrom
claude/ui-tabplus-kaartsluitknop

Conversation

@Nozzit

@Nozzit Nozzit commented Oct 7, 2026 •

Copy link
Copy Markdown
Collaborator

Twee kleine UI-fouten die de eigenaar zag tijdens de visuele check van #109 (2026-10-07). Hij vroeg om "een agent die dit heel snel meeneemt".

Wat en waarom

  • De "+" staat direct na het laatste tabblad. Eerst stond hij helemaal rechts in de tabstrook, bij twee tabbladen ±1200 px van de tabs, zodat het leek alsof hij ontbrak. De tabstrook rekt niet meer op (flex: 0 1 auto). Bij veel tabbladen krimpt de strook en blijft de "+" zichtbaar aan de rechterrand. De volgorde van de elementen is gelijk, dus toetsenbord en schermlezer werken zoals eerst.
  • De sluitknop op de projectoverzichtskaart blijft vierkant. Bij een lange titel kromp hij tot 15–19 px breed en raakte hij de badge "Active". Nu: flex: none op de knop, badge en stip; gap in de kopregel; de titel breekt netjes af.

Schermbewijs

Voor Na
Tabstrook voor na
Overloop na
Kaart voor na

Bijvangst uit de CI: rondleiding in een eigen Suspense-grens

De CI faalde twee keer op first-start-tutorial.spec.ts: de rondleidingskaart was soms 0 × 0 px en dus onklikbaar. Oorzaak: <TourOverlay /> stond met alle lazy geladen dialogen in één gedeelde <Suspense>; laadde een andere dialoog in die groep nog (bijv. de tutorialvraag), dan verborg React de hele groep met display:none, de rondleiding inbegrepen. Fix: TourOverlay krijgt een eigen <Suspense fallback={null}> (src/App.tsx, commit 6579297). Het is een timingfout die al bestond (lokaal 1 op 50 rood vóór de fix); de tabstrookwijziging veranderde vermoedelijk alleen de timing in CI. Na de fix: tutorial-spec en tabstrook-spec elk × 8 groen (96/96), npm run verify exit 0.

Hoe getest

  • Nieuwe spec tests/browser/tabstrip-plus-kaartsluitknop.spec.ts met echte klikken. Vóór de fix rood: "+" 1204 px van het laatste tabblad, knop 15 px breed. Na de fix groen: "+" binnen 8 px, bij 16 tabbladen zichtbaar en klikbaar; knop 26 × 26 px en ≥ 4 px van de badge.
  • npm run verify zonder corpus: exit 0 (407 browsertests).
  • RTL spiegelt via flex; niet apart getest.

Gebouwd door een Opus 5.5-agent; schermafbeeldingen door de orkestrator bekeken.

🤖 Generated with Claude Code

Nozzit and others added 2 commits October 7, 2026 21:31
…uitknop

- Tabstrook: viewport krimpt tot de inhoud (flex 0 1 auto), zodat de "+" direct
  na het laatste tabblad staat; bij overloop blijft hij aan de eindrand zichtbaar.
  RTL spiegelt via flex; toetsenbordvolgorde ongewijzigd.
- Projectoverzichtskaart: sluitknop flex none (26x26), gap in de kopregel,
  titelblok minWidth 0 met afbreking; badge en dirty-stip krimpen niet.
- Browserspec tabstrip-plus-kaartsluitknop (eerst rood), schermbewijs voor/na.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
De rondleidingskaart zat in dezelfde Suspense-grens als alle lazy dialogen. Laadde
een andere dialoog nog (bv. de tutorialvraag), dan verborg React de hele grens
met display:none: de kaart werd 0x0 en de knop onklikbaar (CI-flake
first-start-tutorial op PR #293). Nu een eigen grens rond TourOverlay.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@Nozzit Nozzit changed the title Tabstrook: "+" direct na het laatste tabblad; vierkante sluitknop op de projectoverzichtskaart Tabstrook: "+" direct na het laatste tabblad; vierkante sluitknop projectoverzichtskaart; rondleiding in eigen Suspense-grens Oct 7, 2026
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant