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.

Dockerfile

@@ -65,8 +65,5 @@ ENV AUTH_PROVIDERS='credentials'
 ENV REDIS_IS_EXTERNAL='false'
 ENV NODE_ENV='production'
 
-ARG PORT=7575
-EXPOSE ${PORT}
-
 ENTRYPOINT [ "/app/entrypoint.sh" ]
 CMD ["sh", "run.sh"]

apps/nextjs/package.json

@@ -9,7 +9,7 @@
     "dev": "pnpm with-env next dev",
     "format": "oxfmt .",
     "lint": "oxlint",
-    "start": "pnpm with-env next start -p ${PORT:-3000}",
+    "start": "pnpm with-env next start",
     "typecheck": "tsc --noEmit",
     "with-env": "dotenv -e ../../.env --"
   },

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>
   );
 };

development/docker-run.cmd

@@ -1,2 +1,2 @@
 :: Please do not run this command in production. It is only for local testing.
-docker run -p 7575:7575 -e PORT=7575 -e SECRET_ENCRYPTION_KEY=0000000000000000000000000000000000000000000000000000000000000000 homarr:latest
+docker run -p 7575:7575 -e SECRET_ENCRYPTION_KEY=0000000000000000000000000000000000000000000000000000000000000000 homarr:latest

nginx.conf

@@ -4,9 +4,10 @@ events {
 
 http {
     server {
-        listen ${PORT};
-        listen [::]:${PORT};
+        listen 7575;
+        listen [::]:7575;
 
+        # Route websockets traffic to port 3001
         location /websockets {
             proxy_pass http://${HOSTNAME}:3001;
             proxy_http_version 1.1;
@@ -15,8 +16,9 @@ http {
             proxy_set_header Host $http_host;
         }
 
+        # Route all other traffic to port 3000
         location / {
-            proxy_pass http://${HOSTNAME}:${INTERNAL_NEXTJS_PORT};
+            proxy_pass http://${HOSTNAME}:3000;
             proxy_set_header Host $http_host;
             proxy_set_header X-Real-IP $remote_addr;
             proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

package.json

@@ -78,7 +78,7 @@
     "overrides": {
       "@babel/helpers@<7.26.10": ">=7.29.7",
       "@babel/runtime@<7.26.10": ">=7.29.7",
-      "axios@>=1.0.0 <1.8.2": ">=1.17.0",
+      "axios@>=1.0.0 <1.8.2": ">=1.16.1",
       "brace-expansion@>=2.0.0 <=2.0.1": ">=5.0.6",
       "brace-expansion@>=1.0.0 <=1.1.11": ">=5.0.6",
       "esbuild@<=0.24.2": ">=0.28.0",

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-lock.yaml

@@ -40,8 +40,8 @@ catalogs:
       specifier: 7.2.1
       version: 7.2.1
     '@gfazioli/mantine-onboarding-tour':
-      specifier: ^4.0.4
-      version: 4.0.4
+      specifier: ^4.0.3
+      version: 4.0.3
     '@gitbeaker/rest':
       specifier: ^43.8.0
       version: 43.8.0
@@ -532,7 +532,7 @@ catalogs:
 overrides:
   '@babel/helpers@<7.26.10': '>=7.29.7'
   '@babel/runtime@<7.26.10': '>=7.29.7'
-  axios@>=1.0.0 <1.8.2: '>=1.17.0'
+  axios@>=1.0.0 <1.8.2: '>=1.16.1'
   brace-expansion@>=2.0.0 <=2.0.1: '>=5.0.6'
   brace-expansion@>=1.0.0 <=1.1.11: '>=5.0.6'
   esbuild@<=0.24.2: '>=0.28.0'
@@ -651,7 +651,7 @@ importers:
         version: 3.2.2(react@19.2.7)
       '@gfazioli/mantine-onboarding-tour':
         specifier: 'catalog:'
-        version: 4.0.4(@mantine/core@9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.2.2(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 4.0.3(@mantine/core@9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.2.2(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@homarr/analytics':
         specifier: workspace:^0.1.0
         version: link:../../packages/analytics
@@ -3316,8 +3316,8 @@ packages:
   '@formatjs/intl-localematcher@0.8.1':
     resolution: {integrity: sha512-xwEuwQFdtSq1UKtQnyTZWC+eHdv7Uygoa+H2k/9uzBVQjDyp9r20LNDNKedWXll7FssT3GRHvqsdJGYSUWqYFA==}
 
-  '@gfazioli/mantine-onboarding-tour@4.0.4':
-    resolution: {integrity: sha512-8O70elJVFSJJCB/Ie4TDxAKuDgE1BRU8o7O7ArFWzPYGx4Sa4jWW8OC0QyjxZul5aFaFJFl55lG263oh7IMkHg==}
+  '@gfazioli/mantine-onboarding-tour@4.0.3':
+    resolution: {integrity: sha512-krYmZoGSV9qpvtztK+QChhfwv1l6LsP/n0u+ih2/A0mV0Osn5avmlj+UBAKoIvwzA4xS50NSoPHj3B53QLzs/Q==}
     peerDependencies:
       '@mantine/core': '>=9.0.0'
       '@mantine/hooks': '>=9.0.0'
@@ -10525,7 +10525,7 @@ snapshots:
       '@formatjs/fast-memoize': 3.1.0
       tslib: 2.8.1
 
-  '@gfazioli/mantine-onboarding-tour@4.0.4(@mantine/core@9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.2.2(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@gfazioli/mantine-onboarding-tour@4.0.3(@mantine/core@9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@mantine/hooks@9.2.2(react@19.2.7))(@tabler/icons-react@3.44.0(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@mantine/core': 9.2.2(@mantine/hooks@9.2.2(react@19.2.7))(@types/react@19.2.16)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@mantine/hooks': 9.2.2(react@19.2.7)

pnpm-workspace.yaml

@@ -14,7 +14,7 @@ catalog:
   "@dnd-kit/utilities": ^3.2.2
   "@drizzle-team/brocli": ^0.12.0
   "@extractus/feed-extractor": 7.2.1
-  '@gfazioli/mantine-onboarding-tour': ^4.0.4
+  '@gfazioli/mantine-onboarding-tour': ^4.0.3
   "@gitbeaker/rest": ^43.8.0
   "@homarr/gridstack": ^1.12.0
   "@homarr/node-unifi": ^2.6.0

scripts/run.sh

@@ -17,11 +17,12 @@ fi
 # Auth secret is generated every time the container starts as it is required, but not used because we don't need JWTs or Mail hashing
 export AUTH_SECRET=$(openssl rand -base64 32)
 
-export PORT=${PORT:-7575}
-export INTERNAL_NEXTJS_PORT=7901
-
+# Start nginx proxy
+# 1. Replace the HOSTNAME in the nginx template file
+# 2. Create the nginx configuration file from the template
+# 3. Start the nginx server
 export HOSTNAME
-envsubst '${HOSTNAME} ${PORT} ${INTERNAL_NEXTJS_PORT}' < /etc/nginx/templates/nginx.conf > /etc/nginx/nginx.conf
+envsubst '${HOSTNAME}' < /etc/nginx/templates/nginx.conf > /etc/nginx/nginx.conf
 # Start services in the background and store their PIDs
 nginx -g 'daemon off;' &
 NGINX_PID=$!
@@ -35,7 +36,7 @@ else
     REDIS_PID=$!
 fi
 
-PORT=$INTERNAL_NEXTJS_PORT node apps/nextjs/server.js &
+node apps/nextjs/server.js &
 NEXTJS_PID=$!
 
 # Function to handle SIGTERM and shut down services