From cee179732705239bea5d4d9f13ea9d4cf3c01206 Mon Sep 17 00:00:00 2001
From: pythonlearner1025 <mjsong2021@gmail.com>
Date: Wed, 16 Sep 2026 19:42:27 -0700
Subject: [PATCH] fix(editor): the viewport fills its slot, no reserved
 scrollbar gutters

index.html asked every element for `scrollbar-gutter: stable`. In Chrome an
`overflow: hidden` box is a scroll container, so each one kept 11 px for a
scrollbar it can never show. The canvas lost 33 px to three nested panels and
the Inspector lost 44 px to four nested boxes.

The gutter now sits on the four boxes that really scroll: the Objects tree's
tab panel, the Resources sections, the Files grid and the Inspector's panel
stack view. The Resources tab brings its own scroll box, so the tab panel under
it reserves nothing. The Inspector card drops `overflow-y: scroll`, which drew a
permanent empty track beside the real scrollbar.

At 1600x1000 the canvas goes from 913 in a 946 slot to 959 in a 959 slot, and
the Inspector content from 260 to 309 against a 320 tab strip. Boxes that keep a
gutter go from 65 to 3. The three scroll boxes keep the same gutter with short
and long content: 11, 12, 11 both ways.

Verified headless on Chrome at 1512x982 and 1600x1000, both themes, every panel
collapsed and expanded, and a window resize. npm run typecheck, npm run lint,
npm test -w packages/kite3d (10 tests), npm run test:scripts (2 tests).
---
 packages/editor/index.html                    |  1 -
 packages/editor/src/renderer.scss             | 21 ++++++++++++++++---
 packages/uiconfig-blueprint/src/renderer.scss |  5 ++++-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/editor/index.html b/packages/editor/index.html
index 57e8ee13..119d76a2 100644
--- a/packages/editor/index.html
+++ b/packages/editor/index.html
@@ -17,7 +17,6 @@
       * {
         scrollbar-width: thin;
         scrollbar-color: hsla(var(--pt-intent-primary-hsl, 215,65%,50%), 0.7) rgba(50, 64, 64, 0.3);
-        scrollbar-gutter: stable;
       }
       *::-webkit-scrollbar
       {
diff --git a/packages/editor/src/renderer.scss b/packages/editor/src/renderer.scss
index 6e95e190..c3867a0d 100644
--- a/packages/editor/src/renderer.scss
+++ b/packages/editor/src/renderer.scss
@@ -206,6 +206,18 @@ button.kite3d-status-chip {
   line-height: inherit;
 }
 
+// The left slot's tab panel. The Objects tree scrolls in it, so it keeps the scrollbar's width
+// whether the tree overflows or not, and the rows do not jump as branches open and close.
+.hierarchy-stack{
+  scrollbar-gutter: stable;
+}
+
+// The Resources tab holds its own scroll box below, so this panel never scrolls and reserves
+// nothing.
+.hierarchy-stack:has(.resources-panel){
+  scrollbar-gutter: auto;
+}
+
 .hierarchy-stack .folderContent{
   flex: 1 1 auto;
   max-width: 100%;
@@ -219,6 +231,8 @@ button.kite3d-status-chip {
   flex-direction: column;
   height: 100%;
   overflow-y: auto;
+  // The sections scroll here, so the rows keep their width when the scrollbar comes and goes.
+  scrollbar-gutter: stable;
 }
 .resources-section-header{
   align-items: center;
@@ -482,6 +496,8 @@ button.kite3d-status-chip {
   width: 100%;
   flex: 1 1;
   overflow-y: auto;
+  // The grid is the Files tab's scroller, so the items keep their columns as the folder changes.
+  scrollbar-gutter: stable;
   --file-item-button-text-height: 14px;
 }
 .file-item-button-group{
@@ -660,11 +676,10 @@ button.kite3d-status-chip {
   // tab list's two paddings plus a tab's line height, the three values it is built from above.
   --center-tab-strip-height: calc(#{$pt-grid-size} * 3);
 
-  // The viewport clips what leaves it and never scrolls, so it keeps no scrollbar gutter; index.html
-  // asks every scroll container for a stable one, and that gutter would narrow the canvas.
+  // The viewport clips what leaves it and never scrolls. Its content stands 4 px past the panel, so
+  // a scroll container here would let a key press nudge the canvas out of place.
   > .window-panels-tabs > .bp5-tab-panel {
     overflow: hidden;
-    scrollbar-gutter: auto;
   }
 
   > .interactionControlsButtonContainer {
diff --git a/packages/uiconfig-blueprint/src/renderer.scss b/packages/uiconfig-blueprint/src/renderer.scss
index 73e2ae09..31e84db3 100644
--- a/packages/uiconfig-blueprint/src/renderer.scss
+++ b/packages/uiconfig-blueprint/src/renderer.scss
@@ -129,6 +129,9 @@
 .bp5-panel-stack2-view {
   background-color: $light-gray4 !important;
   transition: var(--background-color-transition);
+  // The panel's content scrolls here, so the rows keep their width whether the scrollbar is there
+  // or not. It is the only box in the stack that ever shows one.
+  scrollbar-gutter: stable;
 }
 
 .bp5-dark{
@@ -141,7 +144,7 @@
   height: 100%;
   flex-grow: 1;
   position: relative;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 0 0 0 0;
 
   .bp5-panel-stack2-header{