jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2026-04-06 21:11:49 +02:00
Code Issues Packages Projects Releases 2 Wiki Activity

hub(ui): style cleanup and mobile improvements

Browse Source
This commit is contained in:
henrygd
2026-03-27 12:26:00 -04:00
parent 3f4c3d51b6
commit c7261b56f1
12 changed files with 67 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
internal/site/src/components/routes/system/chart-card.tsx
View File

@@ -107,15 +107,19 @@ export function ChartCard({
return (
<Card
className={cn("pb-2 sm:pb-4 odd:last-of-type:col-span-full min-h-full", { "col-span-full": !grid }, className)}
className={cn(
"px-3 py-5 sm:py-6 sm:px-6 odd:last-of-type:col-span-full min-h-full",
{ "col-span-full": !grid },
className
)}
ref={ref}
>
<CardHeader className="pb-5 pt-4 gap-1 relative max-sm:py-3 max-sm:px-4">
<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
<CardHeader className="gap-1.5 relative p-0 mb-3 sm:mb-4">
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
{cornerEl && <div className="py-1 grid sm:justify-end sm:absolute sm:top-3.5 sm:end-3.5">{cornerEl}</div>}
{cornerEl && <div className="grid sm:justify-end sm:absolute sm:top-0 sm:end-0 my-1 sm:my-0">{cornerEl}</div>}
</CardHeader>
<div className={cn("ps-0 w-[calc(100%-1.3em)] relative group", legend ? "h-54 md:h-56" : "h-48 md:h-52")}>
<div className={cn("ps-0 -me-1 -ms-3.5 relative group", legend ? "h-54 md:h-56" : "h-48 md:h-52")}>
{
<Spinner
msg={empty ? t`Waiting for enough records to display` : undefined}

2
internal/site/src/components/routes/system/cpu-sheet.tsx
View File

@@ -111,7 +111,7 @@ export default memo(function CpuCoresSheet({
title={t`View more`}
variant="outline"
size="icon"
className="shrink-0 max-sm:absolute max-sm:top-3 max-sm:end-3"
className="shrink-0 max-sm:absolute max-sm:top-0 max-sm:end-0"
>
<MoreHorizontalIcon />
</Button>

8
internal/site/src/components/routes/system/info-bar.tsx
View File

@@ -135,10 +135,10 @@ export default function InfoBar({
return (
<Card>
<div className="grid xl:flex gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
<div>
<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
<div className="grid xl:flex xl:gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
<div className="min-w-0">
<h1 className="text-2xl sm:text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
<div className="flex xl:flex-wrap items-center py-4 xl:p-0 -mt-3 xl:mt-1 gap-3 text-sm text-nowrap opacity-90 overflow-x-auto scrollbar-hide -mx-4 px-4 xl:mx-0">
<Tooltip>
<TooltipTrigger asChild>
<div className="capitalize flex gap-2 items-center">

2
internal/site/src/components/routes/system/network-sheet.tsx
View File

@@ -46,7 +46,7 @@ export default memo(function NetworkSheet({
title={t`View more`}
variant="outline"
size="icon"
className="shrink-0 max-sm:absolute max-sm:top-3 max-sm:end-3"
className="shrink-0 max-sm:absolute max-sm:top-0 max-sm:end-0"
>
<MoreHorizontalIcon />
</Button>

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

@@ -532,9 +532,9 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
return (
<div>
<Card className="p-6 @container w-full">
<CardHeader className="p-0 mb-4">
<div className="grid md:flex gap-5 w-full items-end">
<Card className="@container w-full px-3 py-5 sm:py-6 sm:px-6">
<CardHeader className="p-0 mb-3 sm:mb-4">
<div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
<div className="px-2 sm:px-1">
<CardTitle className="mb-2">S.M.A.R.T.</CardTitle>
<CardDescription className="flex">