skills.rest
Luqman-Ud-Din
Luqman-Ud-DinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

qa-detect-dropdown-viewport-clip

Detect clipped dropdown and popup overlays extending beyond the viewport boundary.

Updated May 22, 2026
Search Tags:#qa#popup#responsive testing#viewport#overlay#dropdown
One-click install
npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-dropdown-viewport-clip
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-detect-dropdown-viewport-clip
Source: https://github.com/Luqman-Ud-Din/blackbox-qa-agent/tree/main/skills/qa-detect-dropdown-viewport-clip
Command: npx skills add https://github.com/Luqman-Ud-Din/blackbox-qa-agent --skill qa-detect-dropdown-viewport-clip

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill checks whether dropdowns, tooltips, autocomplete menus, and other popup surfaces open beyond the viewport edge, where users can no longer read or click the content.

Core Features & Use Cases

  • Viewport-edge detection: Finds triggers positioned near the right or bottom edge of the screen.
  • Popup clipping validation: Opens each trigger and measures whether the resulting overlay is cut off outside the visible viewport.
  • Practical QA coverage: Useful for responsive layouts, component libraries, and overlay-heavy interfaces such as menus, selects, and material design popups.

Quick Start

Ask the agent to run this skill on the current page to detect any dropdowns or popups that are clipped by the viewport.

Frequently Asked Questions about qa-detect-dropdown-viewport-clip

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I test if a dropdown is clipped outside the viewport?▼

To test if a dropdown is clipped outside the viewport, you need in-page execution to open triggers and measure whether the resulting overlay extends beyond the right or bottom visible boundary. This detects menus users cannot read or click.

What is viewport-edge detection for popup overlays?▼

Viewport-edge detection for popup overlays is a QA process that finds triggers positioned near the right or bottom edge of the screen. It validates responsive UI components by measuring overlay clipping once the popup is opened.

Can I use this to validate tooltips and autocomplete panels in responsive layouts?▼

Yes, you can use this to validate tooltips and autocomplete panels in responsive layouts. The detection applies to overlay-heavy interfaces, measuring right and bottom overflow for edge-positioned interactive components like menus and selects.

How do I automate popup dismissal after measuring overlay clipping?▼

You automate popup dismissal after measuring overlay clipping by running in-page execution against open triggers. The process measures right and bottom overflow and includes automatic dismissal of the tested popups to continue validation.

What's the best way to catch clipped menus before users do in component libraries?▼

The best way to catch clipped menus before users do in component libraries is running automated viewport-edge detection. It opens triggers, measures overlay boundaries against the visible viewport, and automatically dismisses tested popups.

Related Skills

Explore More Software Engineering Skills→
nicholaslocascionicholaslocascio
2

browse

Drive a headless browser to load pages, interact with UI, and collect artifacts.

Community
Advanced
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-breakpoint-boundary

Detect CSS breakpoint overflow and edge-cutoff defects at exact viewport widths.

Community
Intermediate
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
MadAppGangMadAppGang
7

debug-ui

Capture screenshots and inspect DOM state to diagnose UI layout issues.

Official
Intermediate