Trying to implement a horizontal drag for my card list but it is not working

Question

I have a simple grid layout, where to bottom half will contain a list of horziontal cards. i want to be able to grab the cards and drag the list left or right. but i jsut cant get it to work even though it seems to me like it should.

Why cant i still drag the cards list?

the grid:

PANEL.SCSS:

.dashboard-container {
  display: grid;
  height: 100vh; // Full viewport height
  grid-template-rows: 70% 30%; // 65% for the chart, 35% for the cards
  width: 100%; // Full width


  .chart-container { // Chart takes up the first row
    display: flex;
    justify-content: center;
    padding: 2.5%;
    width: 100%;
    background-color: green;
  }

  .cards-container {
    display: flex;
    flex: 1;
    overflow-x: auto;
    background: yellow;
    }
  }  

PANEL.HTML:

<div class="dashboard-container">


  <div class="chart-container">
   //the greenpart
  </div>


  <div class="cards-container">

    <app-horizontal-card-list></app-horizontal-card-list>

  </div>


</div>

As you can see there is a scroll bar which i can use to drag the items left and right. so overflow is working.

and my HORIZONTAL_CARD-LIST.HTML looks like:

<div #listContainer class="horizontal-list-container grab-cursor"
     (mousedown)="startDragging($event)"
     (mousemove)="onDragging($event)"
     (mouseup)="stopDragging()"
     (mouseleave)="stopDragging()">

  <app-card></app-card>
  <app-card></app-card>
 <app-card></app-card>
 etc..
</div>

HORIZONTAL_CARD-LIST.TS

export class HorizontalCardListComponent {
  @ViewChild('listContainer') listContainerRef!: ElementRef<HTMLElement>;

  private isDragging = false;
  private startPosition: number;
  private scrollLeftStart: number;

  constructor(private renderer: Renderer2) {}

  startDragging(event: MouseEvent): void {
    event.preventDefault(); // Prevent default behavior
    console.log('start dragging()')
    const listContainer = this.listContainerRef.nativeElement;
    this.isDragging = true;
    this.renderer.addClass(listContainer, 'grabbing-cursor');
    this.startPosition = event.pageX - listContainer.getBoundingClientRect().left;
    this.scrollLeftStart = listContainer.scrollLeft;
  }

  onDragging(event: MouseEvent): void {
    if (!this.isDragging || !this.listContainerRef) return;
    console.log('dragging()')
    event.preventDefault(); // Optionally, prevent default behavior here too

    const listContainer = this.listContainerRef.nativeElement;
    const currentPos = event.pageX - listContainer.getBoundingClientRect().left;
    const moveDistance = this.startPosition - currentPos;
    listContainer.scrollLeft = this.scrollLeftStart + moveDistance;
  }

  stopDragging(): void {
    if (!this.listContainerRef) return;
    console.log('stopDragging()')
    const listContainer = this.listContainerRef.nativeElement;
    this.isDragging = false;
    this.renderer.removeClass(listContainer, 'grabbing-cursor');
  }


}