use physical properties for safe-area

yuheiy · Apr 9, 2024 · 73a9de8 · 73a9de8
1 parent 40dbda8
commit 73a9de8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/styles/components/prose.css b/src/styles/components/prose.css
@@ -50,10 +50,10 @@
 
     /* Apply when the container reaches `inline-size: 46rem`. */
     @container root (inline-size > 51.125rem) {
-      margin-inline-start: calc(var(--wrapper-padding-left) * -1);
-      margin-inline-end: calc((100cqi - var(--wrapper-padding-left) - 100%) * -1);
-      padding-inline-start: var(--wrapper-padding-left);
-      padding-inline-end: var(--wrapper-padding-right);
+      margin-right: calc((100cqi - var(--wrapper-padding-left) - 100%) * -1);
+      margin-left: calc(var(--wrapper-padding-left) * -1);
+      padding-right: var(--wrapper-padding-right);
+      padding-left: var(--wrapper-padding-left);
     }
   }
 

diff --git a/src/styles/components/wrapper.css b/src/styles/components/wrapper.css
@@ -13,8 +13,8 @@
   );
 
   box-sizing: content-box;
-  padding-inline-start: var(--wrapper-padding-left);
-  padding-inline-end: var(--wrapper-padding-right);
+  padding-right: var(--wrapper-padding-right);
+  padding-left: var(--wrapper-padding-left);
   max-inline-size: var(--wrapper-column);
 
   > :where(*) {