fix: correct bar dragging behavior and remove duplicate value display

Fixed two issues with draggable bars:

1. Bar length now updates correctly during drag:
   - Convert dragged unit value back to the selected unit
   - Update input value with converted amount
   - Keep selectedUnit unchanged (user still inputting in same unit)
   - Disable transitions on ALL bars while ANY bar is dragging
   - This makes bars resize smoothly and correctly as you drag

2. Removed duplicate value display from bars:
   - Value is already shown above each bar
   - Removed redundant value display from inside the colored segment
   - Keeps only the percentage indicator inside bars
   - Cleaner, less cluttered visual design

The dragging now works intuitively: dragging any bar adjusts the input
value (in the currently selected unit) to match the dragged bar's value.

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

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

components/converter/MainConverter.tsx

@@ -125,9 +125,11 @@ export default function MainConverter() {
 
   // Handle value change from draggable bars
   const handleValueChange = useCallback((value: number, unit: string) => {
-    setInputValue(value.toString());
+    // Convert the dragged unit's value back to the currently selected unit
-    setSelectedUnit(unit);
+    const convertedValue = convertUnit(value, unit, selectedUnit);
-  }, []);
+    setInputValue(convertedValue.toString());
+    // Keep selectedUnit the same - user is still inputting in that unit
+  }, [selectedUnit]);
 
   return (
     <div className="w-full max-w-6xl mx-auto space-y-6">

components/converter/VisualComparison.tsx

@@ -227,7 +227,7 @@ export default function VisualComparison({
               <div
                 className={cn(
                   "absolute inset-y-0 left-0",
-                  isDragging ? "transition-none" : "transition-all duration-500 ease-out"
+                  draggingUnit ? "transition-none" : "transition-all duration-500 ease-out"
                 )}
                 style={{
                   width: `${item.percentage}%`,
@@ -235,18 +235,10 @@ export default function VisualComparison({
                 }}
               />
               {/* Percentage label overlay */}
-              <div className="absolute inset-0 flex items-center justify-between px-3 text-xs font-bold pointer-events-none">
+              <div className="absolute inset-0 flex items-center px-3 text-xs font-bold pointer-events-none">
                 <span className="text-foreground drop-shadow-sm">
                   {Math.round(item.percentage)}%
                 </span>
-                <span
-                  className="tabular-nums drop-shadow-sm"
-                  style={{
-                    color: item.percentage > 30 ? 'white' : 'var(--foreground)',
-                  }}
-                >
-                  {item.percentage > 30 && formatNumber(item.value)}
-                </span>
               </div>
 
               {/* Drag hint on hover */}