updates

internal/site/src/components/containers-table/containers-table-columns.tsx

@@ -15,7 +15,7 @@ import {
 import { EthernetIcon, HourglassIcon, SquareArrowRightEnterIcon } from "../ui/icons"
 import { Badge } from "../ui/badge"
 import { t } from "@lingui/core/macro"
-import { $allSystemsById, $longestSystemNameLen } from "@/lib/stores"
+import { $allSystemsById, $longestSystemName } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
 
@@ -63,10 +63,13 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		header: ({ column }) => <HeaderButton column={column} name={t`System`} Icon={ServerIcon} />,
 		cell: ({ getValue }) => {
 			const allSystems = useStore($allSystemsById)
-			const longestName = useStore($longestSystemNameLen)
+			const longestName = useStore($longestSystemName)
 			return (
-				<div className="ms-1 max-w-40 truncate" style={{ width: `${longestName / 1.05}ch` }}>
-					{allSystems[getValue() as string]?.name ?? ""}
+				<div className="ms-1 relative w-fit max-w-40">
+					<span className="invisible block whitespace-nowrap" aria-hidden="true">
+						{longestName}
+					</span>
+					<span className="absolute inset-0 truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
 				</div>
 			)
 		},

internal/site/src/components/network-probes-table/network-probes-columns.tsx

@@ -26,7 +26,7 @@ import {
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Trans } from "@lingui/react/macro"
-import { $allSystemsById } from "@/lib/stores"
+import { $allSystemsById, $longestSystemName } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 import { SystemStatus } from "@/lib/enums"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -52,8 +52,8 @@ const isMuted = (record: NetworkProbeRecord, systemRecord: SystemRecord | undefi
 	!record.enabled || systemRecord?.status !== SystemStatus.Up
 
 export function getProbeColumns(
-	longestName = 0,
-	longestTarget = 0,
+	longestName = "",
+	longestTarget = "",
 	{
 		onEdit,
 		onDelete,
@@ -94,10 +94,13 @@ export function getProbeColumns(
 			cell: ({ row, getValue }) => {
 				const probe = row.original
 				return (
-					<div className="ms-1.5 max-w-40 flex gap-2 items-center truncate tabular-nums">
+					<div className="ms-1.5 max-w-40 flex gap-2 items-center tabular-nums">
 						<span className={cn("shrink-0 size-2 rounded-full", probe.enabled ? "bg-green-500" : "bg-primary/40")} />
-						<div className="block" style={{ width: `${longestName / 1.05}ch` }}>
-							{getValue() as string}
+						<div className="relative w-fit min-w-0 max-w-full">
+							<span className="invisible block overflow-hidden whitespace-nowrap" aria-hidden="true">
+								{longestName}
+							</span>
+							<span className="absolute inset-0 truncate">{getValue() as string}</span>
 						</div>
 					</div>
 				)
@@ -115,15 +118,21 @@ export function getProbeColumns(
 			header: ({ column }) => <HeaderButton column={column} name={t`System`} Icon={ServerIcon} />,
 			cell: ({ getValue }) => {
 				const system = useStore($allSystemsById)[getValue() as string] as SystemRecord | undefined
+				const longestSystemName = useStore($longestSystemName)
 				const name = system?.name
 				const status = system?.status as SystemStatus // undefined val is fine but makes lsp mad
 
 				return useMemo(
 					() => (
-						<span className="ms-1.5 xl:w-20 truncate flex items-center gap-2">
+						<div className="ms-1.5 max-w-44 flex gap-2 items-center tabular-nums">
 							<span className={cn("shrink-0 size-2 rounded-full", SYSTEM_STATUS_COLORS[status])} />
-							{name}
-						</span>
+							<div className="relative w-fit min-w-0 max-w-full">
+								<span className="invisible block whitespace-nowrap" aria-hidden="true">
+									{longestSystemName}
+								</span>
+								<span className="absolute inset-0 truncate">{name}</span>
+							</div>
+						</div>
 					),
 					[status, name]
 				)
@@ -135,8 +144,11 @@ export function getProbeColumns(
 			accessorFn: (record) => record.target,
 			header: ({ column }) => <HeaderButton column={column} name={t`Target`} Icon={GlobeIcon} />,
 			cell: ({ getValue }) => (
-				<div className="ms-1.5 tabular-nums block truncate max-w-44" style={{ width: `${longestTarget / 1.05}ch` }}>
-					{getValue() as string}
+				<div className="ms-1.5 relative w-fit max-w-44 tabular-nums">
+					<span className="invisible block whitespace-nowrap" aria-hidden="true">
+						{longestTarget}
+					</span>
+					<span className="absolute inset-0 truncate">{getValue() as string}</span>
 				</div>
 			),
 		},

internal/site/src/components/network-probes-table/network-probes-table.tsx

@@ -34,7 +34,7 @@ import { useToast } from "@/components/ui/use-toast"
 import { isReadOnlyUser } from "@/lib/api"
 import { pb } from "@/lib/api"
 import { $allSystemsById } from "@/lib/stores"
-import { cn, getVisualStringWidth, useBrowserStorage } from "@/lib/utils"
+import { cn, useBrowserStorage } from "@/lib/utils"
 import type { NetworkProbeRecord } from "@/types"
 import { AddProbeDialog, EditProbeDialog } from "./probe-dialog"
 import { XIcon } from "lucide-react"
@@ -61,14 +61,19 @@ export default function NetworkProbesTableNew({
 	const { toast } = useToast()
 	const canManageProbes = !isReadOnlyUser()
 
-	const { longestName, longestTarget } = useMemo(() => {
-		let longestName = 0
-		let longestTarget = 0
+	const [longestName, longestTarget] = useMemo(() => {
+		let longestName = ""
+		let longestTarget = ""
 		for (const p of probes) {
-			longestName = Math.max(longestName, getVisualStringWidth(p.name || p.target))
-			longestTarget = Math.max(longestTarget, getVisualStringWidth(p.target))
+			const name = p.name || p.target
+			if (name.length > longestName.length) {
+				longestName = name
+			}
+			if (p.target.length > longestTarget.length) {
+				longestTarget = p.target
+			}
 		}
-		return { longestName, longestTarget }
+		return [longestName, longestTarget]
 	}, [probes])
 
 	const runProbeBatch = useCallback(
@@ -77,8 +82,7 @@ export default function NetworkProbesTableNew({
 			let inBatch = 0
 			for (const id of ids) {
 				enqueue(batch, id)
-				inBatch++
-				if (inBatch >= 20) {
+				if (++inBatch >= 20) {
 					await batch.send()
 					batch = pb.createBatch()
 					inBatch = 0

internal/site/src/components/routes/system/charts/probes-charts.tsx

@@ -90,6 +90,7 @@ function ProbeChart({
 			grid={grid}
 		>
 			<LineChartDefault
+				truncate
 				chartData={chartData}
 				customData={filteredProbeStats}
 				dataPoints={dataPoints}

internal/site/src/components/routes/system/smart-table.tsx

@@ -43,7 +43,6 @@ import {
 	toFixedFloat,
 	formatTemperature,
 	cn,
-	getVisualStringWidth,
 	secondsToString,
 	hourWithSeconds,
 	formatShortDate,
@@ -106,9 +105,9 @@ function formatCapacity(bytes: number): string {
 const SMART_DEVICE_FIELDS = "id,system,name,model,state,capacity,temp,type,hours,cycles,updated"
 
 export const createColumns = (
-	longestName: number,
-	longestModel: number,
-	longestDevice: number
+	longestName: string,
+	longestModel: string,
+	longestDevice: string
 ): ColumnDef<SmartDeviceRecord>[] => [
 	{
 		id: "system",
@@ -123,8 +122,11 @@ export const createColumns = (
 		cell: ({ getValue }) => {
 			const allSystems = useStore($allSystemsById)
 			return (
-				<div className="ms-1.5 max-w-40 block truncate" style={{ width: `${longestName / 1.05}ch` }}>
-					{allSystems[getValue() as string]?.name ?? ""}
+				<div className="ms-1.5 relative w-fit max-w-44">
+					<span className="invisible block whitespace-nowrap" aria-hidden="true">
+						{longestName}
+					</span>
+					<span className="absolute inset-0 truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
 				</div>
 			)
 		},
@@ -134,12 +136,11 @@ export const createColumns = (
 		sortingFn: (a, b) => a.original.name.localeCompare(b.original.name),
 		header: ({ column }) => <HeaderButton column={column} name={t`Device`} Icon={HardDrive} />,
 		cell: ({ getValue }) => (
-			<div
-				className="font-medium max-w-40 truncate ms-1"
-				title={getValue() as string}
-				style={{ width: `${longestDevice / 1.05}ch` }}
-			>
-				{getValue() as string}
+			<div className="font-medium ms-1 relative w-fit max-w-44" title={getValue() as string}>
+				<span className="invisible block whitespace-nowrap" aria-hidden="true">
+					{longestDevice}
+				</span>
+				<span className="absolute inset-0 truncate">{getValue() as string}</span>
 			</div>
 		),
 	},
@@ -150,12 +151,11 @@ export const createColumns = (
 			<HeaderButton column={column} name={t({ message: "Model", comment: "Device model" })} Icon={Box} />
 		),
 		cell: ({ getValue }) => (
-			<div
-				className="max-w-48 truncate ms-1"
-				title={getValue() as string}
-				style={{ width: `${longestModel / 1.05}ch` }}
-			>
-				{getValue() as string}
+			<div className="ms-1 relative w-fit max-w-44" title={getValue() as string}>
+				<span className="invisible block whitespace-nowrap" aria-hidden="true">
+					{longestModel}
+				</span>
+				<span className="absolute inset-0 truncate">{getValue() as string}</span>
 			</div>
 		),
 	},
@@ -309,7 +309,7 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 
 	// Calculate the right width for the columns based on the longest strings among the displayed devices
 	const { longestName, longestModel, longestDevice } = useMemo(() => {
-		const result = { longestName: 0, longestModel: 0, longestDevice: 0 }
+		const result = { longestName: "", longestModel: "", longestDevice: "" }
 		if (!smartDevices || Object.keys(allSystems).length === 0) {
 			return result
 		}
@@ -318,10 +318,16 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 			if (!systemId && !seenSystems.has(device.system)) {
 				seenSystems.add(device.system)
 				const name = allSystems[device.system]?.name ?? ""
-				result.longestName = Math.max(result.longestName, getVisualStringWidth(name))
+				if (name.length > result.longestName.length) {
+					result.longestName = name
+				}
+			}
+			if ((device.model ?? "").length > result.longestModel.length) {
+				result.longestModel = device.model ?? ""
+			}
+			if ((device.name ?? "").length > result.longestDevice.length) {
+				result.longestDevice = device.name ?? ""
 			}
-			result.longestModel = Math.max(result.longestModel, getVisualStringWidth(device.model ?? ""))
-			result.longestDevice = Math.max(result.longestDevice, getVisualStringWidth(device.name ?? ""))
 		}
 		return result
 	}, [smartDevices, systemId, allSystems])

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

@@ -26,7 +26,7 @@ import { memo, useMemo, useRef, useState } from "react"
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
 import { isReadOnlyUser, pb } from "@/lib/api"
 import { BatteryState, ConnectionType, connectionTypeLabels, MeterState, SystemStatus } from "@/lib/enums"
-import { $longestSystemNameLen, $userSettings } from "@/lib/stores"
+import { $longestSystemName, $userSettings } from "@/lib/stores"
 import {
 	cn,
 	copyToClipboard,
@@ -135,7 +135,7 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 			Icon: ServerIcon,
 			cell: (info) => {
 				const { name, id } = info.row.original
-				const longestName = useStore($longestSystemNameLen)
+				const longestName = useStore($longestSystemName)
 				const linkUrl = getPagePath($router, "system", { id })
 
 				return (
@@ -145,8 +145,7 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 							<Link
 								href={linkUrl}
 								tabIndex={-1}
-								className="truncate z-10 relative"
-								style={{ width: `${longestName / 1.05}ch` }}
+								className="relative w-fit max-w-48 z-10"
 								onMouseEnter={(e) => {
 									// set title on hover if text is truncated to show full name
 									const a = e.currentTarget
@@ -157,7 +156,10 @@ export function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<Syste
 									}
 								}}
 							>
-								{name}
+								<span className="invisible block" aria-hidden="true">
+									{longestName}
+								</span>
+								<span className="absolute inset-0 truncate">{name}</span>
 							</Link>
 						</span>
 						<Link href={linkUrl} className="inset-0 absolute size-full" aria-label={name}></Link>

internal/site/src/lib/stores.ts

@@ -70,7 +70,5 @@ export const $copyContent = atom("")
 /** Direction for localization */
 export const $direction = atom<"ltr" | "rtl">("ltr")
 
-/** Longest system name length. Used to set table column width. I know this
- *  is stupid but the table is virtualized and I know this will work.
- */
-export const $longestSystemNameLen = atom(8)
+/** Longest system name string. Used to reserve width in virtualized tables. */
+export const $longestSystemName = atom("")

internal/site/src/lib/systemsManager.ts

@@ -5,20 +5,17 @@ import {
 	$allSystemsById,
 	$allSystemsByName,
 	$downSystems,
-	$longestSystemNameLen,
+	$longestSystemName,
 	$pausedSystems,
 	$upSystems,
 } from "@/lib/stores"
-import { getVisualStringWidth, updateFavicon } from "@/lib/utils"
+import { updateFavicon } from "@/lib/utils"
 import type { SystemRecord } from "@/types"
 import { SystemStatus } from "./enums"
 
 const COLLECTION = pb.collection<SystemRecord>("systems")
 const FIELDS_DEFAULT = "id,name,host,port,info,status"
 
-/** Maximum system name length for display purposes */
-const MAX_SYSTEM_NAME_LENGTH = 22
-
 let initialized = false
 // biome-ignore lint/suspicious/noConfusingVoidType: typescript rocks
 let unsub: (() => void) | undefined | void
@@ -72,16 +69,19 @@ export function init() {
 	})
 }
 
-/** Update the longest system name length and favicon based on system status */
-function onSystemsChanged(_: Record<string, SystemRecord>, changedSystem: SystemRecord | undefined) {
+/** Update the longest system name string and favicon based on system status */
+function onSystemsChanged(systems: Record<string, SystemRecord>, _changedSystem: SystemRecord | undefined) {
 	const downSystemsStore = $downSystems.get()
 	const downSystems = Object.values(downSystemsStore)
 
-	// Update longest system name length
-	const longestName = $longestSystemNameLen.get()
-	const nameLen = Math.min(MAX_SYSTEM_NAME_LENGTH, getVisualStringWidth(changedSystem?.name || ""))
-	if (nameLen > longestName) {
-		$longestSystemNameLen.set(nameLen)
+	let longestName = ""
+	for (const system of Object.values(systems)) {
+		if (system.name.length > longestName.length) {
+			longestName = system.name
+		}
+	}
+	if ($longestSystemName.get() !== longestName) {
+		$longestSystemName.set(longestName)
 	}
 
 	updateFavicon(downSystems.length)

internal/site/src/lib/utils.ts

@@ -443,30 +443,6 @@ export function runOnce<T extends (...args: any[]) => any>(fn: T): T {
 	}) as T
 }
 
-/** Get the visual width of a string, accounting for full-width characters */
-export function getVisualStringWidth(str: string): number {
-	let width = 0
-	for (const char of str) {
-		const code = char.codePointAt(0) || 0
-		// Hangul Jamo and Syllables are often slightly thinner than Hanzi/Kanji
-		if ((code >= 0x1100 && code <= 0x115f) || (code >= 0xac00 && code <= 0xd7af)) {
-			width += 1.8
-			continue
-		}
-		// Count CJK and other full-width characters as 2 units, others as 1
-		// Arabic and Cyrillic are counted as 1
-		const isFullWidth =
-			(code >= 0x2e80 && code <= 0x9fff) || // CJK Radicals, Symbols, and Ideographs
-			(code >= 0xf900 && code <= 0xfaff) || // CJK Compatibility Ideographs
-			(code >= 0xfe30 && code <= 0xfe6f) || // CJK Compatibility Forms
-			(code >= 0xff00 && code <= 0xff60) || // Fullwidth Forms
-			(code >= 0xffe0 && code <= 0xffe6) || // Fullwidth Symbols
-			code > 0xffff // Emojis and other supplementary plane characters
-		width += isFullWidth ? 2 : 1
-	}
-	return width
-}
-
 /** Format seconds to hours, minutes, or seconds */
 export function secondsToString(seconds: number, unit: "hour" | "minute" | "day"): string {
 	const count = Math.floor(seconds / (unit === "hour" ? 3600 : unit === "minute" ? 60 : 86400))