diff --git a/src/_includes/components/custom-dialog.webc b/src/_includes/components/custom-dialog.webc
index 0a4c9e1..d84f07e 100644
--- a/src/_includes/components/custom-dialog.webc
+++ b/src/_includes/components/custom-dialog.webc
@@ -1,18 +1,27 @@
 <dialog
   class="border__all color__bg--contrast color__border--base--light radius__s"
+  oncancel="toggleDialog()"
+  onclick="toggleDialog()"
 >
-  <header
-    class="border__bottom color__bg--contrast color__border--base--light flow__flex flow__align--h-between flow__align--v-center padding__m"
-  >
-    <h3 class="color__type--base--ish" @text="title"></h3>
-    <button class="button__tertiary radius__all" onclick="toggleDialog()">
-      <icon name="cancel" webc:nokeep></icon>
-    </button>
-  </header>
-  <nav class="padding__l">
-    <slot></slot>
-  </nav>
+  <section onclick="preventAutoClose(event)">
+    <header
+      class="border__bottom color__bg--contrast color__border--base--light flow__flex flow__align--h-between flow__align--v-center padding__m"
+    >
+      <h3 class="color__type--base--ish" @text="title"></h3>
+      <button class="button__tertiary radius__all" onclick="toggleDialog()">
+        <icon name="cancel" webc:nokeep></icon>
+      </button>
+    </header>
+    <nav class="padding__l">
+      <slot></slot>
+    </nav>
+  </section>
 </dialog>
+<script>
+  function preventAutoClose(e) {
+    e.stopPropagation();
+  }
+</script>
 <style>
   dialog {
     inline-size: calc(100% - var(--size__l));
diff --git a/src/pages/style.css b/src/pages/style.css
index 44f7e8f..28eaa5f 100644
--- a/src/pages/style.css
+++ b/src/pages/style.css
@@ -70,7 +70,9 @@
     inline-size: 100%;
     margin-inline: auto;
     max-inline-size: var(--maxWidth);
-    padding: var(--size__l);
+    padding-block: var(--size__l);
+    padding-inline-start: calc(var(--size__l) + env(safe-area-inset-left));
+    padding-inline-end: calc(var(--size__l) + env(safe-area-inset-right));
 
     > * {
       min-inline-size: 0;