diff --git a/resources/css/app.css b/resources/css/app.css
index c963d109fe..f295b981b2 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -288,6 +288,8 @@ select,
 
     html {
         color-scheme: light;
+        /* Reserve the scrollbar space so the layout does not shift when a page starts or stops scrolling. */
+        scrollbar-gutter: stable;
     }
 
     html.dark {
diff --git a/resources/js/terminal.js b/resources/js/terminal.js
index 420e20fb11..8d281a9982 100644
--- a/resources/js/terminal.js
+++ b/resources/js/terminal.js
@@ -1262,7 +1262,9 @@ export function initializeTerminalComponent() {
                     bodyOverscroll: document.body.style.getPropertyValue('overscroll-behavior'),
                 };
 
-                const scrollbarGap = Math.max(0, window.innerWidth - document.documentElement.clientWidth);
+                // html keeps a stable scrollbar gutter, so only pad when the browser has no gutter.
+                const hasStableGutter = getComputedStyle(document.documentElement).scrollbarGutter.startsWith('stable');
+                const scrollbarGap = hasStableGutter ? 0 : Math.max(0, window.innerWidth - document.documentElement.clientWidth);
 
                 document.documentElement.style.setProperty('overflow', 'hidden', 'important');
                 document.documentElement.style.setProperty('overscroll-behavior', 'none', 'important');