Safe area utilities

tier 2 — classes

Three classes that hold an element of your own clear of the part of the screen the device has taken — a home indicator, a notch, a rounded corner.

The host page has to opt in Until its viewport meta carries viewport-fit=cover, a browser lays the page out inside the display's safe area and every inset reports 0px on every device — see Getting started. With it, nothing has to detect a device: env() is the detection, and every inset is 0px where there is nothing in the way.

Holding an element clear

.sedna-safe-top, .sedna-safe-bottom and .sedna-safe-inline are for an element the library cannot see — a sticky action bar, a footer, a bottom nav, a cookie banner. The frame already holds itself clear.

They add padding, not margin, so put the class on the element carrying the background rather than on a wrapper: a margin leaves a transparent band in the strip the device has taken. Where a class does not fit, read --safe-block-start, --safe-block-end, --safe-inline-start and --safe-inline-end from the Tokens page rather than env() — the inline pair is mirrored for dir="rtl", which env() cannot do on its own.

On this desktop all four insets are 0px, so the bar below is exactly the bar you would write anyway. The frame beneath it sets --safe-block-end to 34px by hand — an iPhone's home indicator — to show what the class then does.

Your own action bar

Simulating a 34px home indicator

The same bar, with .sedna-safe-bottom

<div class="sedna-col" style="max-width:460px">
    <p class="text-muted text-sm">
        On this desktop all four insets are 0px, so the bar below is exactly the bar you would
        write anyway. The frame beneath it sets --safe-block-end to 34px by hand — an iPhone's
        home indicator — to show what the class then does.
    </p>

    <div class="card">
        <div class="card-body sedna-row">
            <span class="sedna-fill">Your own action bar</span>
            <button class="btn btn-sm btn-go">Save</button>
        </div>
    </div>

    <div style="--safe-block-end:34px; border:1px dashed var(--border-strong); border-radius:var(--radius-surface); padding:12px">
        <div class="text-muted text-sm" style="margin-bottom:8px">Simulating a 34px home indicator</div>
        <div class="card">
            <div class="card-body sedna-row sedna-safe-bottom">
                <span class="sedna-fill">The same bar, with .sedna-safe-bottom</span>
                <button class="btn btn-sm btn-go">Save</button>
            </div>
        </div>
    </div>
</div>

The top and the sides

.sedna-safe-top and .sedna-safe-inline, for a bar of your own that reaches the top of the screen or its edges — a full-screen viewer's toolbar, a bar in landscape, where the notch is on one side and the rounded corners on both. The inline pair follows dir, so the notch side swaps with the writing direction without a second class.

A phone held sideways: the notch takes 44px from one inline edge, the rounded corners 44px from the other, and the status strip 21px from the top. Set by hand on the frame below — on the device itself the values come from env() and this markup does not change.

Simulating a notch, two rounded corners and a status strip

Your own full-screen bar

<div class="sedna-col" style="max-width:460px">
    <p class="text-muted text-sm">
        A phone held sideways: the notch takes 44px from one inline edge, the rounded corners 44px
        from the other, and the status strip 21px from the top. Set by hand on the frame below —
        on the device itself the values come from env() and this markup does not change.
    </p>

    <div style="--safe-block-start:21px; --safe-inline-start:44px; --safe-inline-end:44px; border:1px dashed var(--border-strong); border-radius:var(--radius-surface); padding:12px">
        <div class="text-muted text-sm" style="margin-bottom:8px">Simulating a notch, two rounded corners and a status strip</div>
        <div class="card">
            <div class="card-body sedna-row sedna-safe-top sedna-safe-inline">
                <button class="btn btn-sm btn-icon" type="button" aria-label="Back"><i class="ri-arrow-left-line"></i></button>
                <span class="sedna-fill">Your own full-screen bar</span>
                <button class="btn btn-sm btn-go">Done</button>
            </div>
        </div>
    </div>
</div>