From be5ff7cdcb2599224f87e28211b278ba56a16be3 Mon Sep 17 00:00:00 2001
From: Daniel Cohen Gindi <danielgindi@gmail.com>
Date: Wed, 15 Apr 2026 09:10:28 +0300
Subject: [PATCH] move resizable handles' styling to css, higher z-index for
 corners

---
 src/dd-resizable-handle.ts |  2 --
 src/gridstack.scss         | 40 +++++++++++++++++++++-----------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/dd-resizable-handle.ts b/src/dd-resizable-handle.ts
index 68c00cd32..b430bc373 100644
--- a/src/dd-resizable-handle.ts
+++ b/src/dd-resizable-handle.ts
@@ -53,8 +53,6 @@ export class DDResizableHandle {
 
     this.el.classList.add('ui-resizable-handle');
     this.el.classList.add(`${DDResizableHandle.prefix}${this.dir}`);
-    this.el.style.zIndex = '100';
-    this.el.style.userSelect = 'none';
 
     this.el.addEventListener('mousedown', this._mouseDown);
     if (isTouch) {
diff --git a/src/gridstack.scss b/src/gridstack.scss
index 92805a27e..3bcb8e05e 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -8,14 +8,14 @@
  .grid-stack {
    position: relative;
  }
- 
+
  .grid-stack-rtl {
    direction: ltr;
    > .grid-stack-item {
      direction: rtl;
    }
  }
- 
+
  .grid-stack-placeholder > .placeholder-content {
    background-color: rgba(0,0,0,0.1);
    margin: 0;
@@ -23,7 +23,7 @@
    width: auto;
    z-index: 0 !important;
  }
- 
+
  // make those more unique as to not conflict with side panel items
  .grid-stack > .grid-stack-item {
    position: absolute;
@@ -31,7 +31,7 @@
    top: 0; // some default to reduce at least first row inline styles
    width: var(--gs-column-width); // reduce 1x1 items inline styles
    height: var(--gs-cell-height);
- 
+
    > .grid-stack-item-content {
      margin: 0;
      position: absolute;
@@ -60,7 +60,7 @@
      left: var(--gs-item-margin-left);
    }
  }
- 
+
  .grid-stack-item {
    > .ui-resizable-handle {
      position: absolute;
@@ -68,11 +68,13 @@
      display: block;
      -ms-touch-action: none;
      touch-action: none;
+     user-select: none;
+     z-index: 100;
    }
- 
+
    &.ui-resizable-disabled > .ui-resizable-handle,
    &.ui-resizable-autohide > .ui-resizable-handle { display: none; }
- 
+
    > .ui-resizable-ne,
    > .ui-resizable-nw,
    > .ui-resizable-se,
@@ -80,22 +82,24 @@
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');
      background-repeat: no-repeat;
      background-position: center;
+     // higher than the side handles
+     z-index: 101;
    }
- 
+
    > .ui-resizable-ne {
      transform: rotate(45deg);
    }
    > .ui-resizable-sw {
      transform: rotate(45deg);
    }
- 
+
    > .ui-resizable-nw {
      transform: rotate(-45deg);
    }
    > .ui-resizable-se {
      transform: rotate(-45deg);
    }
- 
+
    > .ui-resizable-nw { cursor: nw-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); left: var(--gs-item-margin-left); }
    > .ui-resizable-n  { cursor: n-resize;  height: 10px; top: var(--gs-item-margin-top); left: 25px; right: 25px; }
    > .ui-resizable-ne { cursor: ne-resize; width: 20px; height: 20px; top: var(--gs-item-margin-top); right: var(--gs-item-margin-right); }
@@ -104,44 +108,44 @@
    > .ui-resizable-s  { cursor: s-resize;  height: 10px; left: 25px; bottom: var(--gs-item-margin-bottom); right: 25px; }
    > .ui-resizable-sw { cursor: sw-resize; width: 20px; height: 20px; bottom: var(--gs-item-margin-bottom); left: var(--gs-item-margin-left); }
    > .ui-resizable-w  { cursor: w-resize;  width: 10px; top: 15px; bottom: 15px; left: var(--gs-item-margin-left); }
- 
+
    &.ui-draggable-dragging {
      &> .ui-resizable-handle {
        display: none !important;
      }
    }
- 
+
    &.ui-draggable-dragging {
      will-change: left, right, top;
    }
- 
+
    &.ui-resizable-resizing {
      will-change: width, height;
    }
  }
- 
+
  // not .grid-stack-item specific to also affect dragIn regions
  .ui-draggable-dragging,
  .ui-resizable-resizing {
    z-index: 10000; // bootstrap modal has a z-index of 1050
- 
+
    > .grid-stack-item-content {
      box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
      opacity: 0.8;
    }
  }
- 
+
  .grid-stack-animate,
  .grid-stack-animate .grid-stack-item {
    transition: left $animation_speed, right $animation_speed, top $animation_speed, height $animation_speed, width $animation_speed;
  }
- 
+
  .grid-stack-animate .grid-stack-item.ui-draggable-dragging,
  .grid-stack-animate .grid-stack-item.ui-resizable-resizing,
  .grid-stack-animate .grid-stack-item.grid-stack-placeholder{
    transition: left 0s, right 0s, top 0s, height 0s, width 0s;
  }
- 
+
  // make those more unique as to not conflict with side panel items, but apply to all column layouts (so not in loop below)
  .grid-stack > .grid-stack-item[gs-y="0"] {
    top: 0px;