From 7a86a8e64bf6d7e8a49139050d5bb4778575984f Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Sun, 29 Mar 2026 17:54:22 +0200
Subject: [PATCH] Reposition granular sync buttons to the left of the values in
 Dimensions view

---
 src/components/DimensionsView.tsx | 66 +++++++++++++++++--------------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/components/DimensionsView.tsx b/src/components/DimensionsView.tsx
index eaa7657..1f3446b 100644
--- a/src/components/DimensionsView.tsx
+++ b/src/components/DimensionsView.tsx
@@ -278,46 +278,52 @@ export function DimensionsView({ data, headers, onEdit, onSaveRow, onCaptureStat
                           {row[COLUMNS.INNER_L] || '-'} × {row[COLUMNS.INNER_W] || '-'} × {row[COLUMNS.INNER_H] || '-'}
                         </td>
                         <td className={cn(
-                          "px-4 py-3 font-mono relative",
+                          "px-4 py-3 font-mono",
                           group.discrepancies.outer ? "text-amber-300" : "text-slate-400"
                         )}>
-                          <span>{row[COLUMNS.OUTER_L] || '-'} × {row[COLUMNS.OUTER_W] || '-'} × {row[COLUMNS.OUTER_H] || '-'}</span>
-                          <button 
-                            onClick={() => handleSyncField(group, row, 'outer')}
-                            disabled={syncing?.key === group.key}
-                            title="Apply these Outer Dims to all in group"
-                            className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
-                          >
-                             {syncing?.key === group.key && syncing?.field === 'outer' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
-                          </button>
+                          <div className="flex items-center gap-2 group/cell">
+                            <button 
+                              onClick={() => handleSyncField(group, row, 'outer')}
+                              disabled={syncing?.key === group.key}
+                              title="Apply these Outer Dims to all in group"
+                              className="p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                            >
+                               {syncing?.key === group.key && syncing?.field === 'outer' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
+                            </button>
+                            <span>{row[COLUMNS.OUTER_L] || '-'} × {row[COLUMNS.OUTER_W] || '-'} × {row[COLUMNS.OUTER_H] || '-'}</span>
+                          </div>
                         </td>
                         <td className={cn(
-                          "px-4 py-3 relative",
+                          "px-4 py-3",
                           group.discrepancies.units ? "text-amber-300 font-bold" : "text-slate-400"
                         )}>
-                          <span>{row[COLUMNS.UNITS_OUTER] || '-'}</span>
-                          <button 
-                            onClick={() => handleSyncField(group, row, 'units')}
-                            disabled={syncing?.key === group.key}
-                            title="Apply this Units/Outer to all in group"
-                            className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
-                          >
-                             {syncing?.key === group.key && syncing?.field === 'units' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
-                          </button>
+                          <div className="flex items-center gap-2 group/cell">
+                            <button 
+                              onClick={() => handleSyncField(group, row, 'units')}
+                              disabled={syncing?.key === group.key}
+                              title="Apply this Units/Outer to all in group"
+                              className="p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                            >
+                               {syncing?.key === group.key && syncing?.field === 'units' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
+                            </button>
+                            <span>{row[COLUMNS.UNITS_OUTER] || '-'}</span>
+                          </div>
                         </td>
                         <td className={cn(
-                          "px-4 py-3 relative",
+                          "px-4 py-3",
                           group.discrepancies.moq ? "text-amber-300 font-bold" : "text-slate-400"
                         )}>
-                          <span>{row[COLUMNS.MOQ] || '-'}</span>
-                          <button 
-                            onClick={() => handleSyncField(group, row, 'moq')}
-                            disabled={syncing?.key === group.key}
-                            title="Apply this MOQ to all in group"
-                            className="absolute right-1 top-1/2 -translate-y-1/2 p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
-                          >
-                             {syncing?.key === group.key && syncing?.field === 'moq' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
-                          </button>
+                          <div className="flex items-center gap-2 group/cell">
+                            <button 
+                              onClick={() => handleSyncField(group, row, 'moq')}
+                              disabled={syncing?.key === group.key}
+                              title="Apply this MOQ to all in group"
+                              className="p-1 hover:bg-emerald-600/20 text-slate-600 hover:text-emerald-400 rounded opacity-0 group-hover:opacity-100 transition-opacity"
+                            >
+                               {syncing?.key === group.key && syncing?.field === 'moq' ? <Loader2 className="w-3 h-3 animate-spin" /> : <Layers className="w-3 h-3" />}
+                            </button>
+                            <span>{row[COLUMNS.MOQ] || '-'}</span>
+                          </div>
                         </td>
                         <td className="px-4 py-3 text-right">
                           <div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">