feat(bottle): add padding top for notch area

Nexters · Sep 24, 2024 · e0d9f25 · e0d9f25
1 parent de78260
commit e0d9f25
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git 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
@@ -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 (
     <html lang="en">
       <body className={wantedSansStd.className}>
-        <main className={layoutStyle}>
+        <main className={layoutStyle({ notch: getCookie('version', { cookies }) != null })}>
           <QueryClientProvider>
             <UserAgentProvider>
               <AppBridgeProvider>{children}</AppBridgeProvider>