# Popup content fully visible and usable at default browser zoom levels

- **Pattern:** `ab-001361` (`extension-ux-performance.popup-responsiveness.popup-zoom-visible`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001361
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001361)

## Why it matters

Clipped popup content at default browser zoom hides primary actions — Save, Submit, Close — behind invisible overflow. Users on 125% zoom (the OS default on high-DPI Windows laptops and standard for low-vision users covered by WCAG 2.2 SC 1.4.4 Resize Text) hit dead ends where the save button renders below a fixed 200px container with `overflow: hidden`. The extension appears broken, reviews drop, and uninstalls spike. Accessibility compliance also fails when resized text gets cropped instead of reflowing.

## Severity rationale

High because clipped controls make the extension functionally unusable for a measurable segment of users at default zoom levels.

## Remediation

Replace fixed heights and `overflow: hidden` with a bounded, scrollable body. Set an explicit width, cap height with `max-height`, and let content reflow with `overflow-y: auto`. In `popup.html`:

```css
body {
  width: 360px;
  min-height: 100px;
  max-height: 600px;
  overflow-y: auto;
  box-sizing: border-box;
}
```

Use `rem` units for text so browser zoom scales correctly.

## Detection

- **ID:** `popup-zoom-visible`
- **Severity:** `high`
- **What to look for:** Examine `popup.html` and popup CSS for fixed-width layouts, overflow handling, and minimum or maximum dimensions. Check whether the popup sets explicit `width` and `height` via CSS or the manifest `default_popup` dimensions. Look for content that uses `overflow: hidden` without `overflow: auto` or `scroll`, which would silently clip content. Check whether text uses fixed pixel sizes that might not scale gracefully at 110% or 125% zoom. Count all instances found and enumerate each.
- **Pass criteria:** Popup layout is responsive within its container. A popup width of 300-400px with auto-height or a defined max-height plus scroll covers most content well. Content is not clipped or overflowed invisibly at 100% zoom. Text uses relative units (rem or em) or is sized appropriately.
- **Fail criteria:** Popup layout clips content at default zoom, uses `overflow: hidden` on the main container causing content to be cut off, or uses a fixed height that causes important controls to be invisible without scrolling and with no scroll affordance.
- **Skip (N/A) when:** The extension has no popup.
- **Detail on fail:** Describe the visibility issue. Example: `"Popup sets height: 200px with overflow: hidden — settings panel and save button clipped and inaccessible"` or `"Fixed-width 500px popup extends beyond typical Chrome popup viewport, right side content unreachable."`
- **Remediation:** Use flexible layouts that adapt to content:

  ```css
  /* popup.html body */
  body {
    width: 360px;
    min-height: 100px;
    max-height: 600px;
    overflow-y: auto;
    font-size: 14px;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
  }
  ```

  Chrome popup windows constrain max width to roughly 800px and max height to the viewport, but content should be explicitly bounded to prevent unexpected clipping.

## External references

- wcag 1.4.4

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001361