jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 10:46:16 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

refactor: small style improvements

Browse Source
This commit is contained in:
henrygd
2025-08-29 17:23:47 -04:00
parent 96f441de40
commit 81d43fbf6e
4 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
beszel/site/src/components/systems-table/systems-table-columns.tsx
View File

@@ -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>

10
beszel/site/src/components/systems-table/systems-table.tsx
View File

@@ -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}>