Skip to content

fix(frontend): respect PWA safe areas #198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KyleTryon merged 1 commit into from
Sep 13, 2026
Merged

fix(frontend): respect PWA safe areas #198

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function App() {

if (loading) {
return (
<div className="flex min-h-screen flex-col items-center justify-center gap-6 bg-background text-foreground">
<div className="flex min-h-(--app-viewport-height) flex-col items-center justify-center gap-6 bg-background text-foreground">
<div className="relative">
<img
src="/logo-light.svg"
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/AuthCompleteScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default function AuthCompleteScreen() {
}, []);

return (
<div className="min-h-screen bg-background text-foreground flex items-center justify-center p-4">
<div className="min-h-(--app-viewport-height) bg-background text-foreground flex items-center justify-center p-4">
<div className="bg-card text-card-foreground border border-border p-8 rounded-lg w-full max-w-md shadow-2xl text-center">
<div className="flex items-center justify-center mb-6">
<img
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/DashboardMobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export function DashboardMobileMenu({
<Menu className="h-5 w-5" />
</button>
</DrawerTrigger>
<DrawerContent className="border-border bg-background/95 pb-[max(1rem,env(safe-area-inset-bottom))] sm:hidden">
<DrawerContent className="border-border bg-background/95 [--drawer-bottom-padding:1rem] sm:hidden">
<DrawerTitle className="sr-only">Cliparr Menu</DrawerTitle>
<DrawerDescription className="sr-only">
Dashboard menu
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/DashboardScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -768,7 +768,7 @@ export default function DashboardScreen({
) : null;

return (
<div className="min-h-screen bg-background p-4 text-foreground sm:p-8">
<div className="min-h-(--app-viewport-height) bg-background p-4 text-foreground sm:p-8">
<div className="max-w-5xl mx-auto">
<header className="mb-5 space-y-4 sm:mb-12 sm:flex sm:items-center sm:justify-between sm:space-y-0">
<div className="flex items-start justify-between gap-3">
Expand Down
4 changes: 2 additions & 2 deletions apps/frontend/src/components/editor/EditorScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -644,7 +644,7 @@ function EditorScreenContent({

if (!exportSource.source) {
return (
<div className="flex h-dvh items-center justify-center overflow-hidden bg-background p-8 text-foreground">
<div className="flex h-(--app-viewport-height) items-center justify-center overflow-hidden bg-background p-8 text-foreground">
<div className="text-center">
<p className="text-destructive mb-4">No exportable stream found.</p>
<button onClick={onBack} className="text-primary hover:underline">
Expand All @@ -656,7 +656,7 @@ function EditorScreenContent({
}

return (
<div className="flex h-dvh flex-col overflow-hidden bg-editor-workspace text-foreground">
<div className="flex h-(--app-viewport-height) flex-col overflow-hidden bg-editor-workspace text-foreground">
<ConfirmationDialog
open={subtitleTrackChangePending}
title="Replace subtitle cues?"
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/provider-connect/ProviderConnectScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function ProviderConnectScreen({
onOpenLocalVideo,
}: Properties) {
return (
<div className="flex min-h-screen items-start justify-center bg-background text-foreground sm:p-4 sm:pt-12">
<div className="flex min-h-(--app-viewport-height) items-start justify-center bg-background text-foreground sm:p-4 sm:pt-12">
<div className="relative w-full max-w-2xl overflow-hidden text-card-foreground sm:rounded-4xl sm:border sm:border-border sm:bg-card sm:shadow-2xl">
<div className="pointer-events-none absolute inset-0">
<div className="absolute inset-x-0 top-0 h-40 bg-linear-to-b from-primary/10 via-secondary/5 to-transparent" />
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/ui/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ function DialogPortal({
const content = (
<div
className={cn(
"pointer-events-none fixed inset-0 z-50 grid place-items-center p-4",
"pointer-events-none fixed top-(--safe-area-top) right-(--safe-area-right) bottom-(--safe-area-bottom) left-(--safe-area-left) z-50 grid place-items-center p-4",
className,
)}
>
Expand Down
2 changes: 1 addition & 1 deletion apps/frontend/src/components/ui/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const DrawerContent = React.forwardRef<
<DrawerPrimitive.Content
ref={ref}
className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex max-h-[85dvh] flex-col rounded-t-2xl border border-border bg-card text-card-foreground shadow-2xl outline-none",
"fixed right-(--safe-area-right) bottom-0 left-(--safe-area-left) z-50 flex max-h-[min(85dvh,calc(100dvh-var(--safe-area-top)-6rem))] flex-col overflow-y-auto rounded-t-2xl border border-border bg-card pb-[max(var(--drawer-bottom-padding,0px),var(--safe-area-bottom))] text-card-foreground shadow-2xl outline-none",
className,
)}
{...props}
Expand Down
15 changes: 15 additions & 0 deletions apps/frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
@custom-variant dark (&:is(.dark *));

:root {
--safe-area-top: env(safe-area-inset-top);
--safe-area-right: env(safe-area-inset-right);
--safe-area-bottom: env(safe-area-inset-bottom);
--safe-area-left: env(safe-area-inset-left);
--app-viewport-height: calc(
100dvh - var(--safe-area-top) - var(--safe-area-bottom)
);
--background: oklch(0.9851 0 0);
--foreground: oklch(0.1591 0 0);
--card: oklch(0.9461 0 0);
Expand Down Expand Up @@ -511,6 +518,14 @@
background-clip: padding-box;
}

/* The app owns safe-area padding; route screens use the remaining height. */
#root {
box-sizing: border-box;
min-height: 100dvh;
padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom)
var(--safe-area-left);
}

body {
@apply bg-background text-foreground;
letter-spacing: var(--tracking-normal);
Expand Down
4 changes: 2 additions & 2 deletions apps/frontend/src/routes/_app.edit.$sessionId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,15 +85,15 @@ function EditorRouteComponent() {

if (loading) {
return (
<div className="flex min-h-screen items-center justify-center bg-background text-foreground">
<div className="flex min-h-(--app-viewport-height) items-center justify-center bg-background text-foreground">
<BarsLoader label="Loading editor…" showLabel />
</div>
);
}

if (error) {
return (
<div className="flex min-h-screen items-center justify-center bg-background px-6 text-foreground">
<div className="flex min-h-(--app-viewport-height) items-center justify-center bg-background px-6 text-foreground">
<div className="max-w-md space-y-4 text-center">
<p className="text-sm text-destructive">{error}</p>
<div className="flex flex-wrap items-center justify-center gap-3">
Expand Down
4 changes: 2 additions & 2 deletions apps/frontend/src/routes/local.edit.$sessionId.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ function LocalEditorRouteComponent() {

if (loading) {
return (
<div className="flex min-h-screen items-center justify-center bg-background text-foreground">
<div className="flex min-h-(--app-viewport-height) items-center justify-center bg-background text-foreground">
<BarsLoader label="Loading local video…" showLabel />
</div>
);
Expand All @@ -71,7 +71,7 @@ function LocalEditorRouteComponent() {
const needsPermission = resolution?.status === "permission-needed";

return (
<div className="flex min-h-screen items-center justify-center bg-background p-6 text-foreground">
<div className="flex min-h-(--app-viewport-height) items-center justify-center bg-background p-6 text-foreground">
<div className="w-full max-w-md rounded-lg border border-border bg-card p-5 text-card-foreground shadow-lg">
<div className="mb-4 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background text-muted-foreground">
{needsPermission ? (
Expand Down