Protect bottom controls from mobile safe areas

Reserve mobile safe-area insets beneath sticky bottom controls while preserving touch targets, content access, and zero horizontal overflow.

EasyResilient CSS

30 min0% acceptance

Description

Reserve mobile safe-area insets beneath sticky bottom controls while preserving touch targets, content access, and zero horizontal overflow. Implement the learner-facing contract completely and satisfy every observable requirement without relying on hidden infrastructure.

Requirements

Size challenge-shell against the dynamic viewport so browser chrome changes do not hide controls.
Add env(safe-area-inset-bottom) to a nonzero base block-end padding.
Protect bottom-controls from left and right safe-area insets.
Keep the final challenge-item content scrollable above the bottom controls.
Keep each challenge-control at least 44 CSS pixels in both dimensions.
Avoid horizontal overflow at a 320 CSS-pixel viewport with safe-area padding.

Home indicator

Input

Bottom safe inset is 34px

Expected output

Controls retain base padding plus the 34px inset

Explanation

Size challenge-shell against the dynamic viewport so browser chrome changes do not hide controls.

Narrow landscape

Input

Inline safe insets are present

Expected output

Controls remain visible without sideways scrolling

Explanation

Add env(safe-area-inset-bottom) to a nonzero base block-end padding.

Constraints

Edit CSS only and keep the supplied shared fixture class names
Support narrow and wide viewports without horizontal page overflow
Preserve visible keyboard focus and readable text in every tested mode

Hints

Hint 1

Start with the dynamic-viewport-shell behavior and make its observable result deterministic.

Hint 2

Model bottom-safe-area-padding independently before combining it with the remaining states.

Hint 3

Verify the boundary described by no-horizontal-overflow without changing caller-owned input.

CSSsafe areasmobile controls