ui: improve table col widths and hide text showing above header

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

@@ -15,9 +15,9 @@ import {
 import { EthernetIcon, HourglassIcon, SquareArrowRightEnterIcon } from "../ui/icons"
 import { Badge } from "../ui/badge"
 import { t } from "@lingui/core/macro"
-import { $allSystemsById } from "@/lib/stores"
+import { $allSystemsById, $longestSystemNameLen } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
-import { Tooltip, TooltipContent,  TooltipTrigger } from "../ui/tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip"
 
 // Unit names and their corresponding number of seconds for converting docker status strings
 const unitSeconds = [
@@ -63,7 +63,12 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		header: ({ column }) => <HeaderButton column={column} name={t`System`} Icon={ServerIcon} />,
 		cell: ({ getValue }) => {
 			const allSystems = useStore($allSystemsById)
-			return <span className="ms-1.5 xl:w-34 block truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
+			const longestName = useStore($longestSystemNameLen)
+			return (
+				<div className="ms-1 max-w-40 truncate" style={{ width: `${longestName / 1.05}ch` }}>
+					{allSystems[getValue() as string]?.name ?? ""}
+				</div>
+			)
 		},
 	},
 	// {
@@ -82,7 +87,7 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		header: ({ column }) => <HeaderButton column={column} name={t`CPU`} Icon={CpuIcon} />,
 		cell: ({ getValue }) => {
 			const val = getValue() as number
-			return <span className="ms-1.5 tabular-nums">{`${decimalString(val, val >= 10 ? 1 : 2)}%`}</span>
+			return <span className="ms-1 tabular-nums">{`${decimalString(val, val >= 10 ? 1 : 2)}%`}</span>
 		},
 	},
 	{
@@ -94,7 +99,7 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 			const val = getValue() as number
 			const formatted = formatBytes(val, false, undefined, true)
 			return (
-				<span className="ms-1.5 tabular-nums">{`${decimalString(formatted.value, formatted.value >= 10 ? 1 : 2)} ${formatted.unit}`}</span>
+				<span className="ms-1 tabular-nums">{`${decimalString(formatted.value, formatted.value >= 10 ? 1 : 2)} ${formatted.unit}`}</span>
 			)
 		},
 	},
@@ -103,11 +108,12 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		accessorFn: (record) => record.net,
 		invertSorting: true,
 		header: ({ column }) => <HeaderButton column={column} name={t`Net`} Icon={EthernetIcon} />,
+		minSize: 112,
 		cell: ({ getValue }) => {
 			const val = getValue() as number
 			const formatted = formatBytes(val, true, undefined, false)
 			return (
-				<span className="ms-1.5 tabular-nums">{`${decimalString(formatted.value, formatted.value >= 10 ? 1 : 2)} ${formatted.unit}`}</span>
+				<div className="ms-1 tabular-nums">{`${decimalString(formatted.value, formatted.value >= 10 ? 1 : 2)} ${formatted.unit}`}</div>
 			)
 		},
 	},
@@ -116,6 +122,7 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		invertSorting: true,
 		accessorFn: (record) => record.health,
 		header: ({ column }) => <HeaderButton column={column} name={t`Health`} Icon={ShieldCheckIcon} />,
