mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 02:45:39 -04:00
jakeandClaude
57ce0fd85d
* Fix mobile pinch zoom and content overlapping header/footer on iOS Safari Add viewport export with maximumScale=1 and userScalable=false to prevent pinch-to-zoom. Add viewportFit=cover for proper safe area support. Fix content rendering above the sticky header and below the fixed mobile tab bar on iOS Safari by adding relative z-0 to the content wrapper, creating a stacking context that keeps page content below both navigation elements. https://claude.ai/code/session_01Re8ndXPAMVMtiHZFVNDK7S * Add safe area inset support for iOS 26 and fix film grain z-index - Add safe-area-inset-top padding to NavBar for notch/Dynamic Island - Add safe-area-inset-left/right to NavBar, main content, and MobileTabBar for landscape mode - Account for safe-area-inset-bottom in content wrapper padding so content isn't hidden behind MobileTabBar + home indicator - Lower film grain overlay z-index from 9999 to 1 to avoid triggering iOS 26 Safari's fixed-element tab tinting behavior https://claude.ai/code/session_01Re8ndXPAMVMtiHZFVNDK7S * Hide ambient glow on mobile where it overwhelms the viewport The 800x600px blurred glow blob dominates narrow mobile screens and clashes with title backdrop images. Hidden below sm breakpoint. https://claude.ai/code/session_01Re8ndXPAMVMtiHZFVNDK7S * Fix asymmetric safe-area insets using separate pl/pr padding The previous px-[max(...,env(safe-area-inset-left))] shorthand applied only the left inset to both sides. Split into separate pl/pr with the correct env() variable for each side. https://claude.ai/code/session_01Re8ndXPAMVMtiHZFVNDK7S --------- Co-authored-by: Claude <noreply@anthropic.com>
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { MotionConfig } from "motion/react";
|
|
import type { Metadata, Viewport } from "next";
|
|
import { DM_Sans, DM_Serif_Display, Geist_Mono } from "next/font/google";
|
|
import { TooltipProvider } from "@/components/ui/tooltip";
|
|
|
|
import "./globals.css";
|
|
import { Toaster } from "@/components/ui/sonner";
|
|
|
|
const dmSans = DM_Sans({
|
|
variable: "--font-dm-sans",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const dmSerif = DM_Serif_Display({
|
|
variable: "--font-dm-serif",
|
|
weight: "400",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const geistMono = Geist_Mono({
|
|
variable: "--font-geist-mono",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Sofa",
|
|
description: "Track your movies and TV shows",
|
|
themeColor: "#090706",
|
|
};
|
|
|
|
export const viewport: Viewport = {
|
|
width: "device-width",
|
|
initialScale: 1,
|
|
maximumScale: 1,
|
|
userScalable: false,
|
|
viewportFit: "cover",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="en" style={{ colorScheme: "dark" }}>
|
|
<body
|
|
className={`${dmSans.variable} ${dmSerif.variable} ${geistMono.variable} overflow-x-hidden font-sans antialiased`}
|
|
style={{ touchAction: "manipulation" }}
|
|
>
|
|
<a
|
|
href="#main-content"
|
|
className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md"
|
|
>
|
|
Skip to main content
|
|
</a>
|
|
<MotionConfig reducedMotion="user">
|
|
<TooltipProvider>{children}</TooltipProvider>
|
|
</MotionConfig>
|
|
<Toaster position="bottom-right" />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|