fix: system monitor broken layout when responsive

This commit is contained in:
Faisal Amir 2023-12-19 11:07:22 +07:00
parent 9849865dc6
commit c1800b8f57

View File

@ -25,13 +25,13 @@ export default function SystemMonitorScreen() {
<ScrollArea className="h-full w-full"> <ScrollArea className="h-full w-full">
<div className="h-full p-8" data-test-id="testid-system-monitor"> <div className="h-full p-8" data-test-id="testid-system-monitor">
<div className="grid grid-cols-2 gap-8 lg:grid-cols-3"> <div className="grid grid-cols-2 gap-8 lg:grid-cols-3">
<div className="rounded-xl border border-border px-8 py-6"> <div className="rounded-xl border border-border p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-base font-bold uppercase"> <h4 className="text-base font-bold uppercase">
ram ({Math.round((usedRam / totalRam) * 100)}%) ram ({Math.round((usedRam / totalRam) * 100)}%)
</h4> </h4>
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
{toGigabytes(usedRam)} GB of {toGigabytes(totalRam)} GB used {toGigabytes(usedRam)} of {toGigabytes(totalRam)} used
</span> </span>
</div> </div>
<div className="mt-2"> <div className="mt-2">
@ -41,7 +41,7 @@ export default function SystemMonitorScreen() {
/> />
</div> </div>
</div> </div>
<div className="rounded-xl border border-border px-8 py-6"> <div className="rounded-xl border border-border p-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="text-base font-bold uppercase"> <h4 className="text-base font-bold uppercase">
cpu ({cpuUsage}%) cpu ({cpuUsage}%)