Merge pull request #112 from beatz174-bit/codex/refactor-header-section-of-pickitemrow

Align pick item header typography

src/components/PickItemRow.test.tsx

@@ -29,6 +29,34 @@ const baseProduct: Product = {
 };
 
 describe('PickItemRow', () => {
+  it('keeps quantity inline with matching typography to the product name', () => {
+    render(
+      <PickItemRow
+        item={baseItem}
+        product={baseProduct}
+        onIncrementQuantity={vi.fn()}
+        onDecrementQuantity={vi.fn()}
+        onToggleCarton={vi.fn()}
+        onStatusChange={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    );
+
+    const productName = screen.getByText(baseProduct.name);
+    const quantityLabel = screen.getByText('1 unit');
+    const titleRow = screen.getByTestId('pick-item-title-row');
+
+    const rowStyle = getComputedStyle(titleRow);
+    expect(rowStyle.display).toBe('flex');
+    expect(rowStyle.flexDirection).toBe('row');
+
+    const productStyle = getComputedStyle(productName);
+    const quantityStyle = getComputedStyle(quantityLabel);
+
+    expect(productStyle.fontSize).toBe(quantityStyle.fontSize);
+    expect(productStyle.fontWeight).toBe(quantityStyle.fontWeight);
+  });
+
   it('asks for confirmation before deleting a product from the pick list', async () => {
     const onDelete = vi.fn();
     const user = userEvent.setup();

src/components/PickItemRow.tsx

@@ -98,10 +98,31 @@ export const PickItemRow = ({
           onChange={(event) => toggleStatus(event.target.checked)}
           inputProps={{ 'aria-label': 'Toggle picked status' }}
         />
-        <Stack spacing={0.25} minWidth={0} flex={1}>
+        <Stack spacing={0.5} minWidth={0} flex={1}>
-          <Typography variant="subtitle1" noWrap sx={{ minWidth: 0 }}>
+          <Stack
+            direction="row"
+            spacing={1}
+            alignItems="center"
+            data-testid="pick-item-title-row"
+            sx={{ minWidth: 0 }}
+          >
+            <Typography
+              component="span"
+              variant="subtitle1"
+              noWrap
+              sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', fontWeight: 600 }}
+            >
               {product?.name ?? 'Unknown product'}
             </Typography>
+            <Typography
+              component="span"
+              variant="subtitle1"
+              noWrap
+              sx={{ fontWeight: 600, whiteSpace: 'nowrap' }}
+            >
+              {item.quantity} {packagingLabel}
+            </Typography>
+          </Stack>
           {isNarrowScreen && (
             <Typography variant="caption" color="text.secondary" noWrap>
               Tap to adjust quantity and packaging