feat: Clock widget scalability (#644)

apps/tasks/eslint.config.js

@@ -3,7 +3,7 @@ import baseConfig from "@homarr/eslint-config/base";
 /** @type {import('typescript-eslint').Config} */
 export default [
   {
-    ignores: ["build/**"],
+    ignores: ["tasks.cjs"],
   },
   ...baseConfig,
 ];

apps/websocket/eslint.config.js

@@ -1,4 +1,9 @@
 import baseConfig from "@homarr/eslint-config/base";
 
 /** @type {import('typescript-eslint').Config} */
-export default [...baseConfig];
+export default [
+  {
+    ignores: ["wssServer.cjs"],
+  },
+  ...baseConfig,
+];

packages/widgets/src/clock/component.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Flex, Stack, Text } from "@mantine/core";
+import { Stack, Text } from "@mantine/core";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import timezones from "dayjs/plugin/timezone";
@@ -20,21 +20,21 @@ export default function ClockWidget({ options }: WidgetComponentProps<"clock">)
   const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
   const time = useCurrentTime(options);
   return (
-    <Flex classNames={{ root: "clock-wrapper" }} align="center" justify="center" h="100%">
-      <Stack classNames={{ root: "clock-text-stack" }} align="center" gap="xs">
-        {options.customTitleToggle && (
-          <Text classNames={{ root: "clock-customTitle-text" }}>{options.customTitle}</Text>
-        )}
-        <Text classNames={{ root: "clock-time-text" }} fw={700} size="2.125rem" lh="1">
-          {dayjs(time).tz(timezone).format(timeFormat)}
+    <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap="10cqmin">
+      {options.customTitleToggle && (
+        <Text className="clock-customTitle-text" size="12.5cqmin" ta="center">
+          {options.customTitle}
         </Text>
-        {options.showDate && (
-          <Text classNames={{ root: "clock-date-text" }} lineClamp={1}>
-            {dayjs(time).tz(timezone).format(dateFormat)}
-          </Text>
-        )}
-      </Stack>
-    </Flex>
+      )}
+      <Text className="clock-time-text" fw={700} size="22.5cqmin" lh="1">
+        {dayjs(time).tz(timezone).format(timeFormat)}
+      </Text>
+      {options.showDate && (
+        <Text className="clock-date-text" size="12.5cqmin" lineClamp={1}>
+          {dayjs(time).tz(timezone).format(dateFormat)}
+        </Text>
+      )}
+    </Stack>
   );
 }