From 5756a4cda4ed77aebfd5d0d73b46fb550e1fe756 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Mon, 12 Oct 2026 15:07:09 +0200
Subject: [PATCH] fix(ui): prevent layout shifts with a stable scrollbar gutter

Skip terminal scroll-lock padding when the browser reserves scrollbar space.
---
 resources/css/app.css    | 2 ++
 resources/js/terminal.js | 4 +++-
 2 files changed, 5 insertions(+), 1 deletion(-)

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');