Files
vpinball/app/layout.tsx
T
valknarandClaude Sonnet 5 5b30442c4a Opt Big Shoulders out of automatic fallback-metrics adjustment
Next's fallback-metrics table has no entry for this (newer, merged
variable-font) family name, so the CLS-reducing fallback override it
tries to generate always fails with a build warning. Correctly
suppresses it under webpack; Turbopack (this project's default
builder) doesn't yet honor the flag the same way, so the warning
still prints there today, but the setting is still the semantically
correct declaration of intent and forward-compatible.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012hQoM3jJT1Lx7CMTciMzvD
2026-08-23 05:39:09 +02:00

51 lines
1.6 KiB
TypeScript

import type { Metadata, Viewport } from "next";
import { Big_Shoulders, Space_Grotesk, IBM_Plex_Mono } from "next/font/google";
import RegisterServiceWorker from "@/components/RegisterServiceWorker";
import "./globals.css";
const bigShoulders = Big_Shoulders({
variable: "--font-big-shoulders",
weight: ["700", "900"],
subsets: ["latin"],
// Next's fallback-metrics table has no entry for this (newer, merged
// variable-font) family name, so the automatic CLS-reducing fallback
// override it would otherwise generate always fails with a build
// warning — opt out instead of leaving that warning unresolved.
adjustFontFallback: false,
});
const spaceGrotesk = Space_Grotesk({
variable: "--font-space-grotesk",
subsets: ["latin"],
});
const plexMono = IBM_Plex_Mono({
variable: "--font-plex-mono",
weight: ["400", "500", "600"],
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "vpinball — Visual Pinball in your browser",
description:
"Play real .vpx pinball tables in the browser, powered by a WebAssembly build of Visual Pinball. Drop in your own table or play the bundled demo.",
};
export const viewport: Viewport = {
themeColor: "#0b0b0f",
};
export default function RootLayout({ children }: LayoutProps<"/">) {
return (
<html
lang="en"
className={`${bigShoulders.variable} ${spaceGrotesk.variable} ${plexMono.variable} h-full antialiased`}
>
<body className="min-h-full flex flex-col bg-ink text-paper font-body">
{children}
<RegisterServiceWorker />
</body>
</html>
);
}