From 94892c94bc9c782a648a96e9f32f40ab4a661067 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Thu, 8 Jan 2026 08:35:32 +0530
Subject: [PATCH] get rid of the block inside component

---
 .../HorizontalScroller.stories.svelte         |  5 +-
 .../HorizontalScroller.svelte                 | 57 ++++++++-----------
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/components/HorizontalScroller/HorizontalScroller.stories.svelte b/src/components/HorizontalScroller/HorizontalScroller.stories.svelte
index a6744213..597ecd83 100644
--- a/src/components/HorizontalScroller/HorizontalScroller.stories.svelte
+++ b/src/components/HorizontalScroller/HorizontalScroller.stories.svelte
@@ -7,6 +7,7 @@
   import CustomChildrenBlock from './demo/CustomChildrenSnippet.svelte';
   import ScrollableGraphic from './demo/ScrollableGraphic.svelte';
   import WithScrollerBaseComponent from './demo/withScrollerBase.svelte';
+  import Block from '../Block/Block.svelte';
 
   const { Story } = defineMeta({
     title: 'Components/Graphics/HorizontalScroller',
@@ -56,7 +57,9 @@
   }}
 >
   {#snippet children(args)}
-    <DemoComponent {...args}></DemoComponent>
+    <Block width="fluid">
+      <DemoComponent {...args}></DemoComponent>
+    </Block>
   {/snippet}
 </Story>
 
diff --git a/src/components/HorizontalScroller/HorizontalScroller.svelte b/src/components/HorizontalScroller/HorizontalScroller.svelte
index 98bdd56a..939f3ea0 100644
--- a/src/components/HorizontalScroller/HorizontalScroller.svelte
+++ b/src/components/HorizontalScroller/HorizontalScroller.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  import Block from '../Block/Block.svelte';
-  import type { ContainerWidth } from '../@types/global';
   import { type Snippet } from 'svelte';
   import { Tween } from 'svelte/motion';
   import type { Action } from 'svelte/action';
@@ -12,8 +10,6 @@
     id?: string;
     /** Optional additional classes for the scroller container */
     class?: string;
-    /** Width of the scroller container*/
-    width?: ContainerWidth;
     /** Height of the scroller container in CSS `vh` units. Set it to `100lvh` when using inside ScrollerBase. */
     height?: string;
     /** Bindable progress value. Ideal range: `[0-1]`. Bind ScrollerBase's progress to this prop. */
@@ -55,7 +51,6 @@
   let {
     id = '',
     class: cls = '',
-    width = 'fluid',
     height = '200lvh',
     direction = 'right',
     scrollProgress = $bindable(0),
@@ -222,36 +217,34 @@
 
 <svelte:window bind:innerHeight={screenHeight} />
 
-<Block {width}>
+<div
+  {id}
+  class={`horizontal-scroller-container ${cls}`}
+  style="height: {height};"
+  bind:this={container}
+  bind:clientHeight={containerHeight}
+  bind:clientWidth={containerWidth}
+>
   <div
-    {id}
-    class={`horizontal-scroller-container ${cls}`}
-    style="height: {height};"
-    bind:this={container}
-    bind:clientHeight={containerHeight}
-    bind:clientWidth={containerWidth}
+    class="horizontal-scroller-content"
+    bind:this={content}
+    bind:clientWidth={contentWidth}
+    style="transform: translateX({translateX}px);"
+    use:scrollListener
   >
-    <div
-      class="horizontal-scroller-content"
-      bind:this={content}
-      bind:clientWidth={contentWidth}
-      style="transform: translateX({translateX}px);"
-      use:scrollListener
-    >
-      {#if children}
-        {@render children()}
-      {/if}
-      {#if showDebugInfo}
-        <div
-          class="debug-info"
-          style={`position: absolute; left: ${-translateX}px; top: 0px;`}
-        >
-          <Debug {componentState} />
-        </div>
-      {/if}
-    </div>
+    {#if children}
+      {@render children()}
+    {/if}
+    {#if showDebugInfo}
+      <div
+        class="debug-info"
+        style={`position: absolute; left: ${-translateX}px; top: 0px;`}
+      >
+        <Debug {componentState} />
+      </div>
+    {/if}
   </div>
-</Block>
+</div>
 
 <style lang="scss">
   .horizontal-scroller-container {