feat: DNS Hole summary Scalability (#646)

packages/translation/src/lang/en.ts

@@ -680,8 +680,8 @@ export default {
         internalServerError: "Failed to fetch DNS Hole Summary",
       },
       data: {
-        adsBlockedToday: "blocked today",
+        adsBlockedToday: "Blocked today",
-        adsBlockedTodayPercentage: "blocked today",
+        adsBlockedTodayPercentage: "Blocked today",
         dnsQueriesToday: "Queries today",
         domainsBeingBlocked: "Domains on blocklist",
       },

packages/widgets/src/dns-hole/summary/component.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { BoxProps } from "@mantine/core";
-import { Box, Card, Center, Flex, Text } from "@mantine/core";
+import { Box, Card, Flex, Text } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import { IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from "@tabler/icons-react";
 
@@ -93,35 +93,46 @@ const StatCard = ({ item, data, usePiHoleColors }: StatCardProps) => {
   return (
     <Card
       ref={ref}
-      m={6}
+      className="summary-card"
-      p={3}
+      m="2.5cqmin"
+      p="2.5cqmin"
       bg={usePiHoleColors ? item.color : "rgba(96, 96, 96, 0.1)"}
       style={{
         flex: 1,
       }}
       withBorder
     >
-      <Center h="100%" w="100%">
+      <Flex
-        <Flex h="100%" w="100%" align="center" justify="space-evenly" direction={isLong ? "row" : "column"}>
+        className="summary-card-elements"
-          <item.icon size={30} style={{ margin: "0 10" }} />
+        h="100%"
-          <Flex
+        w="100%"
-            justify="center"
+        align="center"
-            direction="column"
+        justify="space-evenly"
-            style={{
+        direction={isLong ? "row" : "column"}
-              flex: isLong ? 1 : undefined,
+        style={{ containerType: "size" }}
-            }}
+      >
-          >
+        <item.icon className="summary-card-icon" size="50cqmin" style={{ margin: "2cqmin" }} />
-            <Text ta="center" lh={1.2} size="md" fw="bold">
+        <Flex
-              {item.value(data, t)}
+          className="summary-card-texts"
+          justify="center"
+          direction="column"
+          style={{
+            flex: isLong ? 1 : undefined,
+          }}
+          w="100%"
+          h="100%"
+          gap="1cqmin"
+        >
+          <Text className="summary-card-value" ta="center" size="25cqmin" fw="bold">
+            {item.value(data, t)}
+          </Text>
+          {item.label && (
+            <Text className="summary-card-label" ta="center" size="17.5cqmin">
+              {translateIfNecessary(t, item.label)}
             </Text>
-            {item.label && (
+          )}
-              <Text ta="center" lh={1.2} size="0.75rem">
-                {translateIfNecessary(t, item.label)}
-              </Text>
-            )}
-          </Flex>
         </Flex>
-      </Center>
+      </Flex>
     </Card>
   );
 };