small frontend refactoring / style updates

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

@@ -40,7 +40,7 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		accessorFn: (record) => record.name,
 		header: ({ column }) => <HeaderButton column={column} name={t`Name`} Icon={ContainerIcon} />,
 		cell: ({ getValue }) => {
-			return <span className="ms-1.5 xl:w-45 block truncate">{getValue() as string}</span>
+			return <span className="ms-1.5 xl:w-48 block truncate">{getValue() as string}</span>
 		},
 	},
 	{
@@ -55,7 +55,7 @@ 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-32 block truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
+			return <span className="ms-1.5 xl:w-34 block truncate">{allSystems[getValue() as string]?.name ?? ""}</span>
 		},
 	},
 	// {
@@ -131,7 +131,7 @@ export const containerChartCols: ColumnDef<ContainerRecord>[] = [
 		accessorFn: (record) => record.image,
 		header: ({ column }) => <HeaderButton column={column} name={t({ message: "Image", context: "Docker image" })} Icon={LayersIcon} />,
 		cell: ({ getValue }) => {
-			return <span className="ms-1.5 xl:w-36 block truncate">{getValue() as string}</span>
+			return <span className="ms-1.5 xl:w-40 block truncate">{getValue() as string}</span>
 		},
 	},
 	{

internal/site/src/components/routes/settings/config-yaml.tsx

@@ -63,7 +63,7 @@ export default function ConfigYaml() {
 						</Trans>
 					</p>
 					<Alert className="my-4 border-destructive text-destructive w-auto table md:pe-6">
-						<AlertCircleIcon className="h-4 w-4 stroke-destructive" />
+						<AlertCircleIcon className="size-4.5 stroke-destructive" />
 						<AlertTitle>
 							<Trans>Caution - potential data loss</Trans>
 						</AlertTitle>

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

@@ -36,10 +36,6 @@ export const smartColumns: ColumnDef<SmartAttribute>[] = [
    {
       accessorKey: "id",
       header: "ID",
-      cell: ({ getValue }) => {
-         const id = getValue() as number | undefined
-         return <div className="font-mono text-sm">{id?.toString() || ""}</div>
-      },
    },
    {
       accessorFn: (row) => row.n,
@@ -386,8 +382,6 @@ export default function DisksTable({ systemId }: { systemId: string }) {
 function DiskSheet({ disk, smartData, open, onOpenChange }: { disk: DiskInfo | null; smartData?: SmartData; open: boolean; onOpenChange: (open: boolean) => void }) {
    if (!disk) return null
 
-   const [sorting, setSorting] = React.useState<SortingState>([{ id: "id", desc: false }])
-
    const smartAttributes = smartData?.a || []
 
    // Find all attributes where when failed is not empty
@@ -411,11 +405,6 @@ function DiskSheet({ disk, smartData, open, onOpenChange }: { disk: DiskInfo | n
       data: smartAttributes,
       columns: visibleColumns,
       getCoreRowModel: getCoreRowModel(),
-      getSortedRowModel: getSortedRowModel(),
-      onSortingChange: setSorting,
-      state: {
-         sorting,
-      }
    })
 
    return (

internal/site/src/index.css

@@ -145,7 +145,7 @@
 }
 
 @utility container {
-	@apply max-w-360 mx-auto px-4;
+	@apply max-w-370 mx-auto px-4;
 }
 
 @utility link {