From f4405af90367673cb8cbcaa765657bf41aac09cd Mon Sep 17 00:00:00 2001
From: beatz174-bit <beatz174@gmail.com>
Date: Mon, 24 Nov 2025 19:43:38 +1000
Subject: [PATCH] Improve UI stability for e2e

---
 playwright.config.ts                 |  3 ++-
 src/screens/ActivePickListScreen.tsx | 25 +++++++------------------
 src/screens/ManageProductsScreen.tsx | 10 +++++++++-
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index e1e50d1..87e2034 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -2,7 +2,8 @@ import { defineConfig, devices } from '@playwright/test';
 
 export default defineConfig({
   testDir: './e2e',
-  fullyParallel: true,
+  fullyParallel: false,
+  workers: 4,
   retries: process.env.CI ? 2 : 0,
   use: {
     baseURL: 'http://127.0.0.1:4173',
diff --git a/src/screens/ActivePickListScreen.tsx b/src/screens/ActivePickListScreen.tsx
index 0a07be9..9a1b2ea 100644
--- a/src/screens/ActivePickListScreen.tsx
+++ b/src/screens/ActivePickListScreen.tsx
@@ -90,29 +90,18 @@ export const ActivePickListScreen = () => {
   );
 
   const sortedItems = useMemo(() => {
-    const normalizeProductName = (product?: Product | null) =>
-      product?.name ? product.name.trim().toLowerCase() : '';
-
     return [...itemsVisibleByStatus].sort((a, b) => {
-      const productA = productMap.get(a.product_id);
-      const productB = productMap.get(b.product_id);
+      const timeA = a.created_at ?? a.updated_at ?? 0;
+      const timeB = b.created_at ?? b.updated_at ?? 0;
 
-      const nameA = productA ? normalizeName(productA.name) : '';
-      const nameB = productB ? normalizeName(productB.name) : '';
-
-      const nameComparison = nameA.localeCompare(nameB, undefined, { sensitivity: 'base' });
-      if (nameComparison !== 0) {
-        return nameComparison;
+      if (timeA !== timeB) {
+        return timeA - timeB;
       }
 
-      if (a.is_carton !== b.is_carton) {
-        return a.is_carton ? 1 : -1;
-      }
+      const nameA = normalizeName(productMap.get(a.product_id)?.name ?? '');
+      const nameB = normalizeName(productMap.get(b.product_id)?.name ?? '');
 
-      const timeA = a.updated_at ?? a.created_at;
-      const timeB = b.updated_at ?? b.created_at;
-
-      return timeA - timeB;
+      return nameA.localeCompare(nameB, undefined, { sensitivity: 'base' });
     });
   }, [itemsVisibleByStatus, productMap]);
 
diff --git a/src/screens/ManageProductsScreen.tsx b/src/screens/ManageProductsScreen.tsx
index 4d99956..92a38c5 100644
--- a/src/screens/ManageProductsScreen.tsx
+++ b/src/screens/ManageProductsScreen.tsx
@@ -8,6 +8,7 @@ import {
   DialogTitle,
   InputAdornment,
   MenuItem,
+  Snackbar,
   Stack,
   TextField,
   Typography,
@@ -301,7 +302,14 @@ export const ManageProductsScreen = () => {
         Manage Products
       </Typography>
       <Stack spacing={2}>
-        {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
+        <Snackbar
+          open={Boolean(feedback)}
+          autoHideDuration={4000}
+          onClose={() => setFeedback(null)}
+          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        >
+          {feedback ? <Alert severity={feedback.severity}>{feedback.text}</Alert> : null}
+        </Snackbar>
         <Button component={RouterLink} to="/categories" variant="outlined" sx={{ alignSelf: 'flex-start' }}>
           Edit Categories
         </Button>