Merge pull request #86 from beatz174-bit/codex/refactor-productrow-layout-g62j3n

Restore product action controls

src/components/ProductRow.tsx

@@ -144,7 +144,15 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
                 Scan Barcode
               </Button>
             )}
-            <Stack direction="row" spacing={0.5} justifyContent="flex-end">
+            <Stack direction="row" spacing={0.5} justifyContent="flex-end" alignItems="center">
+              <IconButton
+                aria-label={`Delete ${product.name}`}
+                onClick={() => onDelete(product.id)}
+                size="small"
+                color="error"
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
               <IconButton aria-label="Save product" onClick={handleSave} disabled={!formState.name} color="primary">
                 <CheckIcon />
               </IconButton>
@@ -154,19 +162,31 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
             </Stack>
           </Stack>
         ) : (
-          <Stack direction="row" justifyContent="space-between" alignItems="center">
-            <div>
-              <Typography variant="subtitle1">{product.name}</Typography>
-              <Typography variant="caption" color="text.secondary">
-                {product.category}
+          <Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
+            <Stack direction="row" spacing={1.5} alignItems="center" sx={{ flex: 1, minWidth: 0 }}>
+              <Stack spacing={0.25} sx={{ minWidth: 0 }}>
+                <Typography variant="subtitle1" noWrap>
+                  {product.name}
                 </Typography>
-            </div>
+                <Typography variant="caption" color="text.secondary" noWrap>
+                  {product.category} • {product.unit_type || DEFAULT_UNIT_TYPE}
+                </Typography>
+              </Stack>
               {product.barcode ? (
-              <Typography variant="caption" color="text.secondary">
+                <Typography variant="caption" color="text.secondary" noWrap>
                   Barcode: {product.barcode}
                 </Typography>
               ) : null}
             </Stack>
+            <Box display="flex" alignItems="center" gap={0.5} sx={{ ml: 1 }}>
+              <IconButton aria-label={`Edit ${product.name}`} onClick={() => setIsEditing(true)} size="small">
+                <EditIcon fontSize="small" />
+              </IconButton>
+              <IconButton aria-label={`Delete ${product.name}`} onClick={() => onDelete(product.id)} size="small">
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          </Stack>
         )}
       </CardContent>
       <Dialog open={isScannerOpen} onClose={() => setIsScannerOpen(false)} fullWidth>