fix(network-status): fit compact layouts

packages/db/scripts/seed-widget-regression-board.ts

@@ -144,18 +144,18 @@ const fixtureWidgets: FixtureWidget[] = [
     xOffset: 6,
     yOffset: 0,
     width: 2,
-    height: 2,
-    mobileHeight: 2,
+    height: 1,
+    mobileHeight: 1,
     needsIntegration: true,
     options: { content: "wired" },
   },
   {
     kind: "networkControllerStatus",
     xOffset: 6,
-    yOffset: 2,
-    width: 2,
-    height: 2,
-    mobileHeight: 2,
+    yOffset: 1,
+    width: 1,
+    height: 1,
+    mobileHeight: 1,
     needsIntegration: true,
     options: { content: "wifi" },
   },

packages/widgets/src/network-controller/network-status/component.tsx

@@ -12,8 +12,7 @@ import { getNetworkControllerStatusLayout } from "./layout";
 import { WifiVariant } from "./variants/wifi-variant";
 import { WiredVariant } from "./variants/wired-variant";
 
-const neutralBorderColor =
-  "rgb(from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45))";
+const neutralBorderColor = "rgb(from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45))";
 
 export default function NetworkControllerNetworkStatusWidget({
   options,
@@ -21,6 +20,7 @@ export default function NetworkControllerNetworkStatusWidget({
   displayMode,
   width,
   height,
+  displayScale = 1,
 }: WidgetComponentProps<"networkControllerStatus">) {
   const summaryQuery = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
@@ -41,7 +41,18 @@ export default function NetworkControllerNetworkStatusWidget({
   const countWifiUsers = summaries.reduce((sum, { summary }) => sum + summary.wifi.users, 0);
   const countLanGuests = summaries.reduce((sum, { summary }) => sum + summary.lan.guests, 0);
   const countLanUsers = summaries.reduce((sum, { summary }) => sum + summary.lan.users, 0);
-  const layout = getNetworkControllerStatusLayout({ width, height, displayMode, content: options.content });
+  let responsiveWidth = width;
+  let responsiveHeight = height;
+  if (!isAdvanced && Number.isFinite(displayScale) && displayScale > 0) {
+    responsiveWidth *= displayScale;
+    responsiveHeight *= displayScale;
+  }
+  const layout = getNetworkControllerStatusLayout({
+    width: responsiveWidth,
+    height: responsiveHeight,
+    displayMode,
+    content: options.content,
+  });
   const indicatorResults =
     results.length > 0 || !summaryQuery.error
       ? results
@@ -54,14 +65,26 @@ export default function NetworkControllerNetworkStatusWidget({
 
   if (!isAdvanced) {
     return (
-      <Box h="100%" p="sm" pos="relative">
+      <Box h="100%" p={layout.padding} pos="relative">
         <Box pos="absolute" top={4} right={8} style={{ zIndex: 2 }}>
           {queryIndicators}
         </Box>
         {options.content === "wifi" ? (
-          <WifiVariant countGuests={countWifiGuests} countUsers={countWifiUsers} />
+          <WifiVariant
+            countGuests={countWifiGuests}
+            countUsers={countWifiUsers}
+            compact={layout.compact}
+            horizontal={layout.horizontalStats}
+            inline={layout.inlineStats}
+          />
         ) : (
-          <WiredVariant countGuests={countLanGuests} countUsers={countLanUsers} />
+          <WiredVariant
+            countGuests={countLanGuests}
+            countUsers={countLanUsers}
+            compact={layout.compact}
+            horizontal={layout.horizontalStats}
+            inline={layout.inlineStats}
+          />
         )}
       </Box>
     );
@@ -103,20 +126,10 @@ export default function NetworkControllerNetworkStatusWidget({
                 </Badge>
               </Group>
               <SimpleGrid cols={layout.columns} spacing="sm">
-                <Card
-                  p={layout.cardPadding}
-                  withBorder
-                  bg="transparent"
-                  style={{ borderColor: neutralBorderColor }}
-                >
+                <Card p={layout.cardPadding} withBorder bg="transparent" style={{ borderColor: neutralBorderColor }}>
                   <WifiVariant countGuests={summary.wifi.guests} countUsers={summary.wifi.users} advanced />
                 </Card>
-                <Card
-                  p={layout.cardPadding}
-                  withBorder
-                  bg="transparent"
-                  style={{ borderColor: neutralBorderColor }}
-                >
+                <Card p={layout.cardPadding} withBorder bg="transparent" style={{ borderColor: neutralBorderColor }}>
                   <WiredVariant countGuests={summary.lan.guests} countUsers={summary.lan.users} advanced />
                 </Card>
               </SimpleGrid>

packages/widgets/src/network-controller/network-status/layout.spec.ts

@@ -7,7 +7,7 @@ describe("network controller status layout", () => {
     {
       name: "minimum compact",
       input: { width: 160, height: 90, displayMode: "compact" as const, content: "wifi" as const },
-      expected: { padding: "xs", columns: 1, showWifi: true, showWired: false, horizontalStats: false },
+      expected: { padding: 4, columns: 1, showWifi: true, showWired: false, horizontalStats: true },
     },
     {
       name: "short compact",
@@ -58,7 +58,7 @@ describe("network controller status layout", () => {
     ).toMatchObject({ padding: "sm", horizontalStats: false });
     expect(
       getNetworkControllerStatusLayout({ width: 199, height: 119, displayMode: "compact", content: "wifi" }),
-    ).toMatchObject({ padding: "xs", horizontalStats: false });
+    ).toMatchObject({ padding: 4, horizontalStats: true });
     expect(
       getNetworkControllerStatusLayout({ width: 960, height: 320, displayMode: "advanced", content: "wifi" }),
     ).toMatchObject({ sourceColumns: 2 });

packages/widgets/src/network-controller/network-status/layout.ts

@@ -11,7 +11,7 @@ interface NetworkControllerStatusLayoutInput {
 }
 
 export interface NetworkControllerStatusLayout {
-  padding: "xs" | "sm" | "md";
+  padding: 4 | "xs" | "sm" | "md";
   columns: 1 | 2;
   sourceColumns: 1 | 2;
   showWifi: boolean;
@@ -20,6 +20,7 @@ export interface NetworkControllerStatusLayout {
   withBorder: boolean;
   compact: boolean;
   horizontalStats: boolean;
+  inlineStats: boolean;
 }
 
 export const getNetworkControllerStatusLayout = ({
@@ -29,16 +30,18 @@ export const getNetworkControllerStatusLayout = ({
   content,
 }: NetworkControllerStatusLayoutInput): NetworkControllerStatusLayout => {
   const isAdvanced = displayMode === "advanced";
+  const compact = !isAdvanced && (width < 240 || height < 180);
 
   return {
-    padding: isAdvanced ? "md" : height < 120 ? "xs" : "sm",
+    padding: isAdvanced ? "md" : height < 120 ? 4 : "sm",
     columns: isAdvanced && width >= 560 ? 2 : 1,
     sourceColumns: isAdvanced && width >= 960 ? 2 : 1,
     showWifi: isAdvanced || content === "wifi",
     showWired: isAdvanced || content === "wired",
     cardPadding: isAdvanced ? "md" : 0,
     withBorder: isAdvanced,
-    compact: !isAdvanced,
-    horizontalStats: !isAdvanced && height < 150 && width >= 200,
+    compact,
+    horizontalStats: compact && height < 150,
+    inlineStats: compact && height < 80,
   };
 };

packages/widgets/src/network-controller/network-status/variants/stat-row.tsx

@@ -1,23 +1,38 @@
-import { Stack, Text } from "@mantine/core";
+import { Group, Stack, Text } from "@mantine/core";
 
 export const StatRow = ({
   label,
   value,
   advanced = false,
   compact = false,
+  inline = false,
 }: {
   label: string;
   value: string | number;
   advanced?: boolean;
   compact?: boolean;
+  inline?: boolean;
 }) => {
+  if (!advanced && compact && inline) {
+    return (
+      <Group gap={2} align="baseline" justify="center" wrap="nowrap" miw={0}>
+        <Text size="xl" fw={800} lh={1} style={{ flexShrink: 0 }}>
+          {value}
+        </Text>
+        <Text size="sm" c="dimmed" truncate>
+          {label}
+        </Text>
+      </Group>
+    );
+  }
+
   if (!advanced) {
     return (
       <Stack gap={0}>
-        <Text size="2xl" fw={900} lh={1}>
+        <Text size={compact ? "xl" : "2xl"} fw={compact ? 800 : 900} lh={1}>
           {value}
         </Text>
-        <Text size="md" c="dimmed">
+        <Text size={compact ? "sm" : "md"} c="dimmed">
           {label}
         </Text>
       </Stack>

packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx

@@ -12,27 +12,36 @@ export const WifiVariant = ({
   advanced = false,
   compact = false,
   horizontal = false,
+  inline = false,
 }: {
   countUsers: number;
   countGuests: number;
   advanced?: boolean;
   compact?: boolean;
   horizontal?: boolean;
+  inline?: boolean;
 }) => {
   const t = useI18n("widget.networkControllerStatus.card");
   if (!advanced) {
+    const iconSize = horizontal ? 20 : 24;
+    let titleMargin: 0 | "xs" | "md" = "md";
+    if (compact) titleMargin = "xs";
+    if (horizontal) titleMargin = 0;
+    let statsSpacing: number | "xs" | "lg" = "lg";
+    if (compact) statsSpacing = "xs";
+    if (horizontal) statsSpacing = 4;
     return (
       <>
-        <Group gap="xs" wrap="nowrap" mb="md">
-          <IconWifi style={zoomCompensatedSize(24)} />
+        <Group gap="xs" wrap="nowrap" mb={titleMargin}>
+          <IconWifi style={zoomCompensatedSize(iconSize)} />
           <Text size="md" fw="bold">
             {t("variants.wifi.name")}
           </Text>
         </Group>
-        <Stack gap="lg">
-          <StatRow label={t("users.label")} value={countUsers} />
-          <StatRow label={t("guests.label")} value={countGuests} />
-        </Stack>
+        <SimpleGrid cols={horizontal ? 2 : 1} spacing={statsSpacing}>
+          <StatRow label={t("users.label")} value={countUsers} compact={compact} inline={inline} />
+          <StatRow label={t("guests.label")} value={countGuests} compact={compact} inline={inline} />
+        </SimpleGrid>
       </>
     );
   }

packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx

@@ -12,27 +12,36 @@ export const WiredVariant = ({
   advanced = false,
   compact = false,
   horizontal = false,
+  inline = false,
 }: {
   countUsers: number;
   countGuests: number;
   advanced?: boolean;
   compact?: boolean;
   horizontal?: boolean;
+  inline?: boolean;
 }) => {
   const t = useI18n("widget.networkControllerStatus.card");
   if (!advanced) {
+    const iconSize = horizontal ? 20 : 24;
+    let titleMargin: 0 | "xs" | "md" = "md";
+    if (compact) titleMargin = "xs";
+    if (horizontal) titleMargin = 0;
+    let statsSpacing: number | "xs" | "lg" = "lg";
+    if (compact) statsSpacing = "xs";
+    if (horizontal) statsSpacing = 4;
     return (
       <>
-        <Group gap="xs" wrap="nowrap" mb="md">
-          <IconNetwork style={zoomCompensatedSize(24)} />
+        <Group gap="xs" wrap="nowrap" mb={titleMargin}>
+          <IconNetwork style={zoomCompensatedSize(iconSize)} />
           <Text size="md" fw="bold">
             {t("variants.wired.name")}
           </Text>
         </Group>
-        <Stack gap="lg">
-          <StatRow label={t("users.label")} value={countUsers} />
-          <StatRow label={t("guests.label")} value={countGuests} />
-        </Stack>
+        <SimpleGrid cols={horizontal ? 2 : 1} spacing={statsSpacing}>
+          <StatRow label={t("users.label")} value={countUsers} compact={compact} inline={inline} />
+          <StatRow label={t("guests.label")} value={countGuests} compact={compact} inline={inline} />
+        </SimpleGrid>
       </>
     );
   }