diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css
index 04a343324..22f67d55f 100644
--- a/app/assets/stylesheets/bubbles.css
+++ b/app/assets/stylesheets/bubbles.css
@@ -239,10 +239,10 @@
 
 .bubble__container {
   inline-size: min(67ch, 75vw);
-  max-inline-size: 100vw;
+  max-inline-size: 100dvw;
 
   @media (max-width: 70ch) {
-    inline-size: min(67ch, 100vw);
+    inline-size: min(67ch, 100dvw);
   }
 }
 
diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css
index b2d33064d..b1d53e0c7 100644
--- a/app/assets/stylesheets/layout.css
+++ b/app/assets/stylesheets/layout.css
@@ -5,9 +5,9 @@ body {
 
 :where(#main) {
   container-type: normal;
-  inline-size: 100vw;
+  inline-size: 100dvw;
   margin-inline: auto;
-  max-inline-size: 100vw;
+  max-inline-size: 100dvw;
   padding-inline: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
   text-align: center;
 
@@ -31,7 +31,7 @@ body {
 }
 
 :where(#footer) {
-  max-inline-size: 100vw;
+  max-inline-size: 100dvw;
 
   > nav {
     padding-inline: var(--inline-space);
@@ -39,7 +39,7 @@ body {
 }
 
 :where(#header) {
-  max-inline-size: 100vw;
+  max-inline-size: 100dvw;
   view-transition-name: header;
 
   > nav {