refactor(dashboard): measure scrollbar width directly from element

Replace ScrollbarHelper service with direct offsetWidth - clientWidth
measurement on the scrollable element, which is more accurate and
SSR-safe.

DEPRECATED: `ScrollbarHelper` service is deprecated and will be removed
in v51. Use `element.offsetWidth - element.clientWidth` on the
scrollable element instead.

Author: chintankavathia

projects/element-ng/common/services/scrollbar-helper.service.ts

@@ -7,7 +7,13 @@ import { inject, Injectable, DOCUMENT } from '@angular/core';
 /**
  * Gets the width of the scrollbar.  Nesc for windows
  * http://stackoverflow.com/a/13382873/888165
+ *
+ * @deprecated This service uses a legacy DOM-measurement hack to determine scrollbar width.
+ * Use `element.offsetWidth - element.clientWidth` on the scrollable element directly,
+ * which is more accurate, SSR-safe, and accounts for OS-level theming and CSS overrides.
+ * Will be removed in v51.
  */
+
 @Injectable({ providedIn: 'root' })
 export class ScrollbarHelper {
   private document = inject(DOCUMENT);

projects/element-ng/dashboard/si-dashboard.component.ts

@@ -21,7 +21,6 @@ import {
   viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { ScrollbarHelper } from '@siemens/element-ng/common';
 import {
   BOOTSTRAP_BREAKPOINTS,
   ElementDimensions,
@@ -99,7 +98,6 @@ export class SiDashboardComponent implements OnChanges, AfterViewInit {
   private scroller = inject(ViewportScroller);
   private dashboardService = inject(SiDashboardService);
   private resizeObserver = inject(ResizeObserverService);
-  private scrollbarHelper = inject(ScrollbarHelper);
   private cdRef = inject(ChangeDetectorRef);
   private document = inject(DOCUMENT);
   private readonly hideMenubarInternal = signal(false);
@@ -256,7 +254,8 @@ export class SiDashboardComponent implements OnChanges, AfterViewInit {
       dashboardFrameDimensions &&
       dashboardDimensions.height > dashboardFrameDimensions.height
     ) {
-      padding = padding - this.scrollbarHelper.width;
+      const { offsetWidth, clientWidth } = this.dashboardFrame().nativeElement;
+      padding = padding - (offsetWidth - clientWidth);
     }
     this.dashboardFrameEndPadding = padding;
     this.cdRef.markForCheck();