albert/status-monitor
1
0
Fork 0
mirror of https://github.com/csehviktor/status-monitor.git synced 2025-08-08 18:06:14 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix responsive issues

Browse Source
This commit is contained in:
csehviktor
2025-07-06 04:44:20 +02:00
parent f08b4067ae
commit 92bfa6e4e8
4 changed files with 95 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/components/AgentCard.tsx
View File

@@ -1,6 +1,6 @@
import { UptimeMessage } from "@/services/types";
import { formatRelativeTime, isAgentOnline } from "@/services/utils";
import { DottedProgressBar } from "./Progressbar";
import { Progressbar } from "./Progressbar";
export type AgentOverviewCardProps = {
count: number;
@@ -69,24 +69,23 @@ export function AgentCard({ props }: { props: AgentCardProps }) {
onClick={() => props.onClick?.()}
className="bg-[#111111] border border-[#262626] rounded-lg p-6 hover:bg-[#151515] transition-all cursor-pointer group"
>
<div className="flex items-center justify-between">
<div className="flex items-center justify-between space-x-10">
<div className="flex items-center space-x-3">
<div
className={`px-2 py-1 rounded-md text-xs font-medium ${status.bgColor} ${status.textColor} border ${status.borderColor}`}
>
{status.name.toUpperCase()}
</div>
<h3 className="text-lg font-semibold text-white transition-colors">
<h3 className="text-sm md:text-md lg:text-lg font-semibold text-white transition-colors">
{props.data.agent}
</h3>
</div>
<div className="flex items-center space-x-3 flex-1 justify-end">
<div className="flex flex-col max-w-lg gap-y-2">
<DottedProgressBar
<Progressbar
color={status.color}
percentage={props.data.uptime}
totalDots={20}
/>
<div className="flex justify-between items-center text-xs">
<span>