+		minSize: 121,
 		cell: ({ getValue }) => {
 			const healthValue = getValue() as number
 			const healthStatus = ContainerHealthLabels[healthValue] || "Unknown"
@@ -138,15 +145,21 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		id: "ports",
 		accessorFn: (record) => record.ports || undefined,
 		header: ({ column }) => (
-			<HeaderButton column={column} name={t({ message: "Ports", context: "Container ports" })} Icon={SquareArrowRightEnterIcon} />
+			<HeaderButton
+				column={column}
+				name={t({ message: "Ports", context: "Container ports" })}
+				Icon={SquareArrowRightEnterIcon}
+			/>
 		),
+		sortingFn: (a, b) => getPortValue(a.original.ports) - getPortValue(b.original.ports),
+		minSize: 147,
 		cell: ({ getValue }) => {
-			const val = getValue() as string
+			const val = getValue() as string | undefined
 			if (!val) {
-				return <span className="ms-2">-</span>
+				return <div className="ms-1.5 text-muted-foreground">-</div>
 			}
-			const className = "ms-1.5 w-20 block truncate tabular-nums"
-			if (val.length > 9) {
+			const className = "ms-1 w-27 block truncate tabular-nums"
+			if (val.length > 14) {
 				return (
 					<Tooltip>
 						<TooltipTrigger className={className}>{val}</TooltipTrigger>
@@ -165,7 +178,12 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 			<HeaderButton column={column} name={t({ message: "Image", context: "Docker image" })} Icon={LayersIcon} />
 		),
 		cell: ({ getValue }) => {
-			return <span className="ms-1.5 xl:w-40 block truncate">{getValue() as string}</span>
+			const val = getValue() as string
+			return (
+				<div className="ms-1 xl:w-40 truncate" title={val}>
+					{val}
+				</div>
+			)
 		},
 	},
 	{
@@ -175,7 +193,7 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		sortingFn: (a, b) => getStatusValue(a.original.status) - getStatusValue(b.original.status),
 		header: ({ column }) => <HeaderButton column={column} name={t`Status`} Icon={HourglassIcon} />,
 		cell: ({ getValue }) => {
-			return <span className="ms-1.5 w-25 block truncate">{getValue() as string}</span>
+			return <span className="ms-1 w-25 block truncate">{getValue() as string}</span>
 		},
 	},
 	{
@@ -185,7 +203,7 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		header: ({ column }) => <HeaderButton column={column} name={t`Updated`} Icon={ClockIcon} />,
 		cell: ({ getValue }) => {
 			const timestamp = getValue() as number
-			return <span className="ms-1.5 tabular-nums">{hourWithSeconds(new Date(timestamp).toISOString())}</span>
+			return <span className="ms-1 tabular-nums">{hourWithSeconds(new Date(timestamp).toISOString())}</span>
 		},
 	},
 ]
@@ -215,3 +233,17 @@ function HeaderButton({
 		</Button>
 	)
 }
+
+/**
+ * Convert port string to a number for sorting.
+ * Handles formats like "80", "127.0.0.1:80", and "80, 443" (takes the first mapping).
+ */
+function getPortValue(ports: string | undefined): number {
+	if (!ports) {
+		return 0
+	}
+	const first = ports.includes(",") ? ports.substring(0, ports.indexOf(",")) : ports
+	const colonIndex = first.lastIndexOf(":")
+	const portStr = colonIndex === -1 ? first : first.substring(colonIndex + 1)
+	return Number(portStr) || 0
+}

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

@@ -1,3 +1,4 @@
+/** biome-ignore-all lint/security/noDangerouslySetInnerHtml: html comes directly from docker via agent */
 import { t } from "@lingui/core/macro"
 import { Trans } from "@lingui/react/macro"
 import {
@@ -13,7 +14,7 @@ import {
 	type VisibilityState,
 } from "@tanstack/react-table"
 import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
-import { memo, RefObject, useEffect, useRef, useState } from "react"
+import { memo, type RefObject, useEffect, useRef, useState } from "react"
 import { Input } from "@/components/ui/input"
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { pb } from "@/lib/api"
@@ -44,6 +45,20 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 	)
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 	const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+
+	// Hide ports column if no ports are present
+	useEffect(() => {
+		if (data) {
+			const hasPorts = data.some((container) => container.ports)
+			setColumnVisibility((prev) => {
+				if (prev.ports === hasPorts) {
+					return prev
+				}
+				return { ...prev, ports: hasPorts }
+			})
+		}
+	}, [data])
+
 	const [rowSelection, setRowSelection] = useState({})
 	const [globalFilter, setGlobalFilter] = useState("")
 
@@ -67,7 +82,7 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 					setData((curItems) => {
 						const lastUpdated = Math.max(items[0].updated, items.at(-1)?.updated ?? 0)
 						const containerIds = new Set()
-						const newItems = []
+						const newItems: ContainerRecord[] = []
 						for (const item of items) {
 							if (Math.abs(lastUpdated - item.updated) < 70_000) {
 								containerIds.add(item.id)
@@ -301,9 +316,6 @@ function ContainerSheet({
 	setSheetOpen: (open: boolean) => void
 	activeContainer: RefObject<ContainerRecord | null>
 }) {
-	const container = activeContainer.current
-	if (!container) return null
-
 	const [logsDisplay, setLogsDisplay] = useState<string>("")
 	const [infoDisplay, setInfoDisplay] = useState<string>("")
 	const [logsFullscreenOpen, setLogsFullscreenOpen] = useState<boolean>(false)
@@ -311,6 +323,8 @@ function ContainerSheet({
 	const [isRefreshingLogs, setIsRefreshingLogs] = useState<boolean>(false)
 	const logsContainerRef = useRef<HTMLDivElement>(null)
 
+	const container = activeContainer.current
+
 	function scrollLogsToBottom() {
 		if (logsContainerRef.current) {
 			logsContainerRef.current.scrollTo({ top: logsContainerRef.current.scrollHeight })
@@ -318,6 +332,7 @@ function ContainerSheet({
 	}
 
 	const refreshLogs = async () => {
+		if (!container) return
 		setIsRefreshingLogs(true)
 		const startTime = Date.now()
 
@@ -349,6 +364,8 @@ function ContainerSheet({
 		})()
 	}, [container])
 
+	if (!container) return null
+
 	return (
 		<>
 			<LogsFullscreenDialog
@@ -445,11 +462,12 @@ function ContainerSheet({
 function ContainersTableHead({ table }: { table: TableType<ContainerRecord> }) {
 	return (
 		<TableHeader className="sticky top-0 z-50 w-full border-b-2">
+			<div className="absolute -top-2 left-0 w-full h-4 bg-table-header z-50"></div>
 			{table.getHeaderGroups().map((headerGroup) => (
 				<tr key={headerGroup.id}>
 					{headerGroup.headers.map((header) => {
 						return (
-							<TableHead className="px-2" key={header.id}>
+							<TableHead className="px-2" key={header.id} style={{ width: header.getSize() }}>
 								{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
 							</TableHead>
 						)
@@ -481,6 +499,7 @@ const ContainerTableRow = memo(function ContainerTableRow({
 					className="py-0 ps-4.5"
 					style={{
 						height: virtualRow.size,
+						width: cell.column.getSize(),
 					}}
 				>
 					{flexRender(cell.column.columnDef.cell, cell.getContext())}

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

@@ -40,6 +40,7 @@ import {
 	toFixedFloat,
 	formatTemperature,
 	cn,
+	getVisualStringWidth,
 	secondsToString,
 	hourWithSeconds,
 	formatShortDate,
@@ -101,7 +102,7 @@ function formatCapacity(bytes: number): string {
 
 const SMART_DEVICE_FIELDS = "id,system,name,model,state,capacity,temp,type,hours,cycles,updated"
 
-export const columns: ColumnDef<SmartDeviceRecord>[] = [
+export const createColumns = (longestName: number): ColumnDef<SmartDeviceRecord>[] => [
 	{
 		id: "system",
 		accessorFn: (record) => record.system,
@@ -114,7 +115,11 @@ export const columns: ColumnDef<SmartDeviceRecord>[] = [
 		header: ({ column }) => <HeaderButton column={column} name={t`System`} Icon={ServerIcon} />,
 		cell: ({ getValue }) => {
 			const allSystems = useStore($allSystemsById)
-			return <span className="ms-1.5 xl:w-30 block truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
+			return (
+				<div className="ms-1.5 max-w-40 block truncate" style={{ width: `${longestName / 1.05}ch` }}>
+					{allSystems[getValue() as string]?.name ?? ""}
+				</div>
+			)
 		},
 	},
 	{
@@ -275,6 +280,30 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 	const [sheetOpen, setSheetOpen] = useState(false)
 	const [rowActionState, setRowActionState] = useState<{ type: "refresh" | "delete"; id: string } | null>(null)
 	const [globalFilter, setGlobalFilter] = useState("")
+	const allSystems = useStore($allSystemsById)
+
+	// duplicate the devices to test with more rows
+	// if (smartDevices?.length && smartDevices.length < 50) {
+	// 	setSmartDevices([...smartDevices, ...smartDevices, ...smartDevices])
+	// }
+
+	// Calculate the right width for the system column based on the longest system name among the displayed devices
+	const longestName = useMemo(() => {
+		if (systemId || !smartDevices || Object.keys(allSystems).length === 0) {
+			return 0
+		}
+		let maxLen = 0
+		const seenSystems = new Set<string>()
+		for (const device of smartDevices) {
+			if (seenSystems.has(device.system)) {
+				continue
+			}
+			seenSystems.add(device.system)
+			const name = allSystems[device.system]?.name ?? ""
+			maxLen = Math.max(maxLen, getVisualStringWidth(name))
+		}
+		return maxLen
+	}, [smartDevices, systemId, allSystems])
 
 	const openSheet = (disk: SmartDeviceRecord) => {
 		setActiveDiskId(disk.id)
@@ -440,9 +469,10 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 
 	// Filter columns based on whether systemId is provided
 	const tableColumns = useMemo(() => {
+		const columns = createColumns(longestName)
 		const baseColumns = systemId ? columns.filter((col) => col.id !== "system") : columns
 		return [...baseColumns, actionColumn]
-	}, [systemId, actionColumn])
+	}, [systemId, actionColumn, longestName])
 
 	const table = useReactTable({
 		data: smartDevices || ([] as SmartDeviceRecord[]),
@@ -513,7 +543,7 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 						</div>
 					</div>
 				</CardHeader>
-				<div className="rounded-md border text-nowrap">
+				<div className="rounded-md border text-nowrap overflow-hidden">
 					<Table>
 						<TableHeader>
 							{table.getHeaderGroups().map((headerGroup) => (

internal/site/src/components/systemd-table/systemd-table.tsx

@@ -46,7 +46,6 @@ export default function SystemdTable({ systemId }: { systemId?: string }) {
 		return setData([])
 	}, [systemId])
 
-
 	useEffect(() => {
 		const lastUpdated = data[0]?.updated ?? 0
 
@@ -360,15 +359,9 @@ function SystemdSheet({
 		return (
 			<>
 				{hasCurrent ? current : notAvailable}
-				{hasMax && (
-					<span className="text-muted-foreground ms-1.5">
-						{`(${t`limit`}: ${max})`}
-					</span>
-				)}
+				{hasMax && <span className="text-muted-foreground ms-1.5">{`(${t`limit`}: ${max})`}</span>}
 				{max === null && (
-					<span className="text-muted-foreground ms-1.5">
-						{`(${t`limit`}: ${t`Unlimited`.toLowerCase()})`}
-					</span>
+					<span className="text-muted-foreground ms-1.5">{`(${t`limit`}: ${t`Unlimited`.toLowerCase()})`}</span>
 				)}
 			</>
 		)
@@ -435,7 +428,7 @@ function SystemdSheet({
 			</tr>
 		)
 	}
-	
+
 	const capitalize = (str: string) => `${str.charAt(0).toUpperCase()}${str.slice(1).toLowerCase()}`
 
 	return (
@@ -621,6 +614,7 @@ function SystemdSheet({
 function SystemdTableHead({ table }: { table: TableType<SystemdRecord> }) {
 	return (
 		<TableHeader className="sticky top-0 z-50 w-full border-b-2">
+			<div className="absolute -top-2 left-0 w-full h-4 bg-table-header z-50"></div>
 			{table.getHeaderGroups().map((headerGroup) => (
 				<tr key={headerGroup.id}>
 					{headerGroup.headers.map((header) => {

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

@@ -391,6 +391,7 @@ function SystemsTableHead({ table }: { table: TableType<SystemRecord> }) {
 	const { t } = useLingui()
 	return (
 		<TableHeader className="sticky top-0 z-50 w-full border-b-2">
+			<div className="absolute -top-2 left-0 w-full h-4 bg-table-header z-50"></div>
 			{table.getHeaderGroups().map((headerGroup) => (
 				<tr key={headerGroup.id}>
 					{headerGroup.headers.map((header) => {