starred/coolify
1
0
Fork 0
mirror of https://github.com/coollabsio/coolify.git synced 2026-11-06 13:10:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): prevent layout shifts with a stable scrollbar gutter

Browse Source 
Skip terminal scroll-lock padding when the browser reserves scrollbar space.
This commit is contained in:
Andras Bacsai
2026-10-12 15:07:09 +02:00
parent c54902f776
commit 5756a4cda4
2 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+2
View File
@@ -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 {
resources/js/terminal.js
+3 -1
View File
@@ -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');