better mobile stuff

src/app/dashboard/page.tsx

@@ -18,19 +18,33 @@ export function generateHourlyData() {
 }
 
 
-export function SummaryCard({children, value, icon, className}: {children: React.ReactNode, value: string, icon: React.ElementType, className?: string}) {
+export function SummaryCard({
+  children,
+  value,
+  icon,
+  className,
+}: {
+  children: React.ReactNode;
+  value: string;
+  icon: React.ElementType;
+  className?: string;
+}) {
   const Icon = icon;
   return (
-    <Card className="h-24 flex flex-row items-center">
-      <div className="mx-6">
-        <Label className="text-md font-bold text-foreground">{children}</Label>
+    <Card className="h-24 flex flex-row justify-between items-center gap-0 px-6">
+      <div className="">
+        <Label className="text-sm font-bold text-foreground">{children}</Label>
         <Label className={cn("text-2xl font-bold", className)}>{value}</Label>
       </div>
-      <Icon className={cn("ml-auto mr-6", className)} size={32} />
+      <Icon
+        className={cn("shrink-0", className)}
+        size={32}
+      />
     </Card>
-  )
+  );
 }
 
+
 export function Summary({value, children}: {value: number, children: React.ReactNode}) {
   return (
     <div className="flex flex-col gap-2 w-full">
@@ -47,12 +61,21 @@ export default async function Dashboard() {
   // const session = await getSession();
   const d = generateHourlyData();
   return (
-    <div className="w-full flex flex-col gap-10">
+    <div className="w-full flex flex-col gap-5">
       <div className="grid gap-4 w-full grid-cols-2 xl:grid-cols-4">
-        <SummaryCard className="text-chart-3" value="69" icon={CircleCheckBig}>Online</SummaryCard>
+        <SummaryCard className="text-chart-3" value="69" icon={CircleCheckBig}>
+          <span className="hidden sm:inline">Online Servers</span>
+          <span className="inline sm:hidden">Online</span>
+        </SummaryCard>
         <SummaryCard className="text-chart-4" value="2" icon={TriangleAlert}>Issues</SummaryCard>
-        <SummaryCard className="text-chart-2" value="52%" icon={Cpu}>Avg CPU Usage</SummaryCard>
-        <SummaryCard className="text-chart-1" value="37%" icon={MemoryStick}>Avg Memory Usage</SummaryCard>
+        <SummaryCard className="text-chart-2" value="52%" icon={Cpu}>
+          <span className="hidden sm:inline">Avg CPU Usage</span>
+          <span className="inline sm:hidden">CPU</span>
+        </SummaryCard>
+        <SummaryCard className="text-chart-1" value="100%" icon={MemoryStick}>
+          <span className="hidden sm:inline">Avg Memory Usage</span>
+          <span className="inline sm:hidden">Memory</span>
+        </SummaryCard>
       </div>
 
       <div className="w-full h-96 flex gap-5 flex-col md:flex-row">