From 8a1ed82c138b38d7a21aee3d9f7b7cd34a1c7b1e Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Thu, 28 Mar 2024 16:01:10 +0000
Subject: [PATCH 01/28] implemented logic to show total row count on tables
 #441

---
 .../items/catalogueItemsTable.component.tsx   | 21 +++++++++++++++++++
 src/items/itemsTable.component.tsx            | 21 +++++++++++++++++++
 src/manufacturer/manufacturer.component.tsx   | 20 ++++++++++++++++++
 src/systems/systemItemsTable.component.tsx    | 21 +++++++++++++++++++
 4 files changed, 83 insertions(+)

diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
index 4b8efbf84..e9789b3d5 100644
--- a/src/catalogue/items/catalogueItemsTable.component.tsx
+++ b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -772,6 +772,27 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
         </>
       );
     },
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography>
+        {`Showing rows ${
+          Math.min(
+            table.getState().pagination.pageIndex *
+              table.getState().pagination.pageSize +
+              table.getState().pagination.pageSize,
+            table.getRowCount()
+          ) === 0
+            ? 0
+            : (
+                table.getState().pagination.pageIndex *
+                  table.getState().pagination.pageSize +
+                1
+              ).toLocaleString()
+        }
+          - ${Math.min(table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, table.getRowCount()).toLocaleString()}
+           of ${table.getRowCount()}`}
+      </Typography>
+    ),
+
     renderTopToolbarCustomActions: ({ table }) =>
       dense && requestOrigin === 'move to' ? undefined : (
         <Box sx={{ display: 'flex' }}>
diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx
index 980cbf107..dd54ba8dc 100644
--- a/src/items/itemsTable.component.tsx
+++ b/src/items/itemsTable.component.tsx
@@ -457,6 +457,27 @@ export function ItemsTable(props: ItemTableProps) {
         </MenuItem>,
       ];
     },
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography>
+        {`Showing rows ${
+          Math.min(
+            table.getState().pagination.pageIndex *
+              table.getState().pagination.pageSize +
+              table.getState().pagination.pageSize,
+            table.getRowCount()
+          ) === 0
+            ? 0
+            : (
+                table.getState().pagination.pageIndex *
+                  table.getState().pagination.pageSize +
+                1
+              ).toLocaleString()
+        }
+          - ${Math.min(table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, table.getRowCount()).toLocaleString()}
+           of ${table.getRowCount()}`}
+      </Typography>
+    ),
+
     renderDetailPanel: dense
       ? ({ row }) => (
           <ItemsDetailsPanel
diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
index a3a1da47f..898c29735 100644
--- a/src/manufacturer/manufacturer.component.tsx
+++ b/src/manufacturer/manufacturer.component.tsx
@@ -268,6 +268,26 @@ function ManufacturerComponent() {
         </MenuItem>,
       ];
     },
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography>
+        {`Showing rows ${
+          Math.min(
+            table.getState().pagination.pageIndex *
+              table.getState().pagination.pageSize +
+              table.getState().pagination.pageSize,
+            table.getRowCount()
+          ) === 0
+            ? 0
+            : (
+                table.getState().pagination.pageIndex *
+                  table.getState().pagination.pageSize +
+                1
+              ).toLocaleString()
+        }
+          - ${Math.min(table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, table.getRowCount()).toLocaleString()}
+           of ${table.getRowCount()}`}
+      </Typography>
+    ),
   });
 
   const navigate = useNavigate();
diff --git a/src/systems/systemItemsTable.component.tsx b/src/systems/systemItemsTable.component.tsx
index 15d778cb1..31a62adc1 100644
--- a/src/systems/systemItemsTable.component.tsx
+++ b/src/systems/systemItemsTable.component.tsx
@@ -328,6 +328,27 @@ export function SystemItemsTable(props: SystemItemsTableProps) {
         />
       </Box>
     ),
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography>
+        {`Showing rows ${
+          Math.min(
+            table.getState().pagination.pageIndex *
+              table.getState().pagination.pageSize +
+              table.getState().pagination.pageSize,
+            table.getRowCount()
+          ) === 0
+            ? 0
+            : (
+                table.getState().pagination.pageIndex *
+                  table.getState().pagination.pageSize +
+                1
+              ).toLocaleString()
+        }
+          - ${Math.min(table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, table.getRowCount()).toLocaleString()}
+           of ${table.getRowCount()}`}
+      </Typography>
+    ),
+
     renderDetailPanel: ({ row }) =>
       row.original.catalogueItem !== undefined ? (
         <ItemsDetailsPanel

From b761fbdb617351f41527d818ecd8d2836d9ae2a4 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 2 Apr 2024 09:35:24 +0100
Subject: [PATCH 02/28] abstracted logic for total row counts #441

---
 .../items/catalogueItemsTable.component.tsx   | 22 +++++----------
 src/items/itemsTable.component.tsx            | 27 +++++++------------
 src/manufacturer/manufacturer.component.tsx   | 27 +++++++------------
 src/systems/systemItemsTable.component.tsx    | 23 +++++-----------
 src/utils.tsx                                 | 16 +++++++++++
 5 files changed, 48 insertions(+), 67 deletions(-)

diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
index e9789b3d5..c7bda276b 100644
--- a/src/catalogue/items/catalogueItemsTable.component.tsx
+++ b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -41,6 +41,7 @@ import {
   formatDateTimeStrings,
   generateUniqueName,
   getPageHeightCalc,
+  showTotalRowCounts,
 } from '../../utils';
 import CatalogueItemsDetailsPanel from './catalogueItemsDetailsPanel.component';
 import CatalogueItemDirectoryDialog from './catalogueItemDirectoryDialog.component';
@@ -774,22 +775,11 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
     },
     renderBottomToolbarCustomActions: ({ table }) => (
       <Typography>
-        {`Showing rows ${
-          Math.min(
-            table.getState().pagination.pageIndex *
-              table.getState().pagination.pageSize +
-              table.getState().pagination.pageSize,
-            table.getRowCount()
-          ) === 0
-            ? 0
-            : (
-                table.getState().pagination.pageIndex *
-                  table.getState().pagination.pageSize +
-                1
-              ).toLocaleString()
-        }
-          - ${Math.min(table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, table.getRowCount()).toLocaleString()}
-           of ${table.getRowCount()}`}
+        {showTotalRowCounts(
+          table.getState().pagination.pageIndex,
+          table.getState().pagination.pageSize,
+          table.getRowCount()
+        )}
       </Typography>
     ),
 
diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx
index dd54ba8dc..4bb4589e4 100644
--- a/src/items/itemsTable.component.tsx
+++ b/src/items/itemsTable.component.tsx
@@ -37,7 +37,11 @@ import {
 import { MRT_Localization_EN } from 'material-react-table/locales/en';
 import { useItems } from '../api/items';
 import ItemsDetailsPanel from './itemsDetailsPanel.component';
-import { formatDateTimeStrings, getPageHeightCalc } from '../utils';
+import {
+  formatDateTimeStrings,
+  getPageHeightCalc,
+  showTotalRowCounts,
+} from '../utils';
 import DeleteItemDialog from './deleteItemDialog.component';
 
 export interface ItemTableProps {
@@ -459,22 +463,11 @@ export function ItemsTable(props: ItemTableProps) {
     },
     renderBottomToolbarCustomActions: ({ table }) => (
       <Typography>
-        {`Showing rows ${
-          Math.min(
-            table.getState().pagination.pageIndex *
-              table.getState().pagination.pageSize +
-              table.getState().pagination.pageSize,
-            table.getRowCount()
-          ) === 0
-            ? 0
-            : (
-                table.getState().pagination.pageIndex *
-                  table.getState().pagination.pageSize +
-                1
-              ).toLocaleString()
-        }
-          - ${Math.min(table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, table.getRowCount()).toLocaleString()}
-           of ${table.getRowCount()}`}
+        {showTotalRowCounts(
+          table.getState().pagination.pageIndex,
+          table.getState().pagination.pageSize,
+          table.getRowCount()
+        )}
       </Typography>
     ),
 
diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
index 898c29735..fa763cff7 100644
--- a/src/manufacturer/manufacturer.component.tsx
+++ b/src/manufacturer/manufacturer.component.tsx
@@ -26,7 +26,11 @@ import { Manufacturer } from '../app.types';
 import DeleteManufacturerDialog from './deleteManufacturerDialog.component';
 import ManufacturerDialog from './manufacturerDialog.component';
 import Breadcrumbs from '../view/breadcrumbs.component';
-import { formatDateTimeStrings, getPageHeightCalc } from '../utils';
+import {
+  formatDateTimeStrings,
+  getPageHeightCalc,
+  showTotalRowCounts,
+} from '../utils';
 
 function ManufacturerComponent() {
   const { data: ManufacturerData, isLoading: ManufacturerDataLoading } =
@@ -270,22 +274,11 @@ function ManufacturerComponent() {
     },
     renderBottomToolbarCustomActions: ({ table }) => (
       <Typography>
-        {`Showing rows ${
-          Math.min(
-            table.getState().pagination.pageIndex *
-              table.getState().pagination.pageSize +
-              table.getState().pagination.pageSize,
-            table.getRowCount()
-          ) === 0
-            ? 0
-            : (
-                table.getState().pagination.pageIndex *
-                  table.getState().pagination.pageSize +
-                1
-              ).toLocaleString()
-        }
-          - ${Math.min(table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, table.getRowCount()).toLocaleString()}
-           of ${table.getRowCount()}`}
+        {showTotalRowCounts(
+          table.getState().pagination.pageIndex,
+          table.getState().pagination.pageSize,
+          table.getRowCount()
+        )}
       </Typography>
     ),
   });
diff --git a/src/systems/systemItemsTable.component.tsx b/src/systems/systemItemsTable.component.tsx
index 31a62adc1..7f1da2ca7 100644
--- a/src/systems/systemItemsTable.component.tsx
+++ b/src/systems/systemItemsTable.component.tsx
@@ -16,7 +16,7 @@ import { useItems } from '../api/items';
 import { CatalogueItem, Item, System, UsageStatusType } from '../app.types';
 import ItemsDetailsPanel from '../items/itemsDetailsPanel.component';
 import SystemItemsDialog from './systemItemsDialog.component';
-import { formatDateTimeStrings } from '../utils';
+import { formatDateTimeStrings, showTotalRowCounts } from '../utils';
 
 const MoveItemsButton = (props: {
   selectedItems: Item[];
@@ -330,22 +330,11 @@ export function SystemItemsTable(props: SystemItemsTableProps) {
     ),
     renderBottomToolbarCustomActions: ({ table }) => (
       <Typography>
-        {`Showing rows ${
-          Math.min(
-            table.getState().pagination.pageIndex *
-              table.getState().pagination.pageSize +
-              table.getState().pagination.pageSize,
-            table.getRowCount()
-          ) === 0
-            ? 0
-            : (
-                table.getState().pagination.pageIndex *
-                  table.getState().pagination.pageSize +
-                1
-              ).toLocaleString()
-        }
-          - ${Math.min(table.getState().pagination.pageIndex * table.getState().pagination.pageSize + table.getState().pagination.pageSize, table.getRowCount()).toLocaleString()}
-           of ${table.getRowCount()}`}
+        {showTotalRowCounts(
+          table.getState().pagination.pageIndex,
+          table.getState().pagination.pageSize,
+          table.getRowCount()
+        )}
       </Typography>
     ),
 
diff --git a/src/utils.tsx b/src/utils.tsx
index 87f77b826..a7a2a453d 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -87,3 +87,19 @@ export const formatDateTimeStrings = (
 
   return formattedDate;
 };
+
+/* returns a string with the total rows and current rows for table views */
+export const showTotalRowCounts = (
+  pageIndex: number,
+  pageSize: number,
+  totalRowCount: number
+): string => {
+  const firstRowIndex = pageIndex * pageSize;
+  const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+
+  return `Showing rows ${
+    lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
+  }
+    - ${lastRowIndex.toLocaleString()}
+     of ${totalRowCount}`;
+};

From 068743b83622f94d3819cbaa168e7fd9fb3d9249 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 2 Apr 2024 09:41:50 +0100
Subject: [PATCH 03/28] updated snapshots #441

---
 ...atalogueItemsTable.component.test.tsx.snap | 12 +++--
 .../itemsTable.component.test.tsx.snap        | 52 +++++++++++++------
 .../manufacturer.component.test.tsx.snap      | 31 ++++++++---
 .../systemItemsTable.component.test.tsx.snap  | 24 +++++----
 4 files changed, 82 insertions(+), 37 deletions(-)

diff --git a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
index f7a4ce62a..ebf07a42d 100644
--- a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
+++ b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
@@ -840,7 +840,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -863,9 +863,15 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+          >
+            Showing rows 1
+    - 4
+     of 4
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"
diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index de9b91991..65f72b2ba 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -571,7 +571,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":re:"
                               inputmode="text"
-                              placeholder="Min"
+                              placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
                               type="text"
                               value=""
@@ -616,7 +616,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":rg:"
                               inputmode="text"
-                              placeholder="Max"
+                              placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
                               type="text"
                               value=""
@@ -1051,7 +1051,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -1074,9 +1074,15 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+          >
+            Showing rows 0
+    - 0
+     of 0
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"
@@ -2482,7 +2488,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -2505,9 +2511,15 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+          >
+            Showing rows 1
+    - 4
+     of 4
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"
@@ -2944,7 +2956,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":rjn:"
                               inputmode="text"
-                              placeholder="Min"
+                              placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
                               type="text"
                               value=""
@@ -2989,7 +3001,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":rjp:"
                               inputmode="text"
-                              placeholder="Max"
+                              placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
                               type="text"
                               value=""
@@ -3266,7 +3278,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":rk1:"
                               inputmode="text"
-                              placeholder="Min"
+                              placeholder="DD/MM/YYYY"
                               title="Min"
                               type="text"
                               value=""
@@ -3311,7 +3323,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":rk3:"
                               inputmode="text"
-                              placeholder="Max"
+                              placeholder="DD/MM/YYYY"
                               title="Max"
                               type="text"
                               value=""
@@ -3450,7 +3462,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":rk7:"
                               inputmode="text"
-                              placeholder="Min"
+                              placeholder="DD/MM/YYYY"
                               title="Min"
                               type="text"
                               value=""
@@ -3495,7 +3507,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":rk9:"
                               inputmode="text"
-                              placeholder="Max"
+                              placeholder="DD/MM/YYYY"
                               title="Max"
                               type="text"
                               value=""
@@ -4131,7 +4143,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -4154,9 +4166,15 @@ exports[`Items Table > renders the dense table correctly 1`] = `
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+          >
+            Showing rows 1
+    - 4
+     of 4
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"
diff --git a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
index 6f981e4ef..7383ae8ea 100644
--- a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
+++ b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
@@ -246,7 +246,16 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                 </svg>
                 <span
                   class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                />
+                >
+                  <span
+                    class="css-y4cjyz-MuiTouchRipple-ripple MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
+                    style="width: 1px; height: 1px; top: -0.5px; left: -0.5px;"
+                  >
+                    <span
+                      class="MuiTouchRipple-child MuiTouchRipple-childLeaving"
+                    />
+                  </span>
+                </span>
               </button>
             </div>
           </div>
@@ -582,7 +591,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":r1d:"
                               inputmode="text"
-                              placeholder="Min"
+                              placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
                               type="text"
                               value=""
@@ -627,7 +636,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":r1f:"
                               inputmode="text"
-                              placeholder="Max"
+                              placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
                               type="text"
                               value=""
@@ -793,7 +802,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":r2m:"
                               inputmode="text"
-                              placeholder="Min"
+                              placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
                               type="text"
                               value=""
@@ -838,7 +847,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                               id=":r2o:"
                               inputmode="text"
-                              placeholder="Max"
+                              placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
                               type="text"
                               value=""
@@ -1854,7 +1863,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
@@ -1877,9 +1886,15 @@ exports[`Manufacturer > renders table data correctly 1`] = `
         <div
           class="MuiBox-root css-1llu0od"
         >
-          <span />
+          <p
+            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+          >
+            Showing rows 1
+    - 4
+     of 4
+          </p>
           <div
-            class="MuiBox-root css-qpxlqp"
+            class="MuiBox-root css-nokk8"
           >
             <div
               class="MuiTablePagination-root MuiBox-root css-8k4lth"
diff --git a/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap b/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap
index 9a5051084..797ab9641 100644
--- a/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap
+++ b/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap
@@ -813,7 +813,7 @@ exports[`SystemItemsTable > renders correctly 1`] = `
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                             id=":rl:"
                             inputmode="text"
-                            placeholder="Min"
+                            placeholder="DD/MM/YYYY hh:mm"
                             title="Min"
                             type="text"
                             value=""
@@ -858,7 +858,7 @@ exports[`SystemItemsTable > renders correctly 1`] = `
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                             id=":rn:"
                             inputmode="text"
-                            placeholder="Max"
+                            placeholder="DD/MM/YYYY hh:mm"
                             title="Max"
                             type="text"
                             value=""
@@ -1024,7 +1024,7 @@ exports[`SystemItemsTable > renders correctly 1`] = `
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                             id=":r2d:"
                             inputmode="text"
-                            placeholder="Min"
+                            placeholder="DD/MM/YYYY hh:mm"
                             title="Min"
                             type="text"
                             value=""
@@ -1069,7 +1069,7 @@ exports[`SystemItemsTable > renders correctly 1`] = `
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                             id=":r2f:"
                             inputmode="text"
-                            placeholder="Max"
+                            placeholder="DD/MM/YYYY hh:mm"
                             title="Max"
                             type="text"
                             value=""
@@ -1400,7 +1400,7 @@ exports[`SystemItemsTable > renders correctly 1`] = `
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                             id=":r11:"
                             inputmode="text"
-                            placeholder="Min"
+                            placeholder="DD/MM/YYYY"
                             title="Min"
                             type="text"
                             value=""
@@ -1445,7 +1445,7 @@ exports[`SystemItemsTable > renders correctly 1`] = `
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
                             id=":r13:"
                             inputmode="text"
-                            placeholder="Max"
+                            placeholder="DD/MM/YYYY"
                             title="Max"
                             type="text"
                             value=""
@@ -2273,7 +2273,7 @@ exports[`SystemItemsTable > renders correctly 1`] = `
             class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
               role="alert"
             >
               <div
@@ -2321,9 +2321,15 @@ exports[`SystemItemsTable > renders correctly 1`] = `
       <div
         class="MuiBox-root css-1llu0od"
       >
-        <span />
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+        >
+          Showing rows 1
+    - 3
+     of 3
+        </p>
         <div
-          class="MuiBox-root css-qpxlqp"
+          class="MuiBox-root css-nokk8"
         >
           <div
             class="MuiTablePagination-root MuiBox-root css-8k4lth"

From f339b06d77421f33e5ad43efeed4b996e602784d Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 2 Apr 2024 11:19:12 +0100
Subject: [PATCH 04/28] fix snapshot

---
 .../manufacturer.component.test.tsx.snap      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
index 7383ae8ea..fefe4ad28 100644
--- a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
+++ b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
@@ -148,7 +148,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                         aria-invalid="false"
                         autocomplete="new-password"
                         class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
-                        id=":r11:"
+                        id=":r0:"
                         placeholder="Search"
                         type="text"
                         value=""
@@ -421,7 +421,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Name"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r18:"
+                            id=":r7:"
                             placeholder="Filter by Name"
                             title="Filter by Name"
                             type="text"
@@ -589,7 +589,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r1d:"
+                              id=":rc:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
@@ -634,7 +634,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r1f:"
+                              id=":re:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
@@ -800,7 +800,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r2m:"
+                              id=":r1l:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
@@ -845,7 +845,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r2o:"
+                              id=":r1n:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
@@ -1008,7 +1008,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by URL"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r1k:"
+                            id=":rj:"
                             placeholder="Filter by URL"
                             title="Filter by URL"
                             type="text"
@@ -1173,7 +1173,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Address"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r1p:"
+                            id=":ro:"
                             placeholder="Filter by Address"
                             title="Filter by Address"
                             type="text"
@@ -1338,7 +1338,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Telephone number"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r1u:"
+                            id=":rt:"
                             placeholder="Filter by Telephone number"
                             title="Filter by Telephone number"
                             type="text"
@@ -1912,7 +1912,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":r20:"
+                    aria-controls=":rv:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"

From 610f98f6ff3fbff0dc29cedeef4f3d37f6914d3e Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 2 Apr 2024 11:33:42 +0100
Subject: [PATCH 05/28] fixed snapshot attempt 2 #441

---
 .../manufacturer.component.test.tsx.snap      | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
index fefe4ad28..7383ae8ea 100644
--- a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
+++ b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
@@ -148,7 +148,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                         aria-invalid="false"
                         autocomplete="new-password"
                         class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
-                        id=":r0:"
+                        id=":r11:"
                         placeholder="Search"
                         type="text"
                         value=""
@@ -421,7 +421,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Name"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r7:"
+                            id=":r18:"
                             placeholder="Filter by Name"
                             title="Filter by Name"
                             type="text"
@@ -589,7 +589,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rc:"
+                              id=":r1d:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
@@ -634,7 +634,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":re:"
+                              id=":r1f:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
@@ -800,7 +800,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r1l:"
+                              id=":r2m:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
@@ -845,7 +845,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r1n:"
+                              id=":r2o:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
@@ -1008,7 +1008,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by URL"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":rj:"
+                            id=":r1k:"
                             placeholder="Filter by URL"
                             title="Filter by URL"
                             type="text"
@@ -1173,7 +1173,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Address"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":ro:"
+                            id=":r1p:"
                             placeholder="Filter by Address"
                             title="Filter by Address"
                             type="text"
@@ -1338,7 +1338,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Telephone number"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":rt:"
+                            id=":r1u:"
                             placeholder="Filter by Telephone number"
                             title="Filter by Telephone number"
                             type="text"
@@ -1912,7 +1912,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":rv:"
+                    aria-controls=":r20:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"

From c7788475ded005fe8da5161e6d51c2dce616d5a5 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 2 Apr 2024 15:06:53 +0100
Subject: [PATCH 06/28] changed logic to just display total rows and total
 filtered rows, and removed function from utils #441

---
 .../items/catalogueItemsTable.component.tsx     |  9 +++------
 src/items/itemsTable.component.tsx              | 14 ++++----------
 src/manufacturer/manufacturer.component.tsx     | 14 ++++----------
 src/systems/systemItemsTable.component.tsx      | 10 ++++------
 src/utils.tsx                                   | 17 +----------------
 5 files changed, 16 insertions(+), 48 deletions(-)

diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
index c7bda276b..aea36745c 100644
--- a/src/catalogue/items/catalogueItemsTable.component.tsx
+++ b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -41,7 +41,6 @@ import {
   formatDateTimeStrings,
   generateUniqueName,
   getPageHeightCalc,
-  showTotalRowCounts,
 } from '../../utils';
 import CatalogueItemsDetailsPanel from './catalogueItemsDetailsPanel.component';
 import CatalogueItemDirectoryDialog from './catalogueItemDirectoryDialog.component';
@@ -775,11 +774,9 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
     },
     renderBottomToolbarCustomActions: ({ table }) => (
       <Typography>
-        {showTotalRowCounts(
-          table.getState().pagination.pageIndex,
-          table.getState().pagination.pageSize,
-          table.getRowCount()
-        )}
+        {table.getFilteredRowModel().rows.length == catalogueItemsData?.length
+          ? `Total Catalogue Items: ${catalogueItemsData.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${catalogueItemsData?.length} Catalogue Items`}
       </Typography>
     ),
 
diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx
index 956aa23f2..6c090c122 100644
--- a/src/items/itemsTable.component.tsx
+++ b/src/items/itemsTable.component.tsx
@@ -37,11 +37,7 @@ import {
 import { MRT_Localization_EN } from 'material-react-table/locales/en';
 import { useItems } from '../api/items';
 import ItemsDetailsPanel from './itemsDetailsPanel.component';
-import {
-  formatDateTimeStrings,
-  getPageHeightCalc,
-  showTotalRowCounts,
-} from '../utils';
+import { formatDateTimeStrings, getPageHeightCalc } from '../utils';
 import DeleteItemDialog from './deleteItemDialog.component';
 
 export interface ItemTableProps {
@@ -457,11 +453,9 @@ export function ItemsTable(props: ItemTableProps) {
     },
     renderBottomToolbarCustomActions: ({ table }) => (
       <Typography>
-        {showTotalRowCounts(
-          table.getState().pagination.pageIndex,
-          table.getState().pagination.pageSize,
-          table.getRowCount()
-        )}
+        {table.getFilteredRowModel().rows.length == data?.length
+          ? `Total Items: ${data.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${data?.length} Items`}
       </Typography>
     ),
 
diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
index fa763cff7..dbb9e2a87 100644
--- a/src/manufacturer/manufacturer.component.tsx
+++ b/src/manufacturer/manufacturer.component.tsx
@@ -26,11 +26,7 @@ import { Manufacturer } from '../app.types';
 import DeleteManufacturerDialog from './deleteManufacturerDialog.component';
 import ManufacturerDialog from './manufacturerDialog.component';
 import Breadcrumbs from '../view/breadcrumbs.component';
-import {
-  formatDateTimeStrings,
-  getPageHeightCalc,
-  showTotalRowCounts,
-} from '../utils';
+import { formatDateTimeStrings, getPageHeightCalc } from '../utils';
 
 function ManufacturerComponent() {
   const { data: ManufacturerData, isLoading: ManufacturerDataLoading } =
@@ -274,11 +270,9 @@ function ManufacturerComponent() {
     },
     renderBottomToolbarCustomActions: ({ table }) => (
       <Typography>
-        {showTotalRowCounts(
-          table.getState().pagination.pageIndex,
-          table.getState().pagination.pageSize,
-          table.getRowCount()
-        )}
+        {table.getFilteredRowModel().rows.length == ManufacturerData?.length
+          ? `Total Manufacturers: ${ManufacturerData.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${ManufacturerData?.length} Manufacturers`}
       </Typography>
     ),
   });
diff --git a/src/systems/systemItemsTable.component.tsx b/src/systems/systemItemsTable.component.tsx
index 987779b38..6391fe8f5 100644
--- a/src/systems/systemItemsTable.component.tsx
+++ b/src/systems/systemItemsTable.component.tsx
@@ -16,7 +16,7 @@ import { useItems } from '../api/items';
 import { CatalogueItem, Item, System, UsageStatusType } from '../app.types';
 import ItemsDetailsPanel from '../items/itemsDetailsPanel.component';
 import SystemItemsDialog from './systemItemsDialog.component';
-import { formatDateTimeStrings, showTotalRowCounts } from '../utils';
+import { formatDateTimeStrings } from '../utils';
 
 const MoveItemsButton = (props: {
   selectedItems: Item[];
@@ -325,11 +325,9 @@ export function SystemItemsTable(props: SystemItemsTableProps) {
     ),
     renderBottomToolbarCustomActions: ({ table }) => (
       <Typography>
-        {showTotalRowCounts(
-          table.getState().pagination.pageIndex,
-          table.getState().pagination.pageSize,
-          table.getRowCount()
-        )}
+        {table.getFilteredRowModel().rows.length == itemsData?.length
+          ? `Total Items: ${itemsData.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${itemsData?.length} Items`}
       </Typography>
     ),
 
diff --git a/src/utils.tsx b/src/utils.tsx
index a7a2a453d..42372b47b 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { format, parseISO } from 'date-fns';
 
 /* Returns a name avoiding duplicates by appending _copy_n for nth copy */
@@ -87,19 +88,3 @@ export const formatDateTimeStrings = (
 
   return formattedDate;
 };
-
-/* returns a string with the total rows and current rows for table views */
-export const showTotalRowCounts = (
-  pageIndex: number,
-  pageSize: number,
-  totalRowCount: number
-): string => {
-  const firstRowIndex = pageIndex * pageSize;
-  const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
-
-  return `Showing rows ${
-    lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()
-  }
-    - ${lastRowIndex.toLocaleString()}
-     of ${totalRowCount}`;
-};

From c326636afb4dfdf84e3ca9a905ba7aa813cd9fd6 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 2 Apr 2024 15:19:56 +0100
Subject: [PATCH 07/28] updated snapshots #441

---
 .../catalogueItemsTable.component.test.tsx.snap      |  4 +---
 .../__snapshots__/itemsTable.component.test.tsx.snap | 12 +++---------
 .../manufacturer.component.test.tsx.snap             |  4 +---
 .../systemItemsTable.component.test.tsx.snap         |  4 +---
 4 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
index ebf07a42d..d4bc474ce 100644
--- a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
+++ b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
@@ -866,9 +866,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
           <p
             class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
           >
-            Showing rows 1
-    - 4
-     of 4
+            Total Catalogue Items: 4
           </p>
           <div
             class="MuiBox-root css-nokk8"
diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index 1dfa8b32d..506b1459d 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -1077,9 +1077,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
           <p
             class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
           >
-            Showing rows 0
-    - 0
-     of 0
+            Returned 0 out of undefined Items
           </p>
           <div
             class="MuiBox-root css-nokk8"
@@ -2514,9 +2512,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
           <p
             class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
           >
-            Showing rows 1
-    - 4
-     of 4
+            Total Items: 4
           </p>
           <div
             class="MuiBox-root css-nokk8"
@@ -4007,9 +4003,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
           <p
             class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
           >
-            Showing rows 1
-    - 4
-     of 4
+            Total Items: 4
           </p>
           <div
             class="MuiBox-root css-nokk8"
diff --git a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
index 7383ae8ea..3b537d781 100644
--- a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
+++ b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
@@ -1889,9 +1889,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
           <p
             class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
           >
-            Showing rows 1
-    - 4
-     of 4
+            Total Manufacturers: 4
           </p>
           <div
             class="MuiBox-root css-nokk8"
diff --git a/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap b/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap
index 7827ae9d3..52a4d4c7c 100644
--- a/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap
+++ b/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap
@@ -2145,9 +2145,7 @@ exports[`SystemItemsTable > renders correctly 1`] = `
         <p
           class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
         >
-          Showing rows 1
-    - 3
-     of 3
+          Total Items: 3
         </p>
         <div
           class="MuiBox-root css-nokk8"

From 3ac317158255d931e2bf97f32f96ae189cf582ea Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Wed, 3 Apr 2024 10:28:00 +0100
Subject: [PATCH 08/28] removed comment from utils file #441

---
 src/utils.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/utils.tsx b/src/utils.tsx
index 42372b47b..87f77b826 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import { format, parseISO } from 'date-fns';
 
 /* Returns a name avoiding duplicates by appending _copy_n for nth copy */

From 91ffd5219a89e970b854370c0b7690235f804e99 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Wed, 3 Apr 2024 10:28:17 +0100
Subject: [PATCH 09/28] fixed snapshot #441

---
 .../manufacturer.component.test.tsx.snap      | 20 +++++++++----------
 .../manufacturer.component.test.tsx           |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
index 3b537d781..6c481c20a 100644
--- a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
+++ b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
@@ -148,7 +148,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                         aria-invalid="false"
                         autocomplete="new-password"
                         class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
-                        id=":r11:"
+                        id=":r0:"
                         placeholder="Search"
                         type="text"
                         value=""
@@ -421,7 +421,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Name"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r18:"
+                            id=":r7:"
                             placeholder="Filter by Name"
                             title="Filter by Name"
                             type="text"
@@ -589,7 +589,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r1d:"
+                              id=":rc:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
@@ -634,7 +634,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r1f:"
+                              id=":re:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
@@ -800,7 +800,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r2m:"
+                              id=":r1l:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
@@ -845,7 +845,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r2o:"
+                              id=":r1n:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
@@ -1008,7 +1008,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by URL"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r1k:"
+                            id=":rj:"
                             placeholder="Filter by URL"
                             title="Filter by URL"
                             type="text"
@@ -1173,7 +1173,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Address"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r1p:"
+                            id=":ro:"
                             placeholder="Filter by Address"
                             title="Filter by Address"
                             type="text"
@@ -1338,7 +1338,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Telephone number"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r1u:"
+                            id=":rt:"
                             placeholder="Filter by Telephone number"
                             title="Filter by Telephone number"
                             type="text"
@@ -1910,7 +1910,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":r20:"
+                    aria-controls=":rv:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"
diff --git a/src/manufacturer/manufacturer.component.test.tsx b/src/manufacturer/manufacturer.component.test.tsx
index 189ebbd90..6423d4112 100644
--- a/src/manufacturer/manufacturer.component.test.tsx
+++ b/src/manufacturer/manufacturer.component.test.tsx
@@ -41,7 +41,7 @@ describe('Manufacturer', () => {
     await user.click(screen.getByRole('button', { name: 'Show/Hide columns' }));
     await user.click(screen.getByText('Created'));
     expect(view.asFragment()).toMatchSnapshot();
-  }, 10000);
+  });
 
   it('manufacturer url has a href so therefore links to new webpage', async () => {
     createView();

From b29dfede5b0dbe1702b5b4906f27246f9ad775ba Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Wed, 3 Apr 2024 10:52:51 +0100
Subject: [PATCH 10/28] fix snapshot attempt 2 #441

---
 .../manufacturer.component.test.tsx.snap      | 31 +++++++------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
index 6c481c20a..8720eb820 100644
--- a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
+++ b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
@@ -148,7 +148,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                         aria-invalid="false"
                         autocomplete="new-password"
                         class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedStart MuiInputBase-inputAdornedEnd css-12yjm75-MuiInputBase-input-MuiOutlinedInput-input"
-                        id=":r0:"
+                        id=":r11:"
                         placeholder="Search"
                         type="text"
                         value=""
@@ -246,16 +246,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                 </svg>
                 <span
                   class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                >
-                  <span
-                    class="css-y4cjyz-MuiTouchRipple-ripple MuiTouchRipple-ripple MuiTouchRipple-rippleVisible"
-                    style="width: 1px; height: 1px; top: -0.5px; left: -0.5px;"
-                  >
-                    <span
-                      class="MuiTouchRipple-child MuiTouchRipple-childLeaving"
-                    />
-                  </span>
-                </span>
+                />
               </button>
             </div>
           </div>
@@ -421,7 +412,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Name"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r7:"
+                            id=":r18:"
                             placeholder="Filter by Name"
                             title="Filter by Name"
                             type="text"
@@ -589,7 +580,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rc:"
+                              id=":r1d:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
@@ -634,7 +625,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":re:"
+                              id=":r1f:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
@@ -800,7 +791,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r1l:"
+                              id=":r2m:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Min"
@@ -845,7 +836,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r1n:"
+                              id=":r2o:"
                               inputmode="text"
                               placeholder="DD/MM/YYYY hh:mm"
                               title="Max"
@@ -1008,7 +999,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by URL"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":rj:"
+                            id=":r1k:"
                             placeholder="Filter by URL"
                             title="Filter by URL"
                             type="text"
@@ -1173,7 +1164,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Address"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":ro:"
+                            id=":r1p:"
                             placeholder="Filter by Address"
                             title="Filter by Address"
                             type="text"
@@ -1338,7 +1329,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                             aria-label="Filter by Telephone number"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":rt:"
+                            id=":r1u:"
                             placeholder="Filter by Telephone number"
                             title="Filter by Telephone number"
                             type="text"
@@ -1910,7 +1901,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":rv:"
+                    aria-controls=":r20:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"

From ad02997d8595103e6bfe84f438f95c4f4dcd7a1e Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Wed, 3 Apr 2024 14:00:18 +0100
Subject: [PATCH 11/28] potential fix for e2e test #441

---
 cypress/e2e/with_mock_data/catalogueItems.cy.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/cypress/e2e/with_mock_data/catalogueItems.cy.ts b/cypress/e2e/with_mock_data/catalogueItems.cy.ts
index 5cb47455e..0d9a42dcd 100644
--- a/cypress/e2e/with_mock_data/catalogueItems.cy.ts
+++ b/cypress/e2e/with_mock_data/catalogueItems.cy.ts
@@ -640,6 +640,7 @@ describe('Catalogue Items', () => {
 
     cy.startSnoopingBrowserMockedRequest();
     cy.findByText('Finish').click();
+    cy.findByRole('dialog').should('not.exist');
 
     cy.findBrowserMockedRequests({
       method: 'PATCH',
@@ -671,6 +672,7 @@ describe('Catalogue Items', () => {
 
     cy.startSnoopingBrowserMockedRequest();
     cy.findByText('Finish').click();
+    cy.findByRole('dialog').should('not.exist');
 
     cy.findBrowserMockedRequests({
       method: 'PATCH',

From 68ef388a54b415de052ef6826048d14399c77e85 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Mon, 15 Apr 2024 13:19:50 +0100
Subject: [PATCH 12/28] adjusted padding #441

---
 src/catalogue/items/catalogueItemsTable.component.tsx | 2 +-
 src/items/itemsTable.component.tsx                    | 2 +-
 src/manufacturer/manufacturer.component.tsx           | 2 +-
 src/systems/systemItemsTable.component.tsx            | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
index aea36745c..edf1f9f35 100644
--- a/src/catalogue/items/catalogueItemsTable.component.tsx
+++ b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -773,7 +773,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
       );
     },
     renderBottomToolbarCustomActions: ({ table }) => (
-      <Typography>
+      <Typography sx={{ paddingLeft: '8px' }}>
         {table.getFilteredRowModel().rows.length == catalogueItemsData?.length
           ? `Total Catalogue Items: ${catalogueItemsData.length}`
           : `Returned ${table.getFilteredRowModel().rows.length} out of ${catalogueItemsData?.length} Catalogue Items`}
diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx
index 6c090c122..b4c65a099 100644
--- a/src/items/itemsTable.component.tsx
+++ b/src/items/itemsTable.component.tsx
@@ -452,7 +452,7 @@ export function ItemsTable(props: ItemTableProps) {
       ];
     },
     renderBottomToolbarCustomActions: ({ table }) => (
-      <Typography>
+      <Typography sx={{ paddingLeft: '8px' }}>
         {table.getFilteredRowModel().rows.length == data?.length
           ? `Total Items: ${data.length}`
           : `Returned ${table.getFilteredRowModel().rows.length} out of ${data?.length} Items`}
diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
index dbb9e2a87..bf3fbf539 100644
--- a/src/manufacturer/manufacturer.component.tsx
+++ b/src/manufacturer/manufacturer.component.tsx
@@ -269,7 +269,7 @@ function ManufacturerComponent() {
       ];
     },
     renderBottomToolbarCustomActions: ({ table }) => (
-      <Typography>
+      <Typography sx={{ paddingLeft: '8px' }}>
         {table.getFilteredRowModel().rows.length == ManufacturerData?.length
           ? `Total Manufacturers: ${ManufacturerData.length}`
           : `Returned ${table.getFilteredRowModel().rows.length} out of ${ManufacturerData?.length} Manufacturers`}
diff --git a/src/systems/systemItemsTable.component.tsx b/src/systems/systemItemsTable.component.tsx
index 6391fe8f5..f23bdfa25 100644
--- a/src/systems/systemItemsTable.component.tsx
+++ b/src/systems/systemItemsTable.component.tsx
@@ -324,7 +324,7 @@ export function SystemItemsTable(props: SystemItemsTableProps) {
       </Box>
     ),
     renderBottomToolbarCustomActions: ({ table }) => (
-      <Typography>
+      <Typography sx={{ paddingLeft: '8px' }}>
         {table.getFilteredRowModel().rows.length == itemsData?.length
           ? `Total Items: ${itemsData.length}`
           : `Returned ${table.getFilteredRowModel().rows.length} out of ${itemsData?.length} Items`}

From 3f07e7c8976aed201d19b90fe2d9ade1a841a55a Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Mon, 15 Apr 2024 14:09:31 +0100
Subject: [PATCH 13/28] added total rows to subsystem and cat categories #441

---
 .../category/catalogueCardView.component.tsx         |  6 ++++++
 src/systems/systems.component.tsx                    | 12 ++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/catalogue/category/catalogueCardView.component.tsx b/src/catalogue/category/catalogueCardView.component.tsx
index 9e69c43fb..74ea46d8b 100644
--- a/src/catalogue/category/catalogueCardView.component.tsx
+++ b/src/catalogue/category/catalogueCardView.component.tsx
@@ -88,6 +88,12 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
         bottom={12}
         right={0}
       >
+        <Grid item position={'fixed'} left={8}>
+          <Typography sx={{ paddingLeft: '8px' }}>
+            {`Total Categories: ${catalogueCategoryData.length}`}
+          </Typography>
+        </Grid>
+
         <Grid item>
           <FormControl
             variant="standard"
diff --git a/src/systems/systems.component.tsx b/src/systems/systems.component.tsx
index 4e0cbd421..9d1a0b6af 100644
--- a/src/systems/systems.component.tsx
+++ b/src/systems/systems.component.tsx
@@ -29,6 +29,7 @@ import {
   MRT_GlobalFilterTextField as MRTGlobalFilterTextField,
   MRT_TableBodyCellValue as MRTTableBodyCellValue,
   MRT_TablePagination as MRTTablePagination,
+  MRT_BottomToolbar,
   MRT_ColumnDef,
   MRT_RowSelectionState,
   useMaterialReactTable,
@@ -163,7 +164,7 @@ const columns: MRT_ColumnDef<System>[] = [
   },
 ];
 
-const MIN_SUBSYSTEMS_WIDTH = '320px';
+const MIN_SUBSYSTEMS_WIDTH = '480px';
 
 function Systems() {
   // Navigation
@@ -288,6 +289,13 @@ function Systems() {
         </MenuItem>,
       ];
     },
+    renderBottomToolbarCustomActions: ({ table }) => (
+      <Typography sx={{ paddingLeft: '8px' }}>
+        {table.getFilteredRowModel().rows.length == subsystemsData?.length
+          ? `Total Systems: ${subsystemsData.length}`
+          : `Returned ${table.getFilteredRowModel().rows.length} out of ${subsystemsData?.length} Systems`}
+      </Typography>
+    ),
   });
 
   return (
@@ -445,7 +453,7 @@ function Systems() {
                       </TableBody>
                     </Table>
                   </TableContainer>
-                  <MRTTablePagination table={subsystemsTable} />
+                  <MRT_BottomToolbar table={subsystemsTable} />
                 </Stack>
               </>
             )}

From f445f2659799cd2ee148fba623bd09591107334b Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Mon, 15 Apr 2024 14:38:27 +0100
Subject: [PATCH 14/28] fixed linting #441

---
 src/systems/systems.component.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/systems/systems.component.tsx b/src/systems/systems.component.tsx
index 2aacb6a2d..0f3adadc0 100644
--- a/src/systems/systems.component.tsx
+++ b/src/systems/systems.component.tsx
@@ -28,7 +28,6 @@ import {
   // To resolve react/jsx-pascal-case
   MRT_GlobalFilterTextField as MRTGlobalFilterTextField,
   MRT_TableBodyCellValue as MRTTableBodyCellValue,
-  MRT_TablePagination as MRTTablePagination,
   MRT_BottomToolbar,
   MRT_ColumnDef,
   MRT_RowSelectionState,

From ea49af2d0c6a7cf1d4b756935c3a04f5e6092b2e Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Mon, 15 Apr 2024 16:11:15 +0100
Subject: [PATCH 15/28] updated snapshots #441

---
 .../catalogueItemsTable.component.test.tsx.snap      |  2 +-
 .../__snapshots__/itemsTable.component.test.tsx.snap |  8 ++++----
 .../manufacturer.component.test.tsx.snap             |  2 +-
 .../systemItemsTable.component.test.tsx.snap         | 12 ++++++++----
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
index d4bc474ce..39f85d8a8 100644
--- a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
+++ b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
@@ -864,7 +864,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
           class="MuiBox-root css-1llu0od"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
           >
             Total Catalogue Items: 4
           </p>
diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index ad93434b4..43fa548f5 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -1317,9 +1317,9 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
           class="MuiBox-root css-1llu0od"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
           >
-            Returned 0 out of undefined Items
+            Total Items: 4
           </p>
           <div
             class="MuiBox-root css-nokk8"
@@ -2766,7 +2766,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
           class="MuiBox-root css-1llu0od"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
           >
             Total Items: 4
           </p>
@@ -4257,7 +4257,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
           class="MuiBox-root css-1llu0od"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
           >
             Total Items: 4
           </p>
diff --git a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
index 027b2f505..5c6f60694 100644
--- a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
+++ b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
@@ -1878,7 +1878,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
           class="MuiBox-root css-1llu0od"
         >
           <p
-            class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
           >
             Total Manufacturers: 4
           </p>
diff --git a/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap b/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap
index a8f20a769..92ea58f7a 100644
--- a/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap
+++ b/src/systems/__snapshots__/systemItemsTable.component.test.tsx.snap
@@ -2151,7 +2151,7 @@ exports[`SystemItemsTable > SystemItemsTable (normal) > renders correctly 1`] =
         class="MuiBox-root css-1llu0od"
       >
         <p
-          class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
         >
           Total Items: 3
         </p>
@@ -3239,7 +3239,7 @@ exports[`SystemItemsTable > SystemItemsTable (usageStatus) > renders correctly 1
             class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-dxfizy-MuiPaper-root-MuiAlert-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-3fnbcm-MuiPaper-root-MuiAlert-root"
               role="alert"
             >
               <div
@@ -3287,9 +3287,13 @@ exports[`SystemItemsTable > SystemItemsTable (usageStatus) > renders correctly 1
       <div
         class="MuiBox-root css-1llu0od"
       >
-        <span />
+        <p
+          class="MuiTypography-root MuiTypography-body1 css-13zw5gk-MuiTypography-root"
+        >
+          Returned 4 out of undefined Items
+        </p>
         <div
-          class="MuiBox-root css-qpxlqp"
+          class="MuiBox-root css-nokk8"
         >
           <div
             class="MuiTablePagination-root MuiBox-root css-8k4lth"

From 88f241926964eaa4fa43beb432fce2f74729aa2c Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Thu, 18 Apr 2024 13:15:57 +0100
Subject: [PATCH 16/28] changed system table view to have pagination under
 total rows #441

---
 src/systems/systems.component.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/systems/systems.component.tsx b/src/systems/systems.component.tsx
index 0f3adadc0..0a7351596 100644
--- a/src/systems/systems.component.tsx
+++ b/src/systems/systems.component.tsx
@@ -28,9 +28,9 @@ import {
   // To resolve react/jsx-pascal-case
   MRT_GlobalFilterTextField as MRTGlobalFilterTextField,
   MRT_TableBodyCellValue as MRTTableBodyCellValue,
-  MRT_BottomToolbar,
   MRT_ColumnDef,
   MRT_RowSelectionState,
+  MRT_TablePagination,
   useMaterialReactTable,
 } from 'material-react-table';
 import React from 'react';
@@ -164,7 +164,7 @@ const columns: MRT_ColumnDef<System>[] = [
   },
 ];
 
-const MIN_SUBSYSTEMS_WIDTH = '480px';
+const MIN_SUBSYSTEMS_WIDTH = '320px';
 
 function Systems() {
   // Navigation
@@ -297,13 +297,6 @@ function Systems() {
         </MenuItem>,
       ];
     },
-    renderBottomToolbarCustomActions: ({ table }) => (
-      <Typography sx={{ paddingLeft: '8px' }}>
-        {table.getFilteredRowModel().rows.length == subsystemsData?.length
-          ? `Total Systems: ${subsystemsData.length}`
-          : `Returned ${table.getFilteredRowModel().rows.length} out of ${subsystemsData?.length} Systems`}
-      </Typography>
-    ),
   });
 
   return (
@@ -461,7 +454,15 @@ function Systems() {
                       </TableBody>
                     </Table>
                   </TableContainer>
-                  <MRT_BottomToolbar table={subsystemsTable} />
+                  <Box sx={{ paddingTop: '8px' }}>
+                    <Typography sx={{ paddingLeft: '8px' }}>
+                      {subsystemsTable.getFilteredRowModel().rows.length ==
+                      subsystemsData?.length
+                        ? `Total Systems: ${subsystemsData.length}`
+                        : `Returned ${subsystemsTable.getFilteredRowModel().rows.length} out of ${subsystemsData?.length} Systems`}
+                    </Typography>
+                    <MRT_TablePagination table={subsystemsTable} />
+                  </Box>
                 </Stack>
               </>
             )}

From db41b80bc384466a4344bfae47c78f0bcf73869f Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 23 Apr 2024 09:31:38 +0100
Subject: [PATCH 17/28] fixed css/styling in catalogue categories card view
 #441

---
 .../category/catalogueCardView.component.tsx  | 177 +++++++++---------
 1 file changed, 89 insertions(+), 88 deletions(-)

diff --git a/src/catalogue/category/catalogueCardView.component.tsx b/src/catalogue/category/catalogueCardView.component.tsx
index f899e0f47..5ef79ef6d 100644
--- a/src/catalogue/category/catalogueCardView.component.tsx
+++ b/src/catalogue/category/catalogueCardView.component.tsx
@@ -51,25 +51,19 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
     endIndex
   );
 
+  const cardViewHeight = getPageHeightCalc('100px');
+  const cardViewCardsHeight = getPageHeightCalc('100px + 72px');
+
   return (
-    <Grid container flexDirection={'column'}>
-      <Grid
-        container
-        item
-        xs={12}
-        maxHeight={getPageHeightCalc('150px')}
-        overflow={'auto'}
-      >
+    <Grid
+      container
+      flexDirection={'column'}
+      height={cardViewHeight}
+      maxHeight={cardViewHeight}
+    >
+      <Grid container item maxHeight={cardViewCardsHeight} overflow={'auto'}>
         {displayedCatalogueCategories?.map((item, index) => (
-          <Grid
-            item
-            key={index}
-            xs={12}
-            sm={6}
-            md={4}
-            flexDirection={'column'}
-            alignContent={'center'}
-          >
+          <Grid item key={index} sm={6} md={4} width={'100%'}>
             <CatalogueCard
               {...item}
               onChangeOpenDeleteDialog={onChangeOpenDeleteCategoryDialog}
@@ -84,85 +78,92 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
           </Grid>
         ))}
       </Grid>
-      <Grid
-        container
-        item
-        alignItems="center"
-        justifyContent="right"
-        xs={12}
-        px={1}
-        py={1.5}
-        position={'fixed'}
-        bottom={12}
-        right={0}
-      >
-        <Grid item position={'fixed'} left={8}>
-          <Typography sx={{ paddingLeft: '8px' }}>
+
+      <Grid container item margin={0} marginTop={'auto'}>
+        <Grid item xs={6} justifyContent={'left'} alignSelf={'center'}>
+          <Typography
+            sx={{ paddingTop: '16px', paddingLeft: '8px', margin: '8px' }}
+          >
             {`Total Categories: ${catalogueCategoryData.length}`}
           </Typography>
         </Grid>
 
-        <Grid item>
-          <FormControl
-            variant="standard"
-            sx={{
-              margin: 1,
-              minWidth: '120px',
-              display: 'flex',
-              flexDirection: 'row',
-            }}
-          >
-            <Typography
+        <Grid
+          container
+          item
+          xs={6}
+          justifyContent={'flex-end'}
+          flexDirection={'row'}
+          alignSelf={'center'}
+        >
+          <Grid item flexDirection={'row'}>
+            <FormControl
+              variant="standard"
               sx={{
-                padding: 2,
-                color: 'text.secondary',
+                paddingTop: '16px',
+                margin: 1,
+                minWidth: '120px',
+                display: 'flex',
+                flexDirection: 'row',
               }}
             >
-              {'Categories per page'}
-            </Typography>
-            <Select
-              disableUnderline
-              value={preservedState.pagination.pageSize}
-              inputProps={{
-                name: 'Max Results',
-                labelId: 'select-max-results',
-                'aria-label': 'Categories per page',
-              }}
-              onChange={(event) =>
-                onPreservedStatesChange.onPaginationChange({
-                  pageSize: +event.target.value,
-                  pageIndex: 1,
-                })
-              }
-              label={'Max Results'}
-            >
-              <MenuItem value={'30'}>30</MenuItem>
-              <MenuItem value={'45'}>45</MenuItem>
-              <MenuItem value={'60'}>60</MenuItem>
-            </Select>
-          </FormControl>
-        </Grid>
+              <Typography
+                sx={{
+                  padding: 1,
+                  color: 'text.secondary',
+                }}
+              >
+                {'Categories per page'}
+              </Typography>
+              <Select
+                disableUnderline
+                value={preservedState.pagination.pageSize}
+                inputProps={{
+                  name: 'Max Results',
+                  labelId: 'select-max-results',
+                  'aria-label': 'Categories per page',
+                }}
+                onChange={(event) =>
+                  onPreservedStatesChange.onPaginationChange({
+                    pageSize: +event.target.value,
+                    pageIndex: 1,
+                  })
+                }
+                label={'Max Results'}
+              >
+                <MenuItem value={'30'}>30</MenuItem>
+                <MenuItem value={'45'}>45</MenuItem>
+                <MenuItem value={'60'}>60</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
 
-        <Grid item>
-          <Pagination
-            variant="outlined"
-            shape="rounded"
-            count={Math.ceil(
-              catalogueCategoryData?.length / preservedState.pagination.pageSize
-            )}
-            page={preservedState.pagination.pageIndex}
-            onChange={(_event, value) =>
-              onPreservedStatesChange.onPaginationChange((prevState) => ({
-                ...prevState,
-                pageIndex: value,
-              }))
-            }
-            size="medium"
-            color="secondary"
-            sx={{ textAlign: 'center' }}
-            aria-label="pagination"
-            className="catalogue-categories-pagination"
-          />
+          <Grid
+            item
+            flexDirection={'row'}
+            sx={{ paddingTop: '18px', margin: '8px' }}
+          >
+            <Pagination
+              variant="outlined"
+              shape="rounded"
+              count={Math.ceil(
+                catalogueCategoryData?.length /
+                  preservedState.pagination.pageSize
+              )}
+              page={preservedState.pagination.pageIndex}
+              onChange={(_event, value) =>
+                onPreservedStatesChange.onPaginationChange((prevState) => ({
+                  ...prevState,
+                  pageIndex: value,
+                }))
+              }
+              size="medium"
+              color="secondary"
+              sx={{ textAlign: 'center' }}
+              aria-label="pagination"
+              className="catalogue-categories-pagination"
+            />
+          </Grid>
         </Grid>
       </Grid>
     </Grid>

From 18b58cf6f2b1c83127175ed49081b3874745efb0 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 23 Apr 2024 09:56:55 +0100
Subject: [PATCH 18/28] refactored heights to remove scroll bar #441

---
 src/catalogue/items/catalogueItemsTable.component.tsx         | 2 +-
 src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx | 2 +-
 src/items/itemsTable.component.tsx                            | 2 +-
 src/manufacturer/manufacturer.component.tsx                   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/catalogue/items/catalogueItemsTable.component.tsx b/src/catalogue/items/catalogueItemsTable.component.tsx
index f1d1f416d..bbceacdd9 100644
--- a/src/catalogue/items/catalogueItemsTable.component.tsx
+++ b/src/catalogue/items/catalogueItemsTable.component.tsx
@@ -159,7 +159,7 @@ const CatalogueItemsTable = (props: CatalogueItemsTableProps) => {
     requestOrigin,
   } = props;
   // Breadcrumbs + Mui table V2 + extra
-  const tableHeight = getPageHeightCalc('50px + 110px + 32px');
+  const tableHeight = getPageHeightCalc('50px + 110px + 48px');
 
   const { data: catalogueItemsData, isLoading: isLoadingCatalogueItems } =
     useCatalogueItems(parentInfo.id);
diff --git a/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx b/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx
index d8531ee45..a0816798c 100644
--- a/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx
+++ b/src/catalogue/items/obsoleteCatalogueItemDialog.component.tsx
@@ -293,7 +293,7 @@ const ObsoleteCatalogueItemDialog = (
   return (
     <Dialog
       open={open}
-      PaperProps={{ sx: { height: '720px' } }}
+      PaperProps={{ sx: { height: '780px' } }}
       fullWidth
       maxWidth="xl"
     >
diff --git a/src/items/itemsTable.component.tsx b/src/items/itemsTable.component.tsx
index 0cbc59c2c..ffc5d8560 100644
--- a/src/items/itemsTable.component.tsx
+++ b/src/items/itemsTable.component.tsx
@@ -65,7 +65,7 @@ export function ItemsTable(props: ItemTableProps) {
   >('create');
 
   // Breadcrumbs + Mui table V2 + extra
-  const tableHeight = getPageHeightCalc('50px + 110px + 32px');
+  const tableHeight = getPageHeightCalc('50px + 110px + 48px');
   const columns = React.useMemo<MRT_ColumnDef<Item>[]>(() => {
     const viewCatalogueItemProperties =
       catalogueCategory?.catalogue_item_properties ?? [];
diff --git a/src/manufacturer/manufacturer.component.tsx b/src/manufacturer/manufacturer.component.tsx
index 653012218..bc2d44ca1 100644
--- a/src/manufacturer/manufacturer.component.tsx
+++ b/src/manufacturer/manufacturer.component.tsx
@@ -39,7 +39,7 @@ function ManufacturerComponent() {
     Manufacturer | undefined
   >(undefined);
 
-  const tableHeight = getPageHeightCalc('192px');
+  const tableHeight = getPageHeightCalc('50px + 110px + 48px');
 
   const [maufacturerDialogType, setMaufacturerDialogType] = React.useState<
     'edit' | 'create'

From e3b15f48a114d87a8f9e3902dd281bf125af188a Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 23 Apr 2024 10:12:32 +0100
Subject: [PATCH 19/28] updated snapshots #441

---
 .../__snapshots__/catalogueItemsTable.component.test.tsx.snap | 2 +-
 src/items/__snapshots__/itemsTable.component.test.tsx.snap    | 4 ++--
 .../__snapshots__/manufacturer.component.test.tsx.snap        | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
index 95425bb93..c1973fce6 100644
--- a/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
+++ b/src/catalogue/items/__snapshots__/catalogueItemsTable.component.test.tsx.snap
@@ -840,7 +840,7 @@ exports[`Catalogue Items Table > renders the dense table correctly 1`] = `
               class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <div
-                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-1a4m6ib-MuiPaper-root-MuiAlert-root"
+                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorInfo MuiAlert-standardInfo MuiAlert-standard css-10y3752-MuiPaper-root-MuiAlert-root"
                 role="alert"
               >
                 <div
diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index 43fa548f5..d00ddb0b4 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -242,7 +242,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
         </div>
       </div>
       <div
-        class="MuiTableContainer-root css-d4d85z-MuiTableContainer-root"
+        class="MuiTableContainer-root css-15zpm7g-MuiTableContainer-root"
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"
@@ -1661,7 +1661,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
         </div>
       </div>
       <div
-        class="MuiTableContainer-root css-d4d85z-MuiTableContainer-root"
+        class="MuiTableContainer-root css-15zpm7g-MuiTableContainer-root"
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"
diff --git a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
index 5c6f60694..4c9f607ef 100644
--- a/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
+++ b/src/manufacturer/__snapshots__/manufacturer.component.test.tsx.snap
@@ -253,7 +253,7 @@ exports[`Manufacturer > renders table data correctly 1`] = `
         </div>
       </div>
       <div
-        class="MuiTableContainer-root css-1ujn6lp-MuiTableContainer-root"
+        class="MuiTableContainer-root css-15zpm7g-MuiTableContainer-root"
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"

From 6bc27c310cc3ddade1a13e56a95a30b5da966707 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 30 Apr 2024 13:47:56 +0100
Subject: [PATCH 20/28] update snapshot anf fixed warnings

---
 src/items/__snapshots__/itemsTable.component.test.tsx.snap | 2 +-
 src/items/itemsDetailsPanel.component.tsx                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index 697971876..faaedd94a 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -246,7 +246,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"
-          style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-serial_number-size: 250; --col-serial_number-size: 250; --header-modified_time-size: 350; --col-modified_time-size: 350; --header-asset_number-size: 250; --col-asset_number-size: 250; --header-purchase_order_number-size: 350; --col-purchase_order_number-size: 350; --header-warranty_end_date-size: 350; --col-warranty_end_date-size: 350; --header-delivered_date-size: 350; --col-delivered_date-size: 350; --header-is_defective-size: 200; --col-is_defective-size: 200; --header-usage_status-size: 200; --col-usage_status-size: 200; --header-notes-size: 250; --col-notes-size: 250; --header-system_id-size: 250; --col-system_id-size: 250; --header-row_catalogueItem_properties_1-size: 250; --col-row_catalogueItem_properties_1-size: 250; --header-row_catalogueItem_properties_2-size: 250; --col-row_catalogueItem_properties_2-size: 250; --header-row_catalogueItem_properties_3-size: 250; --col-row_catalogueItem_properties_3-size: 250; --header-row_catalogueItem_properties_4-size: 250; --col-row_catalogueItem_properties_4-size: 250; --header-row_catalogueItem_properties_5-size: 250; --col-row_catalogueItem_properties_5-size: 250; --header-row_catalogueItem_properties_6-size: 250; --col-row_catalogueItem_properties_6-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
+          style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-serial_number-size: 250; --col-serial_number-size: 250; --header-modified_time-size: 350; --col-modified_time-size: 350; --header-asset_number-size: 250; --col-asset_number-size: 250; --header-purchase_order_number-size: 350; --col-purchase_order_number-size: 350; --header-warranty_end_date-size: 350; --col-warranty_end_date-size: 350; --header-delivered_date-size: 350; --col-delivered_date-size: 350; --header-is_defective-size: 200; --col-is_defective-size: 200; --header-usage_status-size: 200; --col-usage_status-size: 200; --header-notes-size: 250; --col-notes-size: 250; --header-system_name-size: 250; --col-system_name-size: 250; --header-row_catalogueItem_properties_1-size: 250; --col-row_catalogueItem_properties_1-size: 250; --header-row_catalogueItem_properties_2-size: 250; --col-row_catalogueItem_properties_2-size: 250; --header-row_catalogueItem_properties_3-size: 250; --col-row_catalogueItem_properties_3-size: 250; --header-row_catalogueItem_properties_4-size: 250; --col-row_catalogueItem_properties_4-size: 250; --header-row_catalogueItem_properties_5-size: 250; --col-row_catalogueItem_properties_5-size: 250; --header-row_catalogueItem_properties_6-size: 250; --col-row_catalogueItem_properties_6-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
         >
           <thead
             class="MuiTableHead-root css-q4cnup-MuiTableHead-root"
diff --git a/src/items/itemsDetailsPanel.component.tsx b/src/items/itemsDetailsPanel.component.tsx
index 8b684535c..2a04c4116 100644
--- a/src/items/itemsDetailsPanel.component.tsx
+++ b/src/items/itemsDetailsPanel.component.tsx
@@ -175,13 +175,13 @@ function ItemsDetailsPanel(props: ItemsDetailsPanelProps) {
 
         <TabPanel value={tabValue} index={2}>
           <Grid item container spacing={0}>
-            <Grid item xs={12} sm={6} key={0}>
+            <Grid item xs={12} sm={6} key={9}>
               <Typography color="text.primary">Manufacturer Name</Typography>
               <Typography color="text.secondary">
                 {manufacturerData?.name}
               </Typography>
             </Grid>
-            <Grid item xs={12} sm={6} key={1}>
+            <Grid item xs={12} sm={6} key={10}>
               <Typography color="text.primary">Manufacturer URL</Typography>
               <Typography color="text.secondary">
                 {manufacturerData?.url ? (

From 13ca1c97588ed28be3f1c0c67391779e4de71420 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 30 Apr 2024 13:51:54 +0100
Subject: [PATCH 21/28] undo last commit (was on wrong branch)

---
 src/items/__snapshots__/itemsTable.component.test.tsx.snap | 2 +-
 src/items/itemsDetailsPanel.component.tsx                  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index faaedd94a..697971876 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -246,7 +246,7 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"
-          style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-serial_number-size: 250; --col-serial_number-size: 250; --header-modified_time-size: 350; --col-modified_time-size: 350; --header-asset_number-size: 250; --col-asset_number-size: 250; --header-purchase_order_number-size: 350; --col-purchase_order_number-size: 350; --header-warranty_end_date-size: 350; --col-warranty_end_date-size: 350; --header-delivered_date-size: 350; --col-delivered_date-size: 350; --header-is_defective-size: 200; --col-is_defective-size: 200; --header-usage_status-size: 200; --col-usage_status-size: 200; --header-notes-size: 250; --col-notes-size: 250; --header-system_name-size: 250; --col-system_name-size: 250; --header-row_catalogueItem_properties_1-size: 250; --col-row_catalogueItem_properties_1-size: 250; --header-row_catalogueItem_properties_2-size: 250; --col-row_catalogueItem_properties_2-size: 250; --header-row_catalogueItem_properties_3-size: 250; --col-row_catalogueItem_properties_3-size: 250; --header-row_catalogueItem_properties_4-size: 250; --col-row_catalogueItem_properties_4-size: 250; --header-row_catalogueItem_properties_5-size: 250; --col-row_catalogueItem_properties_5-size: 250; --header-row_catalogueItem_properties_6-size: 250; --col-row_catalogueItem_properties_6-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
+          style="--header-mrt_row_actions-size: 70; --col-mrt_row_actions-size: 70; --header-serial_number-size: 250; --col-serial_number-size: 250; --header-modified_time-size: 350; --col-modified_time-size: 350; --header-asset_number-size: 250; --col-asset_number-size: 250; --header-purchase_order_number-size: 350; --col-purchase_order_number-size: 350; --header-warranty_end_date-size: 350; --col-warranty_end_date-size: 350; --header-delivered_date-size: 350; --col-delivered_date-size: 350; --header-is_defective-size: 200; --col-is_defective-size: 200; --header-usage_status-size: 200; --col-usage_status-size: 200; --header-notes-size: 250; --col-notes-size: 250; --header-system_id-size: 250; --col-system_id-size: 250; --header-row_catalogueItem_properties_1-size: 250; --col-row_catalogueItem_properties_1-size: 250; --header-row_catalogueItem_properties_2-size: 250; --col-row_catalogueItem_properties_2-size: 250; --header-row_catalogueItem_properties_3-size: 250; --col-row_catalogueItem_properties_3-size: 250; --header-row_catalogueItem_properties_4-size: 250; --col-row_catalogueItem_properties_4-size: 250; --header-row_catalogueItem_properties_5-size: 250; --col-row_catalogueItem_properties_5-size: 250; --header-row_catalogueItem_properties_6-size: 250; --col-row_catalogueItem_properties_6-size: 250; --header-mrt_row_spacer-size: 40; --col-mrt_row_spacer-size: 40;"
         >
           <thead
             class="MuiTableHead-root css-q4cnup-MuiTableHead-root"
diff --git a/src/items/itemsDetailsPanel.component.tsx b/src/items/itemsDetailsPanel.component.tsx
index 2a04c4116..257b8ffa5 100644
--- a/src/items/itemsDetailsPanel.component.tsx
+++ b/src/items/itemsDetailsPanel.component.tsx
@@ -173,7 +173,7 @@ function ItemsDetailsPanel(props: ItemsDetailsPanelProps) {
           </Grid>
         </TabPanel>
 
-        <TabPanel value={tabValue} index={2}>
+        <TabPanel value={tabValue} index={0}>
           <Grid item container spacing={0}>
             <Grid item xs={12} sm={6} key={9}>
               <Typography color="text.primary">Manufacturer Name</Typography>
@@ -181,7 +181,7 @@ function ItemsDetailsPanel(props: ItemsDetailsPanelProps) {
                 {manufacturerData?.name}
               </Typography>
             </Grid>
-            <Grid item xs={12} sm={6} key={10}>
+            <Grid item xs={12} sm={6} key={1}>
               <Typography color="text.primary">Manufacturer URL</Typography>
               <Typography color="text.secondary">
                 {manufacturerData?.url ? (

From dade98024b209f818e8afb0e633fdff5fd86a3c4 Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Tue, 30 Apr 2024 14:05:25 +0100
Subject: [PATCH 22/28] fixed tests

---
 src/items/itemsDetailsPanel.component.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/items/itemsDetailsPanel.component.tsx b/src/items/itemsDetailsPanel.component.tsx
index 257b8ffa5..8b684535c 100644
--- a/src/items/itemsDetailsPanel.component.tsx
+++ b/src/items/itemsDetailsPanel.component.tsx
@@ -173,9 +173,9 @@ function ItemsDetailsPanel(props: ItemsDetailsPanelProps) {
           </Grid>
         </TabPanel>
 
-        <TabPanel value={tabValue} index={0}>
+        <TabPanel value={tabValue} index={2}>
           <Grid item container spacing={0}>
-            <Grid item xs={12} sm={6} key={9}>
+            <Grid item xs={12} sm={6} key={0}>
               <Typography color="text.primary">Manufacturer Name</Typography>
               <Typography color="text.secondary">
                 {manufacturerData?.name}

From d840f8b116fbbcaed08d5fa9657569e2ff62befc Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Wed, 15 May 2024 14:03:35 +0100
Subject: [PATCH 23/28] fixed row totals moving when descreasing screen width

---
 src/catalogue/category/catalogueCardView.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/catalogue/category/catalogueCardView.component.tsx b/src/catalogue/category/catalogueCardView.component.tsx
index 5ef79ef6d..95d75aff0 100644
--- a/src/catalogue/category/catalogueCardView.component.tsx
+++ b/src/catalogue/category/catalogueCardView.component.tsx
@@ -51,7 +51,7 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
     endIndex
   );
 
-  const cardViewHeight = getPageHeightCalc('100px');
+  const cardViewHeight = getPageHeightCalc('0px');
   const cardViewCardsHeight = getPageHeightCalc('100px + 72px');
 
   return (

From 78dd7ff4a9513ea38845d1de2c3d6d6a901b99dc Mon Sep 17 00:00:00 2001
From: Matteo Guarnaccia <matteo.guarnaccia@stfc.ac.uk>
Date: Wed, 15 May 2024 14:33:36 +0100
Subject: [PATCH 24/28] update snapshots

---
 .../itemsTable.component.test.tsx.snap        | 82 +------------------
 1 file changed, 2 insertions(+), 80 deletions(-)

diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index faaedd94a..1df1f913d 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -214,35 +214,9 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
             </div>
           </div>
         </div>
-        <div
-          class="MuiCollapse-root MuiCollapse-vertical css-1xe2rkg-MuiCollapse-root"
-          style="min-height: 0px; height: 0px; transition-duration: 300ms;"
-        >
-          <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
-          >
-            <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
-            >
-              <span
-                aria-busy="true"
-                aria-label="Loading"
-                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate css-qprkun-MuiLinearProgress-root"
-                role="progressbar"
-              >
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
-                />
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
-                />
-              </span>
-            </div>
-          </div>
-        </div>
       </div>
       <div
-        class="MuiTableContainer-root css-15zpm7g-MuiTableContainer-root"
+        class="MuiTableContainer-root css-d4d85z-MuiTableContainer-root"
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"
@@ -1256,32 +1230,6 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
       <div
         class="MuiBox-root css-10gei56"
       >
-        <div
-          class="MuiCollapse-root MuiCollapse-vertical css-nly5v0-MuiCollapse-root"
-          style="min-height: 0px; height: 0px; transition-duration: 300ms;"
-        >
-          <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
-          >
-            <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
-            >
-              <span
-                aria-busy="true"
-                aria-label="Loading"
-                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate css-qprkun-MuiLinearProgress-root"
-                role="progressbar"
-              >
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
-                />
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
-                />
-              </span>
-            </div>
-          </div>
-        </div>
         <div
           class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
@@ -1661,7 +1609,7 @@ exports[`Items Table > renders correctly part 2 due column virtualisation 1`] =
         </div>
       </div>
       <div
-        class="MuiTableContainer-root css-15zpm7g-MuiTableContainer-root"
+        class="MuiTableContainer-root css-d4d85z-MuiTableContainer-root"
       >
         <table
           class="MuiTable-root MuiTable-stickyHeader css-ts728e-MuiTable-root"
@@ -4196,32 +4144,6 @@ exports[`Items Table > renders the dense table correctly 1`] = `
       <div
         class="MuiBox-root css-10gei56"
       >
-        <div
-          class="MuiCollapse-root MuiCollapse-vertical css-nly5v0-MuiCollapse-root"
-          style="min-height: 0px; height: 0px; transition-duration: 300ms;"
-        >
-          <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
-          >
-            <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
-            >
-              <span
-                aria-busy="true"
-                aria-label="Loading"
-                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate css-qprkun-MuiLinearProgress-root"
-                role="progressbar"
-              >
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
-                />
-                <span
-                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
-                />
-              </span>
-            </div>
-          </div>
-        </div>
         <div
           class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"

From 5b59b63eef4986dbe9bf8ae3e6fda6f01ff6e829 Mon Sep 17 00:00:00 2001
From: MatteoGuarnaccia5 <matteo.guarnaccia@stfc.ac.uk>
Date: Wed, 15 May 2024 15:05:46 +0000
Subject: [PATCH 25/28] update snapshot

---
 .../itemsTable.component.test.tsx.snap        | 48 ++++++++++++++-----
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index 1df1f913d..0f05e20ee 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -3013,7 +3013,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                             aria-label="Filter by Serial Number"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":rjr:"
+                            id=":r3:"
                             placeholder="Filter by Serial Number"
                             title="Filter by Serial Number"
                             type="text"
@@ -3154,7 +3154,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rjv:"
+                              id=":r7:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3199,7 +3199,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk1:"
+                              id=":r9:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3338,7 +3338,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk5:"
+                              id=":rd:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3383,7 +3383,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk7:"
+                              id=":rf:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3522,7 +3522,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rkb:"
+                              id=":rj:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3567,7 +3567,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rkd:"
+                              id=":rl:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3699,13 +3699,13 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                           class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-953pxc-MuiInputBase-root-MuiInput-root"
                         >
                           <div
-                            aria-controls=":rki:"
+                            aria-controls=":rq:"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Filter by Is Defective"
-                            aria-labelledby=":rkh:"
+                            aria-labelledby=":rp:"
                             class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-2jdjhv-MuiSelect-select-MuiInputBase-input-MuiInput-input"
-                            id=":rkh:"
+                            id=":rp:"
                             role="combobox"
                             tabindex="0"
                           >
@@ -4144,6 +4144,32 @@ exports[`Items Table > renders the dense table correctly 1`] = `
       <div
         class="MuiBox-root css-10gei56"
       >
+        <div
+          class="MuiCollapse-root MuiCollapse-vertical css-nly5v0-MuiCollapse-root"
+          style="min-height: 0px; height: 0px; transition-duration: 300ms;"
+        >
+          <div
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+          >
+            <div
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+            >
+              <span
+                aria-busy="true"
+                aria-label="Loading"
+                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate css-qprkun-MuiLinearProgress-root"
+                role="progressbar"
+              >
+                <span
+                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
+                />
+                <span
+                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
         <div
           class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
@@ -4202,7 +4228,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":rkk:"
+                    aria-controls=":rs:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"

From 300e47c310fa155e45e76b336c46a186532a073f Mon Sep 17 00:00:00 2001
From: MatteoGuarnaccia5 <matteo.guarnaccia@stfc.ac.uk>
Date: Thu, 16 May 2024 08:21:52 +0000
Subject: [PATCH 26/28] update snapshots #441

---
 .../itemsTable.component.test.tsx.snap        | 74 ++++++++++++++++---
 1 file changed, 63 insertions(+), 11 deletions(-)

diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index 0f05e20ee..04f77519c 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -214,6 +214,32 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
             </div>
           </div>
         </div>
+        <div
+          class="MuiCollapse-root MuiCollapse-vertical css-1xe2rkg-MuiCollapse-root"
+          style="min-height: 0px; height: 0px; transition-duration: 300ms;"
+        >
+          <div
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+          >
+            <div
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+            >
+              <span
+                aria-busy="true"
+                aria-label="Loading"
+                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate css-qprkun-MuiLinearProgress-root"
+                role="progressbar"
+              >
+                <span
+                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
+                />
+                <span
+                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         class="MuiTableContainer-root css-d4d85z-MuiTableContainer-root"
@@ -1230,6 +1256,32 @@ exports[`Items Table > renders correctly part 1 due column virtualisation 1`] =
       <div
         class="MuiBox-root css-10gei56"
       >
+        <div
+          class="MuiCollapse-root MuiCollapse-vertical css-nly5v0-MuiCollapse-root"
+          style="min-height: 0px; height: 0px; transition-duration: 300ms;"
+        >
+          <div
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+          >
+            <div
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+            >
+              <span
+                aria-busy="true"
+                aria-label="Loading"
+                class="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate css-qprkun-MuiLinearProgress-root"
+                role="progressbar"
+              >
+                <span
+                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate css-5ir5xx-MuiLinearProgress-bar1"
+                />
+                <span
+                  class="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate css-1r8wrcl-MuiLinearProgress-bar2"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
         <div
           class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
           style="min-height: 0px;"
@@ -3013,7 +3065,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                             aria-label="Filter by Serial Number"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":r3:"
+                            id=":rjr:"
                             placeholder="Filter by Serial Number"
                             title="Filter by Serial Number"
                             type="text"
@@ -3154,7 +3206,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r7:"
+                              id=":rjv:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3199,7 +3251,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":r9:"
+                              id=":rk1:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3338,7 +3390,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rd:"
+                              id=":rk5:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3383,7 +3435,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rf:"
+                              id=":rk7:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3522,7 +3574,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rj:"
+                              id=":rkb:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3567,7 +3619,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rl:"
+                              id=":rkd:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3699,13 +3751,13 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                           class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-953pxc-MuiInputBase-root-MuiInput-root"
                         >
                           <div
-                            aria-controls=":rq:"
+                            aria-controls=":rki:"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Filter by Is Defective"
-                            aria-labelledby=":rp:"
+                            aria-labelledby=":rkh:"
                             class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-2jdjhv-MuiSelect-select-MuiInputBase-input-MuiInput-input"
-                            id=":rp:"
+                            id=":rkh:"
                             role="combobox"
                             tabindex="0"
                           >
@@ -4228,7 +4280,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":rs:"
+                    aria-controls=":rkk:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"

From eb85ef9d29bd7ead4457504a38371fe4f3af712e Mon Sep 17 00:00:00 2001
From: MatteoGuarnaccia5 <matteo.guarnaccia@stfc.ac.uk>
Date: Thu, 16 May 2024 14:39:54 +0000
Subject: [PATCH 27/28] fixed bottom wrapping when decreasing screen size #441

---
 .../category/catalogueCardView.component.tsx  | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/catalogue/category/catalogueCardView.component.tsx b/src/catalogue/category/catalogueCardView.component.tsx
index 95d75aff0..e0cb0f3bf 100644
--- a/src/catalogue/category/catalogueCardView.component.tsx
+++ b/src/catalogue/category/catalogueCardView.component.tsx
@@ -51,7 +51,7 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
     endIndex
   );
 
-  const cardViewHeight = getPageHeightCalc('0px');
+  const cardViewHeight = getPageHeightCalc('100px');
   const cardViewCardsHeight = getPageHeightCalc('100px + 72px');
 
   return (
@@ -79,7 +79,14 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
         ))}
       </Grid>
 
-      <Grid container item margin={0} marginTop={'auto'}>
+      <Grid
+        container
+        item
+        margin={0}
+        marginTop={'auto'}
+        flexWrap={'nowrap'}
+        minWidth={'500px'}
+      >
         <Grid item xs={6} justifyContent={'left'} alignSelf={'center'}>
           <Typography
             sx={{ paddingTop: '16px', paddingLeft: '8px', margin: '8px' }}
@@ -95,6 +102,7 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
           justifyContent={'flex-end'}
           flexDirection={'row'}
           alignSelf={'center'}
+          flexWrap={'nowrap'}
         >
           <Grid item flexDirection={'row'}>
             <FormControl
@@ -102,15 +110,17 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
               sx={{
                 paddingTop: '16px',
                 margin: 1,
-                minWidth: '120px',
                 display: 'flex',
                 flexDirection: 'row',
+                flexWrap: 'nowrap',
               }}
             >
               <Typography
                 sx={{
                   padding: 1,
                   color: 'text.secondary',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
                 }}
               >
                 {'Categories per page'}
@@ -141,7 +151,10 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
           <Grid
             item
             flexDirection={'row'}
-            sx={{ paddingTop: '18px', margin: '8px' }}
+            sx={{
+              paddingTop: '18px',
+              margin: '8px',
+            }}
           >
             <Pagination
               variant="outlined"
@@ -159,7 +172,11 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
               }
               size="medium"
               color="secondary"
-              sx={{ textAlign: 'center' }}
+              sx={{
+                '& > .MuiPagination-ul': {
+                  flexWrap: 'nowrap',
+                },
+              }}
               aria-label="pagination"
               className="catalogue-categories-pagination"
             />

From b934dcdfe17be55c8e5dfdc3937e669d461ff34d Mon Sep 17 00:00:00 2001
From: Joel Davies <joel.davies@stfc.ac.uk>
Date: Fri, 17 May 2024 11:20:21 +0000
Subject: [PATCH 28/28] Improve small screen behaviour for categories and
 systems #441

---
 .../category/catalogueCardView.component.tsx  | 165 ++++++++----------
 src/systems/systems.component.tsx             |   7 +-
 2 files changed, 82 insertions(+), 90 deletions(-)

diff --git a/src/catalogue/category/catalogueCardView.component.tsx b/src/catalogue/category/catalogueCardView.component.tsx
index e0cb0f3bf..3dfa6a020 100644
--- a/src/catalogue/category/catalogueCardView.component.tsx
+++ b/src/catalogue/category/catalogueCardView.component.tsx
@@ -5,6 +5,8 @@ import {
   Pagination,
   Select,
   Typography,
+  useMediaQuery,
+  useTheme,
 } from '@mui/material';
 import { CatalogueCategory } from '../../app.types';
 import { usePreservedTableState } from '../../common/preservedTableState.component';
@@ -51,8 +53,13 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
     endIndex
   );
 
+  // Display total and pagination on separate lines if on a small screen
+  const theme = useTheme();
+  const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
   const cardViewHeight = getPageHeightCalc('100px');
-  const cardViewCardsHeight = getPageHeightCalc('100px + 72px');
+  const cardViewCardsHeight = getPageHeightCalc(
+    `100px + ${smallScreen ? '128px' : '72px'}`
+  );
 
   return (
     <Grid
@@ -79,108 +86,88 @@ function CatalogueCardView(props: CatalogueCardViewProps) {
         ))}
       </Grid>
 
-      <Grid
-        container
-        item
-        margin={0}
-        marginTop={'auto'}
-        flexWrap={'nowrap'}
-        minWidth={'500px'}
-      >
-        <Grid item xs={6} justifyContent={'left'} alignSelf={'center'}>
+      <Grid item container marginTop={'auto'} direction="row">
+        <Grid item xs={12} sm="auto">
           <Typography
-            sx={{ paddingTop: '16px', paddingLeft: '8px', margin: '8px' }}
+            sx={{ paddingTop: '20px', paddingLeft: '8px', margin: '8px' }}
           >
             {`Total Categories: ${catalogueCategoryData.length}`}
           </Typography>
         </Grid>
 
         <Grid
-          container
           item
-          xs={6}
-          justifyContent={'flex-end'}
-          flexDirection={'row'}
-          alignSelf={'center'}
-          flexWrap={'nowrap'}
+          flexWrap="nowrap"
+          flexDirection="row"
+          display="flex"
+          alignItems="center"
+          justifyContent="flex-end"
+          sm
         >
-          <Grid item flexDirection={'row'}>
-            <FormControl
-              variant="standard"
-              sx={{
-                paddingTop: '16px',
-                margin: 1,
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'nowrap',
-              }}
-            >
-              <Typography
-                sx={{
-                  padding: 1,
-                  color: 'text.secondary',
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                }}
-              >
-                {'Categories per page'}
-              </Typography>
-              <Select
-                disableUnderline
-                value={preservedState.pagination.pageSize}
-                inputProps={{
-                  name: 'Max Results',
-                  labelId: 'select-max-results',
-                  'aria-label': 'Categories per page',
-                }}
-                onChange={(event) =>
-                  onPreservedStatesChange.onPaginationChange({
-                    pageSize: +event.target.value,
-                    pageIndex: 1,
-                  })
-                }
-                label={'Max Results'}
-              >
-                <MenuItem value={'30'}>30</MenuItem>
-                <MenuItem value={'45'}>45</MenuItem>
-                <MenuItem value={'60'}>60</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
-
-          <Grid
-            item
-            flexDirection={'row'}
+          <FormControl
+            variant="standard"
             sx={{
-              paddingTop: '18px',
-              margin: '8px',
+              paddingTop: '16px',
+              margin: 1,
+              display: 'flex',
+              flexDirection: 'row',
             }}
           >
-            <Pagination
-              variant="outlined"
-              shape="rounded"
-              count={Math.ceil(
-                catalogueCategoryData?.length /
-                  preservedState.pagination.pageSize
-              )}
-              page={preservedState.pagination.pageIndex}
-              onChange={(_event, value) =>
-                onPreservedStatesChange.onPaginationChange((prevState) => ({
-                  ...prevState,
-                  pageIndex: value,
-                }))
-              }
-              size="medium"
-              color="secondary"
+            <Typography
               sx={{
-                '& > .MuiPagination-ul': {
-                  flexWrap: 'nowrap',
-                },
+                paddingX: 1,
+                paddingTop: 0.5,
+                color: 'text.secondary',
+                whiteSpace: 'nowrap',
               }}
-              aria-label="pagination"
-              className="catalogue-categories-pagination"
-            />
-          </Grid>
+            >
+              {'Categories per page'}
+            </Typography>
+            <Select
+              disableUnderline
+              value={preservedState.pagination.pageSize}
+              inputProps={{
+                name: 'Max Results',
+                labelId: 'select-max-results',
+                'aria-label': 'Categories per page',
+              }}
+              onChange={(event) =>
+                onPreservedStatesChange.onPaginationChange({
+                  pageSize: +event.target.value,
+                  pageIndex: 1,
+                })
+              }
+              label={'Max Results'}
+            >
+              <MenuItem value={'30'}>30</MenuItem>
+              <MenuItem value={'45'}>45</MenuItem>
+              <MenuItem value={'60'}>60</MenuItem>
+            </Select>
+          </FormControl>
+          <Pagination
+            variant="outlined"
+            shape="rounded"
+            count={Math.ceil(
+              catalogueCategoryData?.length / preservedState.pagination.pageSize
+            )}
+            page={preservedState.pagination.pageIndex}
+            onChange={(_event, value) =>
+              onPreservedStatesChange.onPaginationChange((prevState) => ({
+                ...prevState,
+                pageIndex: value,
+              }))
+            }
+            size="medium"
+            color="secondary"
+            aria-label="pagination"
+            className="catalogue-categories-pagination"
+            sx={{
+              paddingTop: 2,
+              '& > .MuiPagination-ul': {
+                flexWrap: 'nowrap',
+              },
+            }}
+          />
         </Grid>
       </Grid>
     </Grid>
diff --git a/src/systems/systems.component.tsx b/src/systems/systems.component.tsx
index 0a7351596..e0a5d0e75 100644
--- a/src/systems/systems.component.tsx
+++ b/src/systems/systems.component.tsx
@@ -455,7 +455,12 @@ function Systems() {
                     </Table>
                   </TableContainer>
                   <Box sx={{ paddingTop: '8px' }}>
-                    <Typography sx={{ paddingLeft: '8px' }}>
+                    <Typography
+                      sx={{
+                        paddingLeft: '8px',
+                        textAlign: { sm: 'center', md: 'left' },
+                      }}
+                    >
                       {subsystemsTable.getFilteredRowModel().rows.length ==
                       subsystemsData?.length
                         ? `Total Systems: ${subsystemsData.length}`