Skills
.Work. You
Rest

modal-media-viewport-overflow

Community

Fix inaccessible modal content

Software Engineering#accessibility#css#modal#overflow#flexbox#viewport
Authorhubeiqiao
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill resolves the issue where content below large media elements (like videos or images) in fixed modals gets pushed off-screen and becomes inaccessible due to viewport overflow.

Core Features & Use Cases

  • Viewport-Relative Sizing: Ensures media elements respect available viewport space, leaving room for footer content.
  • Flexbox Shrinkage Control: Utilizes min-h-0 and flex-shrink-0 to manage how media and footer elements resize within flex containers.
  • Scrollable Modals: Implements overflow-y-auto on the modal container as a fallback for very small viewports.
  • Use Case: When a video in a modal is too tall for a short screen, and the "Watch on YouTube" link below it disappears, this skill makes the link visible and accessible.

Quick Start

Apply the CSS pattern described in the documentation to your modal's media and footer elements to ensure they remain visible.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: modal-media-viewport-overflow
Download link: https://github.com/hubeiqiao/skills/archive/main.zip#modal-media-viewport-overflow

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.