Import global Leaflet CSS in the app layout, create a MapErrorBoundary in the map page to catch map load failures and show a retry UI, and wrap the dynamic CollectionMap with that boundary. Adjust CollectionMap by removing the local Leaflet CSS import, cleaning up unused imports/types, and changing the container to absolute/full-bleed styling so the map fills its parent. These changes improve robustness against map loading errors and ensure Leaflet styles are applied app-wide.
61 lines
No EOL
1.9 KiB
TypeScript
61 lines
No EOL
1.9 KiB
TypeScript
import type { Metadata, Viewport } from "next";
|
|
import "leaflet/dist/leaflet.css";
|
|
import "./globals.css";
|
|
import { AuthProvider } from "@/components/AuthProvider";
|
|
import OfflineIndicator from "@/components/OfflineIndicator";
|
|
import InstallPrompt from "@/components/InstallPrompt";
|
|
import { PWABridge } from "@/components/PWABridge";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "1Driver - Collections",
|
|
description: "Mobile driver collection management app",
|
|
manifest: "/manifest.json",
|
|
appleWebApp: {
|
|
capable: true,
|
|
statusBarStyle: "black-translucent",
|
|
title: "1Driver",
|
|
},
|
|
formatDetection: {
|
|
telephone: false,
|
|
},
|
|
};
|
|
|
|
export const viewport: Viewport = {
|
|
width: "device-width",
|
|
initialScale: 1,
|
|
maximumScale: 1,
|
|
userScalable: false,
|
|
viewportFit: "cover",
|
|
themeColor: "#ea580c",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
|
|
<link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152.png" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="theme-color" content="#ea580c" />
|
|
<meta name="background-color" content="#f97316" />
|
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com" />
|
|
<link rel="preconnect" href="https://tile.openstreetmap.org" />
|
|
</head>
|
|
<body className="antialiased bg-gray-50 safe-top safe-bottom overscroll-none">
|
|
<AuthProvider>
|
|
<PWABridge />
|
|
<OfflineIndicator />
|
|
<InstallPrompt />
|
|
{children}
|
|
</AuthProvider>
|
|
</body>
|
|
</html>
|
|
);
|
|
} |