diff --git a/src/lib/components/edra/drag-handle.svelte b/src/lib/components/edra/drag-handle.svelte index 8a40c57..6f552bc 100644 --- a/src/lib/components/edra/drag-handle.svelte +++ b/src/lib/components/edra/drag-handle.svelte @@ -406,7 +406,7 @@ // Register the plugin with onMouseMove callback const plugin = DragHandlePlugin({ pluginKey: pluginKey, - dragHandleWidth: 24, + dragHandleWidth: 20, scrollTreshold: 100, excludedTags: ['pre', 'code', 'table p'], customNodes: ['urlEmbed', 'image', 'video', 'audio', 'gallery', 'iframe', 'geolocation'], diff --git a/src/lib/components/edra/editor.css b/src/lib/components/edra/editor.css index 4033ef9..410cf8b 100644 --- a/src/lib/components/edra/editor.css +++ b/src/lib/components/edra/editor.css @@ -272,8 +272,8 @@ input[type='checkbox'] { .drag-handle { position: fixed; z-index: 50; - width: 1.5rem; - height: 1.5rem; + width: 1.25rem; + height: 1.25rem; display: flex; flex-direction: row; align-items: center; @@ -284,8 +284,13 @@ input[type='checkbox'] { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); color: var(--border-color-hover); cursor: grab; - padding: 0.25rem; - border-radius: 6px; /* $corner-radius-sm */ + padding: 0.125rem; + border-radius: 4px; /* $corner-radius-sm */ +} + +.drag-handle svg { + width: 0.875rem; + height: 0.875rem; } /* Invisible hover zone to bridge the gap */ @@ -295,7 +300,7 @@ input[type='checkbox'] { left: 100%; top: 50%; transform: translateY(-50%); - width: 12px; /* Slightly larger than the 8px gap */ + width: 16px; /* Slightly larger than the 12px gap */ height: 100%; pointer-events: auto; } @@ -326,11 +331,6 @@ input[type='checkbox'] { } } -.drag-handle svg { - height: 1rem; - width: 1rem; -} - /* Math Equations (KaTeX) */ .katex:hover { background-color: var(--code-bg); diff --git a/src/lib/components/edra/extensions/drag-handle/index.ts b/src/lib/components/edra/extensions/drag-handle/index.ts index 89cf33f..cd20dbb 100644 --- a/src/lib/components/edra/extensions/drag-handle/index.ts +++ b/src/lib/components/edra/extensions/drag-handle/index.ts @@ -338,9 +338,9 @@ export function DragHandlePlugin(options: GlobalDragHandleOptions & { pluginKey: // Get the computed padding of the element to position handle correctly const paddingLeft = parseInt(compStyle.paddingLeft, 10) || 0 - // Add 4px gap between drag handle and content + // Add 12px gap between drag handle and content // Position the handle inside the padding area, close to the text - dragHandleElement.style.left = `${rect.left + paddingLeft - rect.width - 4}px` + dragHandleElement.style.left = `${rect.left + paddingLeft - rect.width - 12}px` dragHandleElement.style.top = `${rect.top - 4}px` // Offset for padding showDragHandle() },