diff --git a/apps/bottle/src/app/layout.css.ts b/apps/bottle/src/app/layout.css.ts index 8dc0331..6e786fd 100644 --- a/apps/bottle/src/app/layout.css.ts +++ b/apps/bottle/src/app/layout.css.ts @@ -1,20 +1,31 @@ import { colors, spacings } from '@bottlesteam/ui'; import { style } from '@vanilla-extract/css'; +import { recipe } from '@vanilla-extract/recipes'; -export const layoutStyle = style({ - width: '100%', - minWidth: '360px', - padding: '0 16px', - '@media': { - 'screen and (min-width: 500px)': { - width: '360px', +export const layoutStyle = recipe({ + base: { + width: '100%', + minWidth: '360px', + padding: '0 16px', + '@media': { + 'screen and (min-width: 500px)': { + width: '360px', + }, + }, + height: 'auto', + minHeight: '100vh', + backgroundColor: colors.neutral50, + margin: '0 auto', + position: 'relative', + }, + variants: { + notch: { + true: { + paddingTop: 'env(safe-area-inset-top)', + }, + false: {}, }, }, - height: 'auto', - minHeight: '100vh', - backgroundColor: colors.neutral50, - margin: '0 auto', - position: 'relative', }); export const errorImageContainer = style({ diff --git a/apps/bottle/src/app/layout.tsx b/apps/bottle/src/app/layout.tsx index 5025da1..0911984 100644 --- a/apps/bottle/src/app/layout.tsx +++ b/apps/bottle/src/app/layout.tsx @@ -1,10 +1,12 @@ import { AppBridgeProvider } from '@/features/app-bridge/AppBridgeProvider'; import { UserAgentProvider } from '@/features/user-agent/UserAgentProvider'; import { QueryClientProvider } from '@/store/query/QueryClientProvider'; +import { getCookie } from 'cookies-next'; import type { Metadata } from 'next'; import './globals.css'; import '@bottlesteam/ui/styles'; import type { Viewport } from 'next'; +import { cookies } from 'next/headers'; import { wantedSansStd } from '../fonts'; import { layoutStyle } from './layout.css'; @@ -27,7 +29,7 @@ export default function RootLayout({ return ( -
+
{children}