style: make drag handle smaller with increased gap

- Reduce drag handle size from 1.5rem to 1.25rem (24px to 20px)
- Reduce SVG icon size to 0.875rem (14px)
- Increase gap between handle and content from 4px to 12px
- Update invisible hover zone to match new gap size
- Remove duplicate SVG styles

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

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'],

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);

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()
 				},