diff --git a/src/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss b/src/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss new file mode 100644 index 0000000..97f884d --- /dev/null +++ b/src/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss @@ -0,0 +1,6 @@ +.SafeArea { + padding-top: env(safe-area-inset-top); + padding-bottom: env(safe-area-inset-bottom); + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); +} diff --git a/src/components/common/SafeAreaWrapper/SafeAreaWrapper.tsx b/src/components/common/SafeAreaWrapper/SafeAreaWrapper.tsx new file mode 100644 index 0000000..329ea23 --- /dev/null +++ b/src/components/common/SafeAreaWrapper/SafeAreaWrapper.tsx @@ -0,0 +1,7 @@ +import styles from "@/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss"; + +const SafeAreaWrapper = ({ children }: { children: React.ReactNode }) => { + return
{children}
; +}; + +export default SafeAreaWrapper; diff --git a/src/main.tsx b/src/main.tsx index 3a49d45..26d6a29 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -5,6 +5,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import AppRouter from "@/router/AppRouter"; +import SafeAreaWrapper from "@/components/common/SafeAreaWrapper/SafeAreaWrapper"; import { AppBridgeProvider } from "@/components/provider/AppBridgeProvider/AppBridgeProvider"; import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider"; import { UserAgentProvider } from "@/components/provider/UserAgentProvider"; @@ -17,8 +18,10 @@ ReactDom.createRoot(document.getElementById("root")!).render( - - + + + +