Simplify dragged element

tp-tree-nav.js

@@ -135,6 +135,8 @@ export class TpTreeNav extends Position(LitElement) {
           opacity: 0.5;
           position: absolute;
           z-index: 1000;
+          top: -1000px;
+          left: -1000px;
         }
       `
     ];
@@ -528,21 +530,16 @@ export class TpTreeNav extends Position(LitElement) {
 
     const row = e.currentTarget;
     const rect = row.getBoundingClientRect();
-    const clone = row.cloneNode(true);
+    const clone = document.createElement('div');
     clone.classList.add('drag-clone');
-    clone.setAttribute('part', 'drag-clone');
-    
-    clone.style.width = `${rect.width}px`;
-    clone.style.height = `${rect.height}px`;
-    clone.style.top = '-1000px';
-    clone.style.left = '-1000px';
     
+    clone.textContent = row.textContent;
     this.shadowRoot.appendChild(clone);
     
     const offsetX = e.clientX - rect.left;
     const offsetY = e.clientY - rect.top;
     
-    e.dataTransfer.setDragImage(clone, offsetX, offsetY);
+    e.dataTransfer.setDragImage(clone, 0, 0);
     
     setTimeout(() => {
       clone.remove();
@@ -716,9 +713,13 @@ export class TpTreeNav extends Position(LitElement) {
 
         if (nextDepth < currentDepth) {
             // We are at a step down. Calculate target depth from mouse X.
-            const indent = 16; // Hardcoded for now, matching CSS default
-            const padding = 8; // Matching CSS padding
-            const rowRect = e.currentTarget.getBoundingClientRect();
+            const row = e.currentTarget;
+            const style = getComputedStyle(row);
+            const indentVal = style.getPropertyValue('--tp-tree-indent').trim();
+            const indent = indentVal ? parseInt(indentVal, 10) : 16;
+            const padding = parseFloat(style.paddingLeft) || 8;
+
+            const rowRect = row.getBoundingClientRect();
             const mouseX = e.clientX - rowRect.left;
             
             // Calculate desired depth based on mouse position