Table fixes

src/components/Columns/SearchHistoryColumns.tsx

@@ -45,8 +45,11 @@ export const SearchHistoryColumns = (
 				</Box>
 			</Group>
 		),
-		size: 64,
-		maxSize: 64,
+		meta: {
+			filterVariant: 'counter',
+		},
+		size: 32,
+		maxSize: 32,
 		enableSorting: false,
 	}),
 	columnHelper.accessor('prefix', {
@@ -64,26 +67,43 @@ export const SearchHistoryColumns = (
 			if (value === null) return true;
 			return row.getValue(id) === value;
 		},
+		size: 32,
+		maxSize: 32,
 	}),
 	columnHelper.accessor('provider', {
 		id: 'provider',
-		cell: ({ cell }: any) => <Text mx={8}>{cell.getValue()}</Text>,
+		cell: ({ cell }: any) => (
+			<Text mx={8} style={{ textAlign: 'center' }}>
+				{cell.getValue()}
+			</Text>
+		),
 		header: () => <Text fw={600}>Provider</Text>,
 		meta: {
 			filterVariant: 'mantineSelect',
 		},
+		size: 128,
+		maxSize: 128,
 	}),
 	columnHelper.accessor('searchTerm', {
 		id: 'searchTerm',
 		cell: ({ cell }: any) => (
-			<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
-				{cell.getValue()}
-			</Text>
+			<Group
+				style={{
+					overflow: 'hidden',
+					whiteSpace: 'nowrap',
+					textOverflow: 'ellipsis',
+				}}
+			>
+				<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
+					{cell.getValue()}
+				</Text>
+			</Group>
 		),
 		header: () => <Text fw={600}>Search String</Text>,
 		meta: {
 			filterVariant: 'text',
 		},
+		maxSize: 1920,
 	}),
 	columnHelper.accessor('dateTimeStamp', {
 		id: 'dateTimeStamp',
@@ -115,5 +135,7 @@ export const SearchHistoryColumns = (
 			}
 			return true;
 		},
+		size: 132,
+		maxSize: 132,
 	}),
 ];