Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Keep fixed edge controls inside the usable safe area
For fixed bars in edge-to-edge mobile layouts, account for relevant safe-area insets while retaining ordinary spacing so controls remain reachable.
Bad example
| 1 | <nav style={{ position: 'fixed', bottom: 0, padding: 12 }}> |
| 2 | <button type="button">Continue</button> |
| 3 | </nav> |
Explanation (EN)
In a viewport that extends under device UI, fixed bottom controls can overlap the home indicator.
Objašnjenje (HR)
U prikazu koji se proteže ispod sistemskog sučelja, fiksne donje kontrole mogu se preklopiti s indikatorom početnog zaslona.
Good example
| 1 | <nav style={{ |
| 2 | position: 'fixed', |
| 3 | bottom: 0, |
| 4 | padding: 12, |
| 5 | paddingBottom: 'calc(12px + env(safe-area-inset-bottom, 0px))', |
| 6 | }}> |
| 7 | <button type="button">Continue</button> |
| 8 | </nav> |
Explanation (EN)
The bar preserves its normal padding and adds the device bottom inset. Check other edges when the orientation or layout requires it.
Objašnjenje (HR)
Traka čuva uobičajeni razmak i dodaje donji sigurni rub uređaja. Provjeri ostale rubove kad to zahtijeva orijentacija ili raspored.
Notes (EN)
Apply to bottom actions, banners and navigation in hosts using an edge-to-edge viewport. Inspect the host viewport and ancestor padding before adding insets. Verify portrait, landscape and devices where the inset is zero. Retain baseline spacing rather than replacing it with an inset that can be zero.
Bilješke (HR)
Primijeni na donje akcije, bannere i navigaciju u prikazima preko cijelog zaslona. Prije dodavanja sigurnih rubova provjeri viewport domaćina i razmake roditelja. Provjeri uspravnu i položenu orijentaciju te uređaje na kojima je sigurni rub nula. Zadrži osnovni razmak umjesto zamjene vrijednošću koja može biti nula.
Exceptions / Tradeoffs (EN)
Do not double-apply padding when a parent already owns the safe area. An ordinary inset viewport may already protect the controls. Safe-area padding does not by itself solve keyboard occlusion or all overlay placement problems.
Iznimke / Tradeoffi (HR)
Nemoj dvostruko dodavati razmak ako roditelj već obrađuje sigurni rub. Uobičajeni viewport može već štititi kontrole. Razmak sigurnog ruba sam ne rješava prekrivanje tipkovnicom ni sve probleme položaja slojeva.