Fix folder labels and drag target highlighting

server/public/app.js

@@ -2270,7 +2270,6 @@ function updateItemPointerDrag(event) {
   event.preventDefault();
   document.body.classList.add('u-nav-dragging');
   markDraggingRows(drag.paths, true);
-  markDropCandidates(drag.paths, true);
   updatePointerDropTarget(event);
 }
 
@@ -2284,7 +2283,6 @@ async function finishItemPointerDrag(event, move, up) {
   if (!drag) return;
 
   markDraggingRows(drag.paths, false);
-  markDropCandidates(drag.paths, false);
   state.pointerDrag = null;
 
   if (!drag.active) {
@@ -2450,20 +2448,6 @@ function markDraggingRows(paths, dragging) {
   }
 }
 
-function markDropCandidates(sourcePaths, active) {
-  const source = state.pointerDrag;
-  for (const row of workspace.querySelectorAll('.file-row[data-type="directory"]')) {
-    const path = row.dataset.path || '';
-    const valid = !sourcePaths.includes(path) && isValidPointerTargetPath(path, source);
-    row.classList.toggle('drop-candidate', active && valid);
-  }
-  for (const row of workspace.querySelectorAll('.tree-label[data-tree-open]')) {
-    const path = row.dataset.treeOpen || '';
-    const valid = !sourcePaths.includes(path) && isValidPointerTargetPath(path, source);
-    row.classList.toggle('drop-candidate', active && valid);
-  }
-}
-
 function isValidPointerTargetPath(path, drag = state.pointerDrag) {
   if (!drag) return false;
   return (drag.items || []).every((item) => {

server/public/styles.css

@@ -412,10 +412,6 @@
   border-color: transparent;
 }
 
-.u-nav .tree-label.drop-candidate {
-  color: var(--accent);
-}
-
 .u-nav .tree-label.drop-target {
   background: var(--accent-soft);
   box-shadow: inset 0 0 0 1px var(--accent);
@@ -542,7 +538,6 @@
 .u-nav .file-row:hover,
 .u-nav .file-row.selected,
 .u-nav .file-row.dragging,
-.u-nav .file-row.drop-candidate,
 .u-nav .file-row.drop-target {
   background: var(--accent-soft);
 }
@@ -550,15 +545,10 @@
 .u-nav .file-row:hover td,
 .u-nav .file-row.selected td,
 .u-nav .file-row.dragging td,
-.u-nav .file-row.drop-candidate td,
 .u-nav .file-row.drop-target td {
   background: var(--accent-soft) !important;
 }
 
-.u-nav .file-row.drop-candidate td:first-child {
-  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent);
-}
-
 .u-nav .file-row {
   -webkit-user-drag: none;
   user-select: none;
@@ -638,22 +628,16 @@
 .u-nav .icon-item:hover,
 .u-nav .icon-item.selected,
 .u-nav .icon-item.dragging,
-.u-nav .icon-item.drop-candidate,
 .u-nav .icon-item.drop-target {
   background: var(--accent-soft);
   border-color: var(--line);
 }
 
 .u-nav .icon-item.selected,
-.u-nav .icon-item.drop-candidate,
 .u-nav .icon-item.drop-target {
   border-color: var(--accent);
 }
 
-.u-nav .icon-item.drop-candidate {
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
-}
-
 .u-nav .file-icon {
   display: block;
   height: 46px;
@@ -740,10 +724,15 @@
   color: var(--text);
   display: -webkit-box;
   font-size: 12.5px;
+  height: 2.5em;
+  letter-spacing: normal;
   line-height: 1.25;
   max-width: 100%;
   overflow: hidden;
   overflow-wrap: anywhere;
+  white-space: normal !important;
+  width: 100%;
+  word-break: break-word;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }