julienfroidefond/stripstream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dynamic island test 1

Browse Source
This commit is contained in:
Julien Froidefond
2025-03-04 20:42:03 +01:00
parent ba466c3ad3
commit 965b14429d
4 changed files with 28 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/layout.tsx
View File

@@ -63,7 +63,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
const locale = cookieStore.get("NEXT_LOCALE")?.value || "fr"; const locale = cookieStore.get("NEXT_LOCALE")?.value || "fr";
return ( return (
<html lang={locale} suppressHydrationWarning> <html lang={locale} suppressHydrationWarning className="h-full">
<head> <head>
<meta <meta
name="viewport" name="viewport"
@@ -119,7 +119,9 @@ export default async function RootLayout({ children }: { children: React.ReactNo
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/> />
</head> </head>
<body className={cn("min-h-screen bg-background font-sans antialiased", inter.className)}> <body
className={cn("min-h-screen bg-background font-sans antialiased h-full", inter.className)}
>
<I18nProvider locale={locale}> <I18nProvider locale={locale}>
<PreferencesProvider> <PreferencesProvider>
<ClientLayout>{children}</ClientLayout> <ClientLayout>{children}</ClientLayout>

4
src/components/layout/ClientLayout.tsx
View File

@@ -64,11 +64,11 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
return ( return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem> <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<PreferencesProvider> <PreferencesProvider>
<div className="relative min-h-screen"> <div className="relative min-h-screen h-full">
<LoadingBar /> <LoadingBar />
{!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />} {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
{!isPublicRoute && <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />} {!isPublicRoute && <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />}
<main className={`${!isPublicRoute ? "container" : ""}`}>{children}</main> <main className={`${!isPublicRoute ? "container pt-safe" : ""}`}>{children}</main>
<InstallPWA /> <InstallPWA />
<Toaster /> <Toaster />
<NetworkStatus /> <NetworkStatus />

2
src/components/layout/Header.tsx
View File

@@ -16,7 +16,7 @@ export function Header({ onToggleSidebar }: HeaderProps) {
}; };
return ( return (
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 pt-safe">
<div className="container flex h-14 max-w-screen-2xl items-center"> <div className="container flex h-14 max-w-screen-2xl items-center">
<button <button
onClick={onToggleSidebar} onClick={onToggleSidebar}

22
src/styles/globals.css
View File

@@ -2,7 +2,22 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html, body {overscroll-behavior:none} html,
body {
overscroll-behavior: none;
}
/* Ajout des règles pour gérer le safe-area-inset sur iOS */
@supports (padding-top: env(safe-area-inset-top)) {
body {
padding-top: env(safe-area-inset-top);
}
header.sticky {
padding-top: env(safe-area-inset-top);
height: calc(3.5rem + env(safe-area-inset-top)); /* 3.5rem (h-14) + safe-area-inset-top */
}
}
@layer base { @layer base {
:root { :root {
@@ -85,4 +100,9 @@ html, body {overscroll-behavior:none}
.hide-scrollbar::-webkit-scrollbar { .hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome, Safari and Opera */ display: none; /* Chrome, Safari and Opera */
} }
/* Classe utilitaire pour le padding-top avec safe-area-inset */
.pt-safe {
padding-top: env(safe-area-inset-top, 0);
}
} }