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

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())}