style: auto-fix lint and format

Introduce useWidgetSize() hook and WidgetSizeProvider context that
exposes grid dimensions (gridWidth, gridHeight) to every widget,
enabling responsive rendering based on how many grid cells a widget
occupies.

Weather widget updated as proof of concept: when placed in a 1x1 or
1xN cell with forecast enabled, it switches to a compact layout that
hides the forecast row, wind speed, and city name to prevent clipping.

apps/nextjs/src/components/board/sections/content.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 
 import type { GridItemHTMLElement } from "@homarr/gridstack";
+import { WidgetSizeProvider } from "@homarr/widgets";
 
 import type { DynamicSectionItem, SectionItem } from "~/app/[locale]/boards/_types";
 import { BoardItemContent } from "../items/item-content";
@@ -18,7 +19,7 @@ export const SectionContent = () => {
    * @see https://github.com/homarr-labs/homarr/pull/1770
    */
   const sortedItems = useMemo(() => {
-    return [...items, ...innerSections].sort((itemA, itemB) => {
+    return [...items, ...innerSections].toSorted((itemA, itemB) => {
       if (itemA.yOffset === itemB.yOffset) {
         return itemA.xOffset - itemB.xOffset;
       }
@@ -59,7 +60,13 @@ const Item = ({ item, innerRef }: ItemProps) => {
       minWidth={minWidth}
       minHeight={minHeight}
     >
-      {item.type === "item" ? <BoardItemContent item={item} /> : <BoardDynamicSection section={item} />}
+      {item.type === "item" ? (
+        <WidgetSizeProvider gridWidth={item.width} gridHeight={item.height}>
+          <BoardItemContent item={item} />
+        </WidgetSizeProvider>
+      ) : (
+        <BoardDynamicSection section={item} />
+      )}
     </GridStackItem>
   );
 };

package.json

@@ -88,13 +88,13 @@
       "nanoid@>=4.0.0 <5.0.9": ">=5.1.11",
       "prismjs@<1.30.0": ">=1.30.0",
       "proxmox-api>undici": "7.24.6",
-      "react-is": "^19.2.6",
-      "rollup@>=4.0.0 <4.22.4": ">=4.60.4",
+      "react-is": "^19.2.7",
+      "rollup@>=4.0.0 <4.22.4": ">=4.61.0",
       "sha.js@<=2.4.11": ">=2.4.12",
       "tar-fs@>=3.0.0 <3.0.9": ">=3.1.2",
       "tar-fs@>=2.0.0 <2.1.3": ">=3.1.2",
       "tmp@<=0.2.3": ">=0.2.7",
-      "vite@>=5.0.0 <=5.4.18": ">=8.0.15"
+      "vite@>=5.0.0 <=5.4.18": ">=8.0.16"
     },
     "patchedDependencies": {
       "@types/node-unifi": "patches/@types__node-unifi.patch",

packages/widgets/src/index.tsx

@@ -53,6 +53,7 @@ import * as weather from "./weather";
 
 export type { WidgetDefinition, WidgetOptionsSettings } from "./definition";
 export type { WidgetComponentProps };
+export { useWidgetSize, WidgetSizeProvider } from "./widget-size";
 
 export const widgetImports = {
   clock,

packages/widgets/src/weather/component.tsx

@@ -11,6 +11,7 @@ import { metricToImperial } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { useWidgetSize } from "../widget-size";
 import { WeatherDescription, WeatherIcon } from "./icon";
 
 export default function WeatherWidget({ isEditMode, options }: WidgetComponentProps<"weather">) {
@@ -29,19 +30,23 @@ export default function WeatherWidget({ isEditMode, options }: WidgetComponentPr
     onData: (data) => utils.widget.weather.atLocation.setData(input, data),
   });
 
+  const { gridWidth, gridHeight } = useWidgetSize();
+  const isCompact = gridWidth <= 1 || gridHeight <= 1;
+  const showForecast = options.hasForecast && !isCompact;
+
   return (
     <Stack
       align="center"
-      gap="sm"
+      gap={isCompact ? "xs" : "sm"}
       justify="center"
       w="100%"
       h="100%"
       style={{ pointerEvents: isEditMode ? "none" : undefined }}
     >
-      {options.hasForecast ? (
+      {showForecast ? (
         <WeeklyForecast weather={weather} options={options} />
       ) : (
-        <DailyWeather weather={weather} options={options} />
+        <DailyWeather weather={weather} options={options} compact={isCompact} />
       )}
     </Stack>
   );
@@ -51,24 +56,28 @@ interface WeatherProps extends Pick<WidgetComponentProps<"weather">, "options">
   weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }
 
-const DailyWeather = ({ options, weather }: WeatherProps) => {
+const DailyWeather = ({ options, weather, compact }: WeatherProps & { compact?: boolean }) => {
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
 
+  const iconSize = compact ? 20 : 30;
+  const tempSize = compact ? 20 : 30;
+  const detailSize = compact ? 13 : 16;
+
   return (
     <>
       <Group className="weather-day-group" gap="sm">
         <HoverCard>
           <HoverCard.Target>
             <Box>
-              <WeatherIcon size={30} code={weather.current.weathercode} />
+              <WeatherIcon size={iconSize} code={weather.current.weathercode} />
             </Box>
           </HoverCard.Target>
           <HoverCard.Dropdown>
             <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
           </HoverCard.Dropdown>
         </HoverCard>
-        <Text fz={30}>
+        <Text fz={tempSize}>
           {getPreferredUnit(
             weather.current.temperature,
             options.isFormatFahrenheit,
@@ -77,10 +86,10 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
         </Text>
       </Group>
       <Stack gap="xs" align="center">
-        {options.showCurrentWindSpeed && (
+        {options.showCurrentWindSpeed && !compact && (
           <Group className="weather-current-wind-speed-group" wrap="nowrap" gap="xs">
-            <IconWind size={16} />
-            <Text fz={16}>
+            <IconWind size={detailSize} />
+            <Text fz={detailSize}>
               {t("currentWindSpeed", {
                 currentWindSpeed: (options.useImperialSpeed
                   ? metricToImperial(weather.current.windspeed)
@@ -95,8 +104,8 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
         )}
         <Group className="weather-max-min-temp-group" wrap="nowrap" gap="sm">
           <Group gap="xs" wrap="nowrap">
-            <IconArrowUpRight size={16} />
-            <Text fz={16}>
+            <IconArrowUpRight size={detailSize} />
+            <Text fz={detailSize}>
               {getPreferredUnit(
                 weather.daily[0]?.maxTemp,
                 options.isFormatFahrenheit,
@@ -105,8 +114,8 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
             </Text>
           </Group>
           <Group gap="xs" wrap="nowrap">
-            <IconArrowDownRight size={16} />
-            <Text fz={16}>
+            <IconArrowDownRight size={detailSize} />
+            <Text fz={detailSize}>
               {getPreferredUnit(
                 weather.daily[0]?.minTemp,
                 options.isFormatFahrenheit,
@@ -116,11 +125,11 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
           </Group>
         </Group>
       </Stack>
-      {options.showCity && (
+      {options.showCity && !compact && (
         <>
           <Group className="weather-city-group" wrap="nowrap" gap="xs">
-            <IconMapPin size={16} />
-            <Text fz={16} style={{ whiteSpace: "nowrap" }}>
+            <IconMapPin size={detailSize} />
+            <Text fz={detailSize} style={{ whiteSpace: "nowrap" }}>
               {options.location.name}
             </Text>
           </Group>

packages/widgets/src/widget-size.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { createContext, useContext } from "react";
+
+export interface WidgetSize {
+  gridWidth: number;
+  gridHeight: number;
+}
+
+const WidgetSizeContext = createContext<WidgetSize | null>(null);
+
+export const useWidgetSize = () => {
+  const ctx = useContext(WidgetSizeContext);
+  if (!ctx) throw new Error("useWidgetSize must be used within WidgetSizeProvider");
+  return ctx;
+};
+
+interface WidgetSizeProviderProps extends WidgetSize {
+  children: ReactNode;
+}
+
+export const WidgetSizeProvider = ({ gridWidth, gridHeight, children }: WidgetSizeProviderProps) => (
+  <WidgetSizeContext.Provider value={{ gridWidth, gridHeight }}>{children}</WidgetSizeContext.Provider>
+);

pnpm-workspace.yaml

@@ -32,7 +32,7 @@ catalog:
   "@mantine/notifications": ^9.2.2
   "@mantine/spotlight": ^9.2.2
   "@mantine/tiptap": ^9.2.2
-  "@next/eslint-plugin-next": 16.2.6
+  "@next/eslint-plugin-next": 16.2.7
   "@octokit/auth-app": ^8.2.0
   "@paralleldrive/cuid2": ^3.3.0
   "@playwright/test": ^1.60.0
@@ -84,7 +84,7 @@ catalog:
   "@types/node-unifi": ^2.5.1
   "@types/pg": ^8.20.0
   "@types/prismjs": ^1.26.6
-  "@types/react": 19.2.15
+  "@types/react": 19.2.16
   "@types/react-dom": 19.2.3
   "@types/swagger-ui-react": ^5.18.0
   "@types/video.js": ^7.3.58
@@ -92,8 +92,8 @@ catalog:
   "@types/xml2js": ^0.4.14
   "@umami/node": ^0.4.0
   "@vitejs/plugin-react": ^5.2.0
-  "@vitest/coverage-v8": ^4.1.7
-  "@vitest/ui": ^4.1.7
+  "@vitest/coverage-v8": ^4.1.8
+  "@vitest/ui": ^4.1.8
   "@xterm/addon-canvas": ^0.7.0
   "@xterm/addon-fit": 0.11.0
   "@xterm/xterm": ^6.0.0
@@ -135,19 +135,19 @@ catalog:
   mantine-react-table: npm:mantine-react-table-open@9.0.3
   maria2: ^0.4.1
   mysql2: 3.22.4
-  next: 16.2.6
+  next: 16.2.7
   next-auth: 5.0.0-beta.31
   next-intl: 4.13.0
   node-loader: ^2.1.0
   octokit: ^5.0.5
-  oxfmt: ^0.52.0
+  oxfmt: ^0.53.0
   oxlint: ^1.67.0
   pg: ^8.21.0
   postcss-preset-mantine: ^1.18.0
   prismjs: ^1.30.0
   proxmox-api: 1.1.1
-  react: 19.2.6
-  react-dom: 19.2.6
+  react: 19.2.7
+  react-dom: 19.2.7
   react-error-boundary: ^6.1.2
   react-markdown: ^10.1.0
   react-quill-new: ^3.8.3
@@ -170,7 +170,7 @@ catalog:
   use-deep-compare-effect: ^1.8.1
   video.js: ^8.23.7
   vite-tsconfig-paths: ^6.1.1
-  vitest: ^4.1.7
+  vitest: ^4.1.8
   winston: 3.19.0
   ws: ^8.21.0
   xml2js: ^0.6.2