Keep the overflowing toolbar from scrolling itself while the window is resized

Co-Authored-By: Claude <noreply@anthropic.com>

Author: VTT-AI-Agent

client/css/layout.css

@@ -490,6 +490,9 @@ body.aspectTooGood.hiddenToolbar {
       scrollbar-width: none;
       padding-top: 0;
       padding-bottom: 0;
+      /* every compaction level changes the size of the contents, so scroll anchoring would keep
+         adjusting scrollTop while the window is resized until the toolbar sits at its end */
+      overflow-anchor: none;
       /* scrolling comes to rest on a button instead of cutting one in half behind an arrow */
       scroll-snap-type: y proximity;
       scroll-padding: var(--toolbarArrowSize) 0;

client/js/main.js

@@ -313,8 +313,6 @@ function updateToolbarScrolling() {
   positionToolbarTooltip();
 }
 
-const toolbarArrowSize = 24; // --toolbarArrowSize in layout.css
-
 // clicking one of the arrows scrolls by roughly one screen and returns true - the arrows are
 // pseudo elements, so whether a click on one is reported on the toolbar or on a button that
 // scrolled underneath it depends on the scroll position, which is why the caller catches the
@@ -328,8 +326,9 @@ function scrollToolbarByArrow(e) {
   const toolbar = $('#toolbar');
   const rect = toolbar.getBoundingClientRect();
   const horizontal = body.contains('horizontalToolbar');
-  const back = body.contains('toolbarScrollBack') && (horizontal ? e.clientX < rect.left + toolbarArrowSize : e.clientY < rect.top + toolbarArrowSize);
-  const forward = body.contains('toolbarScrollForward') && (horizontal ? e.clientX > rect.right - toolbarArrowSize : e.clientY > rect.bottom - toolbarArrowSize);
+  const arrow = parseFloat(getComputedStyle(toolbar).getPropertyValue('--toolbarArrowSize')) || 0;
+  const back = body.contains('toolbarScrollBack') && (horizontal ? e.clientX < rect.left + arrow : e.clientY < rect.top + arrow);
+  const forward = body.contains('toolbarScrollForward') && (horizontal ? e.clientX > rect.right - arrow : e.clientY > rect.bottom - arrow);
   if(back || forward)
     scrollToolbarBy((horizontal ? toolbar.clientWidth : toolbar.clientHeight) * (back ? -0.8 : 0.8), 'smooth');
   return back || forward;
@@ -338,7 +337,8 @@ function scrollToolbarByArrow(e) {
 function scrollToolbarByWheel(e) {
   if(!$('body').classList.contains('horizontalToolbar') || !$('body').classList.contains('toolbarOverflow') || e.deltaX)
     return;
-  scrollToolbarBy(e.deltaY * (e.deltaMode ? 16 : 1)); // some mice report lines instead of pixels
+  // deltaMode says whether the wheel reports pixels, lines or pages
+  scrollToolbarBy(e.deltaY * ([ 1, 16, $('#toolbar').clientWidth ][e.deltaMode] || 1));
   e.preventDefault();
 }
 

tests/testcafe/toolbar.js

@@ -95,6 +95,23 @@ test('The toolbar layout does not depend on the direction the window was resized
   await t.resizeWindow(1280, 800);
 });
 
+// the compaction levels change the size of the toolbar contents, which makes the browser's scroll
+// anchoring adjust the scroll position on every resize step - without turning that off, shrinking
+// the window walks the overflowing toolbar to its end and pushes the first buttons out of sight
+test('Resizing the window does not scroll the overflowing toolbar by itself', async t => {
+  await setRoomState();
+  await ClientFunction(prepareClient)();
+
+  for(const [ width, height ] of [ [ 420, 260 ], [ 420, 250 ], [ 420, 240 ], [ 420, 230 ], [ 420, 220 ] ]) {
+    const size = `${width}x${height}`;
+    await t.resizeWindow(width, height).wait(300);
+    await t.expect((await toolbarLayout()).overflow).ok(`${size}: the toolbar is expected to overflow`);
+    await t.expect((await toolbarState()).position).lte(2, `${size}: resizing the window scrolled the toolbar`);
+  }
+
+  await t.resizeWindow(1280, 800);
+});
+
 test('Clicking a toolbar scroll arrow scrolls instead of pressing the button underneath it', async t => {
   await setRoomState();
   await ClientFunction(prepareClient)();