fix(board-v2): icon and tiny text fix (#6704)

packages/widgets/src/clock/advanced-view.tsx

@@ -16,6 +16,7 @@ import { IconAlertTriangle, IconClock } from "@tabler/icons-react";
 import type { Dayjs } from "dayjs";
 
 import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
+import { iconSizes } from "@homarr/ui";
 
 import { formatLocalizedDate, formatLocalizedTime } from "../common/locale";
 import type { WidgetComponentProps } from "../definition";
@@ -102,7 +103,7 @@ const PrimaryClock = ({ now, options, primary }: Pick<ModeProps, "now" | "option
         <Stack gap={5} miw={0}>
           <Group gap="xs" wrap="nowrap">
             <ThemeIcon color={getPhaseColor(primary.phase)} variant="light" radius="xl" size="md">
-              <IconClock size={16} />
+              <IconClock style={iconSizes.md} />
             </ThemeIcon>
             <Title order={2} size="h4" fw={600}>
               {primary.label}

packages/widgets/src/clock/component.tsx

@@ -47,7 +47,7 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid
   return (
     <Box className="clock-widget-container" h="100%" pos="relative">
       {showWeatherCorner && (
-        <Box pos="absolute" top={4} left={4}>
+        <Box pos="absolute" top={2} left={4}>
           <ClockWeatherSummary
             latitude={options.weatherLocation.latitude}
             longitude={options.weatherLocation.longitude}

packages/widgets/src/clock/weather-summary.tsx

@@ -2,6 +2,7 @@ import { Box, Group, Loader, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useI18n } from "@homarr/translation/client";
+import { zoomCompensatedSize } from "@homarr/ui";
 
 import { isInitialWidgetQueryPending } from "../common/query-state";
 import { AnimatedWeatherIcon } from "../weather/animated-icon";
@@ -46,20 +47,35 @@ export const ClockWeatherSummary = ({
   };
 
   return (
-    <Stack gap={detailed ? 3 : 0} align="flex-start">
-      <Group gap={5} wrap="nowrap">
-        <AnimatedWeatherIcon
-          animated={animateIcon}
-          code={weather.current.weatherCode}
-          isDay={weather.current.isDay}
-          size={detailed ? 28 : 22}
-        />
-        <Text size={detailed ? "sm" : "xs"} fw={detailed ? 600 : undefined} c={detailed ? undefined : "dimmed"}>
-          {Math.round(temperature)}
-          {unit}
-        </Text>
-        {detailed && <WeatherDescription weatherOnly weatherCode={weather.current.weatherCode} />}
-      </Group>
+    <Stack gap={detailed ? 3 : 2} align={detailed ? "flex-start" : "center"}>
+      {detailed ? (
+        <Group gap={5} wrap="nowrap">
+          <AnimatedWeatherIcon
+            animated={animateIcon}
+            code={weather.current.weatherCode}
+            isDay={weather.current.isDay}
+            style={zoomCompensatedSize(28)}
+          />
+          <Text size="sm" fw={600}>
+            {Math.round(temperature)}
+            {unit}
+          </Text>
+          <WeatherDescription weatherOnly weatherCode={weather.current.weatherCode} />
+        </Group>
+      ) : (
+        <Stack gap={1} align="center">
+          <AnimatedWeatherIcon
+            animated={animateIcon}
+            code={weather.current.weatherCode}
+            isDay={weather.current.isDay}
+            style={zoomCompensatedSize(26)}
+          />
+          <Text size="xs" c="dimmed">
+            {Math.round(temperature)}
+            {unit}
+          </Text>
+        </Stack>
+      )}
       {detailed && (
         <Box>
           <Text size="xs" fw={600} lineClamp={1}>