From 4ce7e817169d7a344e60b80a1c7f5f084bb7cc7d Mon Sep 17 00:00:00 2001 From: Alexandru-Dan Pop Date: Wed, 13 May 2026 17:00:53 +0300 Subject: [PATCH 1/2] Add dynamic lists overflow verification to react skill Require overflow/scroll verification whenever components render variable-length lists. This prevents UI bugs where long lists push buttons and footers off-screen. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .claude/skills/react/SKILL.md | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/.claude/skills/react/SKILL.md b/.claude/skills/react/SKILL.md index 5ea927eca..60a708660 100644 --- a/.claude/skills/react/SKILL.md +++ b/.claude/skills/react/SKILL.md @@ -128,7 +128,27 @@ return
; --- -## 7. Code Quality Constraints +## 7. Dynamic Lists & Overflow + +When a component renders a **variable-length list** (`.map()` over connections, options, templates, search results, etc.), you MUST verify overflow behavior: + +- **Constrain container height** — lists must not push sibling content (buttons, footers, navigation) off-screen. Use a scroll wrapper with bounded height. +- **Use existing scroll components** — prefer `FixedHeightScrollArea` from `@openops/components/ui` over ad-hoc `overflow-y-auto` + `max-h` classes. This keeps behavior consistent and responsive breakpoints (`@media(max-height:700px)`) centralized. +- **Test with realistic data volume** — when adding mock/test data for lists, use enough items (20+) to trigger overflow, then verify the scroll behavior works. +- **Check the full viewport** — after adding scroll constraints, confirm that the component works on both tall (1080p+) and short (laptop, 700px height) viewports. + +**Red flags to catch:** + +- A `.map()` rendering inside a flex/grid container with no height constraint +- `overflow-clip` or `overflow-hidden` on a parent that hides scrollable content +- Fixed-height containers that truncate without scroll +- Buttons or footers pushed below the viewport fold + +**When in doubt:** render 20+ items and visually inspect (or use `qa-agent`) before considering the work done. + +--- + +## 8. Code Quality Constraints - **SOLID, DRY, Clean Code** — small functions, clear names, no dead code. - **Pattern consistency** — read existing code in the target area before writing new code. @@ -143,7 +163,7 @@ npx nx lint ui-components --- -## 8. Project-Specific Context +## 9. Project-Specific Context - **React 18** with functional components - **Zustand** for state management From 356cfec61ff657b061a38f9c77485d5bbdd5edee Mon Sep 17 00:00:00 2001 From: Alexandru-Dan Pop Date: Wed, 13 May 2026 17:11:10 +0300 Subject: [PATCH 2/2] Address review: use ScrollArea, remove qa-agent reference Replace FixedHeightScrollArea (internal-only) with the existing ScrollArea component. Remove qa-agent reference that doesn't exist in the OSS repo. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .claude/skills/react/SKILL.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.claude/skills/react/SKILL.md b/.claude/skills/react/SKILL.md index 60a708660..b16204690 100644 --- a/.claude/skills/react/SKILL.md +++ b/.claude/skills/react/SKILL.md @@ -133,7 +133,7 @@ return ; When a component renders a **variable-length list** (`.map()` over connections, options, templates, search results, etc.), you MUST verify overflow behavior: - **Constrain container height** — lists must not push sibling content (buttons, footers, navigation) off-screen. Use a scroll wrapper with bounded height. -- **Use existing scroll components** — prefer `FixedHeightScrollArea` from `@openops/components/ui` over ad-hoc `overflow-y-auto` + `max-h` classes. This keeps behavior consistent and responsive breakpoints (`@media(max-height:700px)`) centralized. +- **Use existing scroll components** — prefer the project's `ScrollArea` (from `@openops/components/ui`) or a dedicated scroll wrapper over ad-hoc `overflow-y-auto` + `max-h` classes. This keeps behavior consistent and responsive breakpoints centralized. - **Test with realistic data volume** — when adding mock/test data for lists, use enough items (20+) to trigger overflow, then verify the scroll behavior works. - **Check the full viewport** — after adding scroll constraints, confirm that the component works on both tall (1080p+) and short (laptop, 700px height) viewports. @@ -144,7 +144,7 @@ When a component renders a **variable-length list** (`.map()` over connections, - Fixed-height containers that truncate without scroll - Buttons or footers pushed below the viewport fold -**When in doubt:** render 20+ items and visually inspect (or use `qa-agent`) before considering the work done. +**When in doubt:** render 20+ items and visually inspect before considering the work done. ---