From caa9bc7f87e5a884e290d61eab8294b742505c12 Mon Sep 17 00:00:00 2001
From: Maximilien B <maximilien.brunelle@gmail.com>
Date: Fri, 13 Feb 2026 15:34:36 +0100
Subject: [PATCH 1/2] POC - OSS::ScrollablePanel to feature scroll buttons for
 horizontal scrolling

---
 addon/components/o-s-s/scrollable-panel.hbs |  7 +++++
 addon/components/o-s-s/scrollable-panel.ts  | 26 ++++++++++++++++-
 app/styles/organisms/scrollable-panel.less  | 32 +++++++++++++++++++++
 tests/dummy/app/controllers/data.ts         |  7 ++++-
 tests/dummy/app/templates/data.hbs          | 13 +++++----
 5 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/addon/components/o-s-s/scrollable-panel.hbs b/addon/components/o-s-s/scrollable-panel.hbs
index 00f737f8b..134f37839 100644
--- a/addon/components/o-s-s/scrollable-panel.hbs
+++ b/addon/components/o-s-s/scrollable-panel.hbs
@@ -15,9 +15,15 @@
     {{on-bottom-reached this.onBottomReached}}
     {{did-insert this.initScrollListener}}
   >
+    {{#if (and @displayScrollArrows this.shadowLeftVisible)}}
+      <OSS::Icon @icon="fa-chevron-left" class="scroll-arrow-left" {{on "click" this.scrollToStart}} />
+    {{/if}}
     <div {{did-insert this.initResizeObserver}}>
       {{yield}}
     </div>
+    {{#if (and @displayScrollArrows this.shadowRightVisible)}}
+      <OSS::Icon @icon="fa-chevron-right" class="scroll-arrow-right" {{on "click" this.scrollToEnd}} />
+    {{/if}}
   </div>
   {{#if (and this.shadowBottomVisible (not @disableShadows))}}
     <div class="oss-scrollable-panel--shadow oss-scrollable-panel--shadow__bottom"></div>
@@ -25,4 +31,5 @@
   {{#if (and this.shadowRightVisible (not @disableShadows))}}
     <div class="oss-scrollable-panel--shadow oss-scrollable-panel--shadow__right"></div>
   {{/if}}
+
 </div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/scrollable-panel.ts b/addon/components/o-s-s/scrollable-panel.ts
index 7dd2187e3..480c801d7 100644
--- a/addon/components/o-s-s/scrollable-panel.ts
+++ b/addon/components/o-s-s/scrollable-panel.ts
@@ -8,6 +8,7 @@ interface OSSScrollablePanelComponentSignature {
   horizontal?: boolean;
   hideScrollbar?: boolean;
   offset?: number;
+  displayScrollArrows?: boolean;
   onBottomReached?: () => void;
 }
 
@@ -19,6 +20,12 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   @tracked shadowRightVisible: boolean = false;
 
   resizeObserver = new ResizeObserver(this.resizeObserverCallback.bind(this));
+  mutationObserver = new MutationObserver(this.resizeObserverCallback.bind(this));
+
+  private mutationObserverCallback(mutations: MutationRecord[]): void {
+    console.log('mutation observed');
+    mutations;
+  }
 
   get offset(): number {
     return this.args.offset ?? 0;
@@ -39,6 +46,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   @action
   initResizeObserver(element: HTMLElement): void {
     this.resizeObserver.observe(element);
+    this.mutationObserver.observe(element, { childList: true, subtree: true });
   }
 
   @action
@@ -58,6 +66,22 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
     this.args.onBottomReached?.();
   }
 
+  @action
+  scrollToStart(): void {
+    this.parentElement.scrollTo({
+      left: 0,
+      behavior: 'smooth'
+    });
+  }
+
+  @action
+  scrollToEnd(): void {
+    this.parentElement.scrollTo({
+      left: this.parentElement.scrollWidth,
+      behavior: 'smooth'
+    });
+  }
+
   private scrollListener(): void {
     if (this.parentElement.scrollTop - this.offset > 0) {
       this.shadowTopVisible = true;
@@ -98,7 +122,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
     }
   }
 
-  private resizeObserverCallback(_: ResizeObserverEntry[]): void {
+  private resizeObserverCallback(_: (ResizeObserverEntry | MutationRecord)[]): void {
     if (this.args.horizontal) {
       this.horizontalScrollListener();
     } else {
diff --git a/app/styles/organisms/scrollable-panel.less b/app/styles/organisms/scrollable-panel.less
index db9a59938..3888f5059 100644
--- a/app/styles/organisms/scrollable-panel.less
+++ b/app/styles/organisms/scrollable-panel.less
@@ -72,4 +72,36 @@
       }
     }
   }
+
+  .scroll-arrow-right {
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    background-color: red;
+    color: blue;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    border-radius: 50%;
+    align-items: center;
+    align-content: center;
+    cursor: pointer;
+  }
+
+  .scroll-arrow-left {
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    background-color: red;
+    color: blue;
+    left: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    border-radius: 50%;
+    align-items: center;
+    align-content: center;
+    cursor: pointer;
+  }
 }
diff --git a/tests/dummy/app/controllers/data.ts b/tests/dummy/app/controllers/data.ts
index 7987eb181..319e9d287 100644
--- a/tests/dummy/app/controllers/data.ts
+++ b/tests/dummy/app/controllers/data.ts
@@ -18,7 +18,7 @@ export default class Data extends Controller {
   @tracked revealed: boolean = false;
   @tracked starRatingValue: number = 3;
 
-  loop: null[] = Array(15);
+  @tracked loop: null[] = Array(15);
 
   subdomainRegex: RegExp = /^[a-zA-Z0-9]+[a-zA-Z0-9-._]*[a-zA-Z0-9]+$/;
 
@@ -99,4 +99,9 @@ export default class Data extends Controller {
       }, 1000);
     });
   }
+
+  @action
+  addToLoop(): void {
+    this.loop = [...this.loop, null];
+  }
 }
diff --git a/tests/dummy/app/templates/data.hbs b/tests/dummy/app/templates/data.hbs
index 32a664a3c..2952120c2 100644
--- a/tests/dummy/app/templates/data.hbs
+++ b/tests/dummy/app/templates/data.hbs
@@ -65,7 +65,7 @@
       Scrollable panel
     </div>
     <div class="fx-row fx-gap-px-24 fx-xalign-start">
-      <div class="fx-row fx-gap-px-24 fx-xalign-start" style="height: 300px; width: 500px;">
+      {{!-- <div class="fx-row fx-gap-px-24 fx-xalign-start" style="height: 300px; width: 500px;">
         <OSS::ScrollablePanel>
           <div class="fx-col fx-gap-px-6">
             {{#each this.loop}}
@@ -82,17 +82,20 @@
             {{/each}}
           </div>
         </OSS::ScrollablePanel>
-      </div>
+      </div> --}}
       <div class="fx-row fx-gap-px-24 fx-xalign-start" style="width: 500px;">
-        <OSS::ScrollablePanel @plain={{true}} @horizontal={{true}} @hideScrollbar={{true}}>
+        <OSS::ScrollablePanel @plain={{true}} @horizontal={{true}} @hideScrollbar={{true}} @disableScrollShadows={{true}} @displayScrollArrows={{true}}>
           <div class="fx-row fx-gap-px-6" style="width: fit-content;">
-            {{#each this.loop}}
-              <OSS::Tag @label="toto" />
+            {{#each this.loop as |item index|}}
+              {{!-- <OSS::Tag @label={{concat "nb:" index}} /> --}}
+              <OSS::Button @label={{concat "nb:" index}} />
             {{/each}}
           </div>
         </OSS::ScrollablePanel>
       </div>
     </div>
+    <OSS::Button {{on "click" this.addToLoop}} @label="Add item to loop" />
+    loop count: {{this.loop.length}}
   </div>
 
   <div

From a45ee2189e764213cf2ac87fdd419e9ca5a6e7d0 Mon Sep 17 00:00:00 2001
From: Maximilien B <maximilien.brunelle@gmail.com>
Date: Mon, 16 Feb 2026 10:15:08 +0100
Subject: [PATCH 2/2] Updated: scroll buttons & adaptive scroll length

---
 addon/components/o-s-s/scrollable-panel.hbs |  4 ++--
 addon/components/o-s-s/scrollable-panel.ts  |  9 ++-------
 app/styles/organisms/scrollable-panel.less  | 13 ++-----------
 3 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/addon/components/o-s-s/scrollable-panel.hbs b/addon/components/o-s-s/scrollable-panel.hbs
index 134f37839..e435e1591 100644
--- a/addon/components/o-s-s/scrollable-panel.hbs
+++ b/addon/components/o-s-s/scrollable-panel.hbs
@@ -16,13 +16,13 @@
     {{did-insert this.initScrollListener}}
   >
     {{#if (and @displayScrollArrows this.shadowLeftVisible)}}
-      <OSS::Icon @icon="fa-chevron-left" class="scroll-arrow-left" {{on "click" this.scrollToStart}} />
+      <OSS::Button @square={{true}} @icon="fa-chevron-left" class="scroll-arrow-left" {{on "click" this.scrollToStart}} />
     {{/if}}
     <div {{did-insert this.initResizeObserver}}>
       {{yield}}
     </div>
     {{#if (and @displayScrollArrows this.shadowRightVisible)}}
-      <OSS::Icon @icon="fa-chevron-right" class="scroll-arrow-right" {{on "click" this.scrollToEnd}} />
+      <OSS::Button @square={{true}} @icon="fa-chevron-right" class="scroll-arrow-right" {{on "click" this.scrollToEnd}} />
     {{/if}}
   </div>
   {{#if (and this.shadowBottomVisible (not @disableShadows))}}
diff --git a/addon/components/o-s-s/scrollable-panel.ts b/addon/components/o-s-s/scrollable-panel.ts
index 480c801d7..1d1655ff3 100644
--- a/addon/components/o-s-s/scrollable-panel.ts
+++ b/addon/components/o-s-s/scrollable-panel.ts
@@ -22,11 +22,6 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   resizeObserver = new ResizeObserver(this.resizeObserverCallback.bind(this));
   mutationObserver = new MutationObserver(this.resizeObserverCallback.bind(this));
 
-  private mutationObserverCallback(mutations: MutationRecord[]): void {
-    console.log('mutation observed');
-    mutations;
-  }
-
   get offset(): number {
     return this.args.offset ?? 0;
   }
@@ -69,7 +64,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   @action
   scrollToStart(): void {
     this.parentElement.scrollTo({
-      left: 0,
+      left: this.parentElement.scrollLeft - this.parentElement.clientWidth,
       behavior: 'smooth'
     });
   }
@@ -77,7 +72,7 @@ export default class OSSScrollablePanelComponent extends Component<OSSScrollable
   @action
   scrollToEnd(): void {
     this.parentElement.scrollTo({
-      left: this.parentElement.scrollWidth,
+      left: this.parentElement.scrollLeft + this.parentElement.clientWidth,
       behavior: 'smooth'
     });
   }
diff --git a/app/styles/organisms/scrollable-panel.less b/app/styles/organisms/scrollable-panel.less
index 3888f5059..1fc49bb3b 100644
--- a/app/styles/organisms/scrollable-panel.less
+++ b/app/styles/organisms/scrollable-panel.less
@@ -75,15 +75,10 @@
 
   .scroll-arrow-right {
     position: absolute;
-    height: 20px;
-    width: 20px;
-    background-color: red;
-    color: blue;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
-    z-index: 2;
-    border-radius: 50%;
+    z-index: 20;
     align-items: center;
     align-content: center;
     cursor: pointer;
@@ -91,15 +86,11 @@
 
   .scroll-arrow-left {
     position: absolute;
-    height: 20px;
-    width: 20px;
-    background-color: red;
-    color: blue;
     left: 8px;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
-    border-radius: 50%;
+    // border-radius: 50%;
     align-items: center;
     align-content: center;
     cursor: pointer;