[ @sdxc/u/size ]

padding-bottom

Pads the given physical side by its env(safe-area-inset-{side}) value, falling back to fallback ("0px" by default) on platforms with no safe area to avoid.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { safeAreaPadding } from "@sdxc/u/size";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.safeAreaPadding("bottom")`	`css({ paddingBottom: "env(safe-area-inset-bottom, 0px)" })`
`u.safeAreaPadding("top", "1rem")`	`css({ paddingTop: "env(safe-area-inset-top, 1rem)" })`

Examples

Basic example

Use safeAreaPadding("bottom") to keep a bottom bar clear of a phone's home indicator. It needs viewport-fit=cover in the viewport meta tag, and adds nothing on a screen without a safe area:

Inbox

<div mix={[is(72), ...]}>
	<p mix={[p(4), ...]}>Inbox</p>
	<nav mix={[hstack({ justify: "around" }), pbs(3), safeAreaPadding("bottom"), ...]}>
		<span>Home</span>
		<span>Search</span>
		<span>Profile</span>
	</nav>
</div>

Fallback value

Pass a second value, like safeAreaPadding("top", "0.75rem"), for the padding to use in a browser that defines no safe-area inset:

Messages

3 unread

<div mix={[is(72), ...]}>
	<header mix={[pbe(3), pi(4), safeAreaPadding("top", "0.75rem"), ...]}>
		Messages
	</header>
	<p mix={[p(4), ...]}>3 unread</p>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.safeAreaPadding("bottom"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.safeAreaPadding("bottom"))

Signature

u.safeAreaPadding(side: SafeAreaSide, fallback?: string)