fix responsive issues

ui/src/components/AgentCard.tsx

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

ui/src/components/Header.tsx

@@ -9,7 +9,7 @@ export type HeaderProps = {
 
 export function Header({ props }: { props: HeaderProps }) {
     return (
-        <header className="bg-[#111111] border-b border-[#111111]">
+        <header className="bg-[#0d0d0d] border-b border-[#191919]">
             <div className="max-w-7xl mx-auto py-4 flex justify-between items-center">
                 <div className="flex items-center space-x-3">
                     <div className="w-11 h-11 text-yellow-500 flex items-center justify-center">

ui/src/components/Progressbar.tsx

@@ -1,20 +1,54 @@
-export function DottedProgressBar({
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+export function Progressbar({
     color,
     percentage,
-    totalDots = 10,
 }: {
     color: string;
     percentage: number;
-    totalDots?: number;
 }) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [totalDots, setTotalDots] = useState<number>(0);
+
+    useEffect(() => {
+        const calculateDots = () => {
+            if (!containerRef.current) return;
+
+            const parent =
+                containerRef.current.parentElement?.parentElement
+                    ?.parentElement;
+
+            if (!parent) return;
+
+            const availableWidth = parent.clientWidth;
+            const dotCount = Math.floor(availableWidth / 48);
+
+            setTotalDots(Math.max(5, Math.min(20, dotCount)));
+        };
+
+        calculateDots();
+
+        const resizeObserver = new ResizeObserver(calculateDots);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+
+        return () => resizeObserver.disconnect();
+    });
+
     const filledDots = Math.round((percentage / 100) * totalDots);
 
     return (
-        <div className="flex items-center justify-center space-x-2">
+        <div
+            ref={containerRef}
+            className="flex items-center justify-center space-x-2"
+        >
             {Array.from({ length: totalDots }).map((_, index) => (
                 <div
                     key={index}
-                    className={`w-[14px] h-[14px] rounded-full transition-all duration-300 ${
+                    className={`w-3 h-3 lg:w-4 lg:h-4 rounded-full transition-all duration-300 ${
                         index < filledDots ? color : "bg-[#232323]"
                     }`}
                 />

ui/src/pages/home.tsx

@@ -32,6 +32,7 @@ export function HomePage() {
                 }}
             />
             <main className="max-w-7xl mx-auto py-8">
+                <div className="mx-2">
                     <h2 className="text-xl font-semibold mb-4">Overview</h2>
 
                     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
@@ -79,10 +80,14 @@ export function HomePage() {
 
                         <div className="space-y-6">
                             {agents.map((agent, index) => (
-                            <AgentCard key={index} props={{ data: agent }} />
+                                <AgentCard
+                                    key={index}
+                                    props={{ data: agent }}
+                                />
                             ))}
                         </div>
                     </div>
+                </div>
             </main>
         </div>
     );