Merge pull request #2486 from patternfly/fix/tabs/scroll-on-small-screen

fix(core): overflow controller scroll on small screens

Author: zeroedin

.changeset/two-pugs-add.md

@@ -0,0 +1,7 @@
+---
+"@patternfly/pfe-core": patch
+---
+
+`overflow-controller`: 
+ - improves display calculations for overflow scroll buttons
+ - adds smooth scroll behavior

core/pfe-core/controllers/overflow-controller.ts

@@ -42,7 +42,12 @@ export class OverflowController implements ReactiveController {
     }
     this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);
     this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);
-    this.showScrollButtons = !this.#hideOverflowButtons && (this.overflowLeft || this.overflowRight);
+    let scrollButtonsWidth = 0;
+    if (this.overflowLeft || this.overflowRight) {
+      scrollButtonsWidth = (this.#container.parentElement?.querySelector('button')?.getBoundingClientRect().width || 0) * 2;
+    }
+    this.showScrollButtons = !this.#hideOverflowButtons &&
+    this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);
     this.host.requestUpdate();
   }
 
@@ -61,35 +66,17 @@ export class OverflowController implements ReactiveController {
     if (!this.#container) {
       return;
     }
-    let firstElementInView: HTMLElement | undefined;
-    let lastElementOutOfView: HTMLElement | undefined;
-    for (let i = 0; i < this.#items.length && !firstElementInView; i++) {
-      if (isElementInView(this.#container, this.#items[i] as HTMLElement, false)) {
-        firstElementInView = this.#items[i];
-        lastElementOutOfView = this.#items[i - 1];
-      }
-    }
-    if (lastElementOutOfView) {
-      this.#container.scrollLeft -= lastElementOutOfView.scrollWidth;
-    }
+    const leftScroll = this.#container.scrollLeft - this.#container.clientWidth;
+    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });
     this.#setOverflowState();
   }
 
   scrollRight() {
     if (!this.#container) {
       return;
     }
-    let lastElementInView: HTMLElement | undefined;
-    let firstElementOutOfView: HTMLElement | undefined;
-    for (let i = this.#items.length - 1; i >= 0 && !lastElementInView; i--) {
-      if (isElementInView(this.#container, this.#items[i] as HTMLElement, false)) {
-        lastElementInView = this.#items[i];
-        firstElementOutOfView = this.#items[i + 1];
-      }
-    }
-    if (firstElementOutOfView) {
-      this.#container.scrollLeft += firstElementOutOfView.scrollWidth;
-    }
+    const leftScroll = this.#container.scrollLeft + this.#container.clientWidth;
+    this.#container.scroll({ left: leftScroll, behavior: 'smooth' });
     this.#setOverflowState();
   }