Skip to content

Add dynamic lists overflow verification to react skill#2290

Merged
alexandrudanpop merged 2 commits into
mainfrom
skill/react-overflow-verification
May 14, 2026
Merged

Add dynamic lists overflow verification to react skill#2290
alexandrudanpop merged 2 commits into
mainfrom
skill/react-overflow-verification

Conversation

@alexandrudanpop
Copy link
Copy Markdown
Contributor

@alexandrudanpop alexandrudanpop commented May 13, 2026

Summary

Add a Dynamic Lists & Overflow section (Section 7) to the react agent skill, requiring overflow/scroll verification whenever components render variable-length lists.

Motivation

During campaign wizard work, mock connection data was added without catching that the list container had no scroll constraint — long lists pushed buttons off-screen. The fix required manually creating a FixedHeightScrollArea component and wrapping all wizard steps.

This skill update ensures the agent proactively checks overflow behavior when working with dynamic lists.

What's added

The new section requires:

  • Constraining container height with scroll wrappers (prefer FixedHeightScrollArea)
  • Testing with 20+ items to trigger overflow
  • Checking both tall and short viewports
  • Watching for red flags: unconstrained flex containers, overflow-clip parents, buttons pushed off-screen

Part of OPS-4263

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>
Copilot AI review requested due to automatic review settings May 13, 2026 14:01
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new “Dynamic Lists & Overflow” section to the React agent skill to require explicit overflow/scroll verification when rendering variable-length lists, aiming to prevent UI controls from being pushed off-screen (OPS-804).

Changes:

  • Introduces a new checklist for dynamic list overflow constraints, including data-volume and viewport-size verification.
  • Renumbers subsequent sections to accommodate the new guidance.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread .claude/skills/react/SKILL.md Outdated
Comment thread .claude/skills/react/SKILL.md Outdated
@linear
Copy link
Copy Markdown

linear Bot commented May 13, 2026

OPS-4263

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>
@sonarqubecloud
Copy link
Copy Markdown

@alexandrudanpop alexandrudanpop merged commit ba2ba7c into main May 14, 2026
21 checks passed
@alexandrudanpop alexandrudanpop deleted the skill/react-overflow-verification branch May 14, 2026 07:42
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.

3 participants