Issue with rails hotwire trix textarea resize

Question

im trying to create a textarea resize grippie more or less like the SO for a trix textarea with rais stimulus so i set this controller below

the issue is when i pull down the textarea the textarea blow all the page, and i have any idea why, someone that know hotwire better can point my mistake please?

<div class="trix-container" data-controller="textarea-resizer"><%= form.rich_text_area :body, required: true,  data: { target: 'textarea-resizer.textarea' } %> <div class="resizable-textarea" data-textarea-resizer-target="container">
    <span></span>
    <div class="grippie" data-textarea-resizer-target="grippie"></div>
  </div>
</div>



// app/javascript/controllers/textarea_resizer_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["textarea", "grippie"];

  connect() {
    this.textareaTarget.classList.add("processed");
    this.setupGrippie();
  }

  setupGrippie() {
    this.grippieTarget.addEventListener("mousedown", this.startDrag.bind(this));
  }

  startDrag(event) {
    event.preventDefault();
    this.lastMousePos = this.mousePosition(event).y;
    this.staticOffset = this.textareaTarget.offsetHeight - this.lastMousePos;
    this.textareaTarget.style.opacity = 0.25;

    document.addEventListener("mousemove", this.performDrag.bind(this));
    document.addEventListener("mouseup", this.endDrag.bind(this));
  }

  performDrag(event) {
    const currentMousePos = this.mousePosition(event).y;
    let newHeight = this.staticOffset + currentMousePos;

    if (this.lastMousePos >= currentMousePos) {
      newHeight -= 5;
    }
    this.lastMousePos = currentMousePos;
    newHeight = Math.max(32, newHeight);

    this.textareaTarget.style.height = `${newHeight}px`;

    if (newHeight < 32) {
      this.endDrag(event);
    }
  }

  endDrag() {
    document.removeEventListener("mousemove", this.performDrag.bind(this));
    document.removeEventListener("mouseup", this.endDrag.bind(this));

    this.textareaTarget.style.opacity = 1;
    this.lastMousePos = 0;
    this.staticOffset = null;
  }

  mousePosition(event) {
    return {
      x: event.clientX + document.documentElement.scrollLeft,
      y: event.clientY + document.documentElement.scrollTop,
    };
  }
}