refactor: small style improvements

beszel/site/src/components/systems-table/systems-table-columns.tsx

@@ -72,7 +72,8 @@ const STATUS_COLORS = {
 export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<SystemRecord>[] {
 	return [
 		{
-			size: 200,
+			// size: 200,
+			size: 100,
 			minSize: 0,
 			accessorKey: "name",
 			id: "system",
@@ -114,9 +115,10 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 				const longestName = useStore($longestSystemNameLen)
 				return (
 					<>
-						<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1 md:pe-5">
+						<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1">
 							<IndicatorDot system={info.row.original} />
-							<span className="truncate" style={{ width: `${longestName}ch` }}>
+							{/* NOTE: change to 1 ch if switching to monospace font */}
+							<span className="truncate" style={{ width: `${longestName / 1.1}ch` }}>
 								{name}
 							</span>
 						</span>

beszel/site/src/components/systems-table/systems-table.tsx

@@ -62,7 +62,11 @@ export default function SystemsTable() {
 	const [sorting, setSorting] = useState<SortingState>([{ id: "system", desc: false }])
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 	const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>("cols", {})
-	const [viewMode, setViewMode] = useLocalStorage<ViewMode>("viewMode", window.innerWidth > 1024 ? "table" : "grid")
+	const [viewMode, setViewMode] = useLocalStorage<ViewMode>(
+		"viewMode",
+		// show grid view on mobile if there are less than 200 systems (looks better but table is more efficient)
+		window.innerWidth < 1024 && data.length < 200 ? "grid" : "table"
+	)
 
 	const locale = i18n.locale
 
@@ -347,9 +351,9 @@ function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>
 
 	return useMemo(() => {
 		return (
-			<TableHeader className="sticky top-0 z-20 w-full">
+			<TableHeader className="sticky top-0 z-20 w-full border-b-2">
 				{table.getHeaderGroups().map((headerGroup) => (
-					<tr key={headerGroup.id} className="border-border/50">
+					<tr key={headerGroup.id}>
 						{headerGroup.headers.map((header) => {
 							return (
 								<TableHead className="px-1.5" key={header.id}>

beszel/site/src/index.css

@@ -21,7 +21,7 @@
 	--accent: hsl(20 23.08% 94%);
 	--accent-foreground: hsl(240 5.88% 10%);
 	--destructive: hsl(0 66% 53%);
-	--destructive-foreground: hsl(0 0% 98.04%);
+	--destructive-foreground: hsl(0 0% 97%);
 	--border: hsl(30 8.11% 85.49%);
 	--input: hsl(30 4.29% 72.55%);
 	--ring: hsl(30 3.97% 49.41%);
@@ -51,7 +51,6 @@
 	--accent: hsl(220 5% 15.5%);
 	--accent-foreground: hsl(220 2% 98%);
 	--destructive: hsl(0 62% 46%);
-	--destructive-foreground: hsl(0 0% 97%);
 	--border: hsl(220 3% 16%);
 	--input: hsl(220 4% 22%);
 	--ring: hsl(220 4% 80%);
@@ -98,6 +97,7 @@
 	--color-accent: var(--accent);
 	--color-accent-foreground: var(--accent-foreground);
 	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
 	--color-border: var(--border);
 	--color-input: var(--input);
 	--color-ring: var(--ring);

beszel/site/src/lib/api.ts

@@ -107,8 +107,10 @@ export const updateSystemList = (() => {
 				// we need to loop once to get the longest name
 				let longestName = $longestSystemNameLen.get()
 				for (const { name } of records) {
-					if (name.length > longestName) {
-						$longestSystemNameLen.set(Math.min(20, name.length))
+					const nameLen = Math.min(20, name.length)
+					if (nameLen > longestName) {
+						$longestSystemNameLen.set(nameLen)
+						longestName = nameLen
 					}
 				}
 				$systems.set(records)