Skip to content

feat: add viewport #52

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

Open
barnes-c wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat: add viewport #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1193963
feat: add viewport
barnes-c Nov 3, 2025
97d9c7c
wtf
barnes-c Nov 3, 2025
1373322
Merge branch 'master' into feat/add-viewport
barnes-c Nov 14, 2025
af20f1c
add viewport
barnes-c Nov 14, 2025
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
45 changes: 44 additions & 1 deletion src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--safe-top: env(safe-area-inset-top);
--safe-right: env(safe-area-inset-right);
--safe-bottom: env(safe-area-inset-bottom);
--safe-left: env(safe-area-inset-left);
}

.dark {
Expand Down Expand Up @@ -73,9 +77,48 @@
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);
}
.page {
min-height: 100dvh; /* use dynamic viewport to avoid iOS URL bar jumps */
padding-top: var(--safe-top);
padding-right: var(--safe-right);
padding-bottom: var(--safe-bottom);
padding-left: var(--safe-left);
}

/* Utilities for fixed headers/footers that must clear safe areas */
.fixed-top {
position: fixed;
inset: 0 0 auto 0;
padding-top: var(--safe-top);
}

.fixed-bottom {
position: fixed;
inset: auto 0 0 0;
padding-bottom: var(--safe-bottom);
}

/* Optional touch target helper for bottom bars */
.touch-target {
padding-bottom: max(16px, var(--safe-bottom));
}

/* Tailwind font hook if you use the font variables */
.font-sans {
font-family: var(--font-geist), ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji",
"Segoe UI Emoji";
}

html,
body {
margin: 0;
padding: 0;
min-height: 100%;
background: #ffffff; /* match themeColor (light) */
}

@theme inline {
/* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
--font-sans: "Geist", "Geist Fallback";
--font-mono: "Geist Mono", "Geist Mono Fallback";
--color-background: var(--background);
Expand Down
10 changes: 9 additions & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Metadata } from "next"
import type { Metadata, Viewport } from "next"
import { Geist, Geist_Mono } from "next/font/google"
import type { ReactNode } from "react"
import "./globals.css"
Expand Down Expand Up @@ -27,6 +27,14 @@ export const metadata: Metadata = {
},
}

export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
viewportFit: 'cover',
};

export default function RootLayout({
children,
}: Readonly<{
Expand Down