feat: add @tailwindcss/line-clamp dependency and integrate responsive layout adjustments in Admin components for improved UI

src/components/StatCard.jsx

@@ -7,30 +7,77 @@ export const StatCard = ({
   icon: Icon,
   iconBgClass,
   dataTestId,
-}) => (
-  <Card
-    className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
-    data-testid={dataTestId}
-  >
-    <div className="flex items-start gap-4 mb-4 ">
-      <div className={`${iconBgClass} p-3 rounded-lg `}>
-        <Icon className="size-8" />
-      </div>
+}) => {
+  const valueString = value == null ? "" : String(value);
 
-      <div className="space-y-8">
-        <p
-          className="text-6xl font-semibold text-[var(--purple-ink)] mb-1"
-          style={{ fontFamily: "'Inter', sans-serif" }}
-        >
-          {value}
-        </p>
-      </div>
-    </div>
-    <p
-      className="text-sm text-brand-purple "
-      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+  const digitCount =
+    valueString.replace(/\D/g, "").length || valueString.length;
+  /**
+ * 
+const getValueFontSize = () => {
+  if (digitCount <= 3) {
+      // 3.75rem for 3 or fewer digits
+      return "3.75rem";
+    } else if (digitCount <= 6) {
+      // Scale down for more digits
+      return "clamp(2rem, 5cqi, 3rem)";
+    } else if (digitCount <= 9) {
+      return "clamp(1.5rem, 4cqi, 2.5rem)";
+    } else {
+      return "clamp(1.25rem, 3cqi, 2rem)";
+    }
+  };
+  
+  * */
+
+  const getValueFontSize = () => {
+    switch (true) {
+      case digitCount <= 3:
+        // 3.75rem for 3 or fewer digits
+        return "3.75rem";
+      case digitCount <= 6:
+        // Scale down for more digits
+        return "clamp(2rem, 5cqi, 3rem)";
+      case digitCount <= 9:
+        return "clamp(1.5rem, 4cqi, 2.5rem)";
+      default:
+        return "clamp(1.25rem, 3cqi, 2rem)";
+    }
+  };
+  const valueFontSize = getValueFontSize();
+
+  return (
+    <Card
+      className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
+      data-testid={dataTestId}
     >
-      {title}
-    </p>
-  </Card>
-);
+      <div className="flex items-start gap-4 mb-4 justify-between">
+        <div
+          className="space-y-8 "
+          style={{
+            containerType: "inline-size",
+            maxWidth: "200px",
+            width: "100%",
+          }}
+        >
+          <p
+            className="font-semibold text-[var(--purple-ink)] mb-1"
+            style={{ fontSize: valueFontSize, lineHeight: 1 }}
+          >
+            {value}
+          </p>
+        </div>
+
+        <div className={`${iconBgClass} p-3 rounded-lg `}>
+          <Icon className="size-8" />
+        </div>
+      </div>
+      <p
+        className="text-sm text-brand-purple "
+        style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+      >
+        {title}
+      </p>
+    </Card>
+  );
+};