fix: use valid widget inset token

The small refresh-circle overlay that appeared in a widget's top-right
corner during a background refetch wasn't adding useful signal and
just added visual noise. Drop the isWidgetRefreshing detection, the
indicator markup/CSS, and the now-dead query-key/runtime-query
plumbing that only existed to power it.

Updated the lazy-widgets e2e test to drop its assertions on the now
-removed [data-widget-refreshing] marker; the behavior it was really
verifying (cached content stays visible during a background refetch,
which completes cleanly) is still covered by the existing network
-level checks in the same test.

apps/docs/docs/management/api/index.mdx

@@ -113,7 +113,7 @@ The OpenAPI and MCP APIs include board management endpoints for common automatio
 - Set desktop and mobile home boards for the current user
 - Configure global board defaults such as public home boards and status behavior
 
-Board layout responses identify each layout with a `mobile`, `base`, or `custom` role. Mobile and Base are protected. Layout-saving clients must preserve existing roles, keep Mobile at breakpoint `0`, keep Base as the highest breakpoint, and use unique custom breakpoints between them. The layout save operation returns the canonical saved layouts, including server-generated IDs for new custom layouts. A non-Base layout can be regenerated from Base with the protected reset operation.
+Board layout responses identify each layout with a `mobile`, `base`, or `custom` role. Mobile and Base are protected. Layout-saving clients must preserve existing roles, keep Mobile at breakpoint `0`, and use a unique breakpoint for every layout. Base and custom layouts can appear in any breakpoint order. The layout save operation returns the canonical saved layouts, including server-generated IDs for new custom layouts. A non-Base layout can be regenerated from Base with the protected reset operation.
 
 The internal `board.getManageOverview` tRPC query returns compact board previews limited to 12 layout rows by default. Callers may provide `previewRowLimit` from 1 through 48; `fullPreview: true` requests the server's 48-row maximum.
 

apps/docs/docs/management/boards/index.mdx

@@ -133,20 +133,21 @@ On larger canvases, the complete board grows together like browser zoom.
 The complete canvas always fits the available width and never adds horizontal board scrolling.
 
 - **Mobile** starts at `0px` and uses three columns on new boards.
-- **Base** is the widest layout and starts at `768px` on new boards.
+- **Base** is the main layout and starts at `768px` on new boards.
 
 Mobile and Base can be renamed and their column counts can be changed, but they cannot be removed. Mobile has no fixed
-rails; rail configuration is available only on Base and custom layouts. You can add removable custom layouts between
-their breakpoints.
+rails; rail configuration is available only on Base and custom layouts. You can add removable custom layouts at any
+unused breakpoint above Mobile.
 
 Each layout stores independent positions and sizes. Moving or resizing a widget while editing Mobile does not move it in
-Base or any custom layout. New custom layouts start from Base's current column count and rail widths; Homarr chooses a
-free breakpoint between Mobile and Base, and you can then change the breakpoint, columns, and rails.
+Base or any custom layout. New custom layouts start from Base's current column count and rail widths; Homarr chooses an
+available breakpoint, and you can then change the breakpoint, columns, and rails.
 
 Older or incomplete boards are repaired automatically. A board with no layouts receives Mobile at `0px` with three
 columns and Base at `768px` with ten columns. A board with one layout keeps it as Base and receives a generated Mobile
-layout. With multiple layouts, the narrowest becomes Mobile, the widest becomes Base, and intermediate layouts remain
-custom. Duplicate or out-of-order breakpoints are normalized without discarding saved positions.
+layout. When protected roles are missing from a board with multiple layouts, the narrowest becomes Mobile, the widest
+becomes Base, and intermediate layouts become custom. Once roles exist, breakpoint changes do not reassign them.
+Duplicate breakpoints are normalized without discarding saved positions.
 
 Use **Reset from Base** on Mobile or a custom layout to replace all of its positions and sizes with a newly generated version of Base. The layout's name, breakpoint, and column count are kept.
 
@@ -182,7 +183,8 @@ Apps, widgets, and Containers inside them still use the same fixed `200 × 200`
 #### Breakpoint
 
 The minimum screen width where the layout is used; a layout is eligible at its breakpoint and above. Mobile is fixed at
-`0px`. Custom breakpoints must be unique and sit between Mobile and Base. Base must remain the highest breakpoint.
+`0px`. Every other breakpoint must be unique, but Base and custom layouts can be ordered at any width. Homarr uses the
+eligible layout with the highest breakpoint, regardless of its role.
 When the initial viewport is not available, Homarr uses its remembered viewport information, client hints, or User-Agent
 fallback to select a layout.
 

apps/docs/docs/widgets/speedtest-tracker/index.mdx

@@ -18,7 +18,7 @@ import { speedtestTrackerIntegration } from "@site/docs/integrations/speedtest-t
 This widget displays internet speed test results from your [Speedtest Tracker](https://docs.speedtest-tracker.dev/) instance,
 including the latest result, historical averages, and a live chart of the last 12 hours.
 
-Advanced view renders a source-labeled panel for every healthy integration. Each panel exposes that source's latest test, statistics, speed and ping charts, plus 12-hour, 24-hour, and truthful **Last 30** result ranges regardless of compact visibility switches. Compact mode keeps every configured overview section in its familiar card layout and names its healthy sources when multiple integrations are selected.
+The widget keeps every configured overview section in a compact card layout and names its healthy sources when multiple integrations are selected.
 
 When multiple Speedtest Tracker integrations are selected, results from healthy sources remain visible if another source fails. A warning indicator identifies each unavailable integration without exposing private request details. If every selected integration fails, the widget reports an error; if cached data remains visible after a later total failure, a stale-data warning is shown.
 

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx

@@ -40,6 +40,8 @@ interface Props {
   saveSettingsAsync: () => Promise<FormValues | null>;
 }
 
+const layoutRoleOrder = { base: 0, custom: 1, mobile: 2 } as const;
+
 export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync }: Props) => {
   const tBoard = useI18n("board");
   const tLayout = useI18n("layout");
@@ -101,6 +103,9 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
 
   const nextBreakpoint = getNextCustomBreakpoint(form.values.layouts);
   const baseLayout = form.values.layouts.find((layout) => layout.role === "base");
+  const displayedLayouts = form.values.layouts
+    .map((layout, index) => ({ layout, index }))
+    .toSorted((first, second) => layoutRoleOrder[first.layout.role] - layoutRoleOrder[second.layout.role]);
 
   return (
     <SectionCard title={tBoard("setting.section.layout.title")}>
@@ -134,13 +139,9 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
           </Button>
         </Group>
 
-        {form.values.layouts.map((layout, index) => {
+        {displayedLayouts.map(({ layout, index }) => {
           const persistedLayout = board.layouts.find((candidate) => candidate.id === layout.id);
           const sourceLayout = persistedLayout ?? board.layouts.find((candidate) => candidate.role === "base");
-          const customBreakpoints = form.values.layouts
-            .filter((candidate) => candidate.role === "custom" && candidate.id !== layout.id)
-            .map((candidate) => candidate.breakpoint);
-          const baseBreakpoint = form.values.layouts.find((candidate) => candidate.role === "base")?.breakpoint ?? 768;
 
           return (
             <Fieldset
@@ -190,12 +191,8 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
                       }
                       disabled={layout.role === "mobile"}
                       styles={{ description: { color: "var(--mantine-color-text)" } }}
-                      min={
-                        layout.role === "base"
-                          ? Math.max(1, ...customBreakpoints.map((breakpoint) => breakpoint + 1))
-                          : 1
-                      }
-                      max={layout.role === "custom" ? baseBreakpoint - 1 : 32767}
+                      min={layout.role === "mobile" ? 0 : 1}
+                      max={32767}
                     />
                   </Stack>
                 </Grid.Col>

apps/nextjs/src/components/board/items/item-content.module.css

@@ -1,21 +1,7 @@
-.refreshIndicator {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  z-index: 3;
-  display: grid;
-  place-items: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--mantine-color-body) 78%, transparent);
-  pointer-events: none;
-}
-
 .settingsButton {
   position: absolute;
-  top: -34px;
-  right: 14px;
+  top: calc(var(--mantine-spacing-sm) / 2);
+  right: calc(var(--mantine-spacing-sm) / 2);
   z-index: 201;
   opacity: 0;
   pointer-events: none;
@@ -66,7 +52,6 @@
 
 @media (max-width: 768px) {
   .settingsButton {
-    right: 4px;
     opacity: 1;
     pointer-events: auto;
   }

apps/nextjs/src/components/board/items/item-content.tsx

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import dynamic from "next/dynamic";
 import { Box, Button, Center, Loader, Portal } from "@mantine/core";
 import { useElementSize, useIsomorphicEffect } from "@mantine/hooks";
-import { QueryErrorResetBoundary, useIsFetching, useQueryClient } from "@tanstack/react-query";
+import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "@homarr/widgets/errors/classes";
 import type { FallbackProps } from "react-error-boundary";
@@ -19,7 +19,6 @@ import { WidgetError } from "@homarr/widgets/errors";
 import {
   createWidgetRuntimeState,
   getWidgetQueryKeys,
-  getWidgetRuntimeQueries,
   supportsAdvancedFocus as definitionSupportsAdvancedFocus,
 } from "@homarr/widgets/definition";
 import type { WidgetComponentProps, WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets/definition";
@@ -40,7 +39,6 @@ import { useItemActions } from "./item-actions";
 import itemContentClasses from "./item-content.module.css";
 import { WidgetContextMenu } from "./widget-context-menu";
 import { removeWidgetDataQueries } from "./widget-query-recovery";
-import { matchesWidgetItemQuery } from "./widget-query-scope";
 
 const BoardItemMenu = dynamic(() => import("./item-menu").then((module) => module.BoardItemMenu), {
   ssr: false,
@@ -158,24 +156,6 @@ const LoadedBoardItemContent = ({
     () => ({ ...item, options: reduceWidgetOptionsWithDefinition(definition, settings, item.options) }),
     [definition, item, settings],
   );
-  const widgetQueryKeys = useMemo(() => getWidgetQueryKeys(definition, item.kind), [definition, item.kind]);
-  const isWidgetRefreshing =
-    useIsFetching({
-      predicate: (query) =>
-        query.state.data !== undefined &&
-        matchesWidgetItemQuery(
-          query.queryKey,
-          widgetQueryKeys,
-          {
-            itemId: item.id,
-            boardId: board.id,
-            integrationIds: item.integrationIds,
-            options: menuItem.options,
-            runtimeQueries: getWidgetRuntimeQueries(widgetRuntimeRef),
-          },
-          definition.queryMatcher,
-        ),
-    }) > 0;
   const [manualSurface, setManualSurface] = useState<HTMLDivElement | null>(null);
   const [surfacePortalTarget, setSurfacePortalTarget] = useState<HTMLDivElement | null>(null);
   const { active, viewportSize, open, close, dismiss, hover, leave } = useAdvancedFocus();
@@ -343,11 +323,6 @@ const LoadedBoardItemContent = ({
           />
         </ErrorBoundary>
       </Box>
-      {isWidgetRefreshing && (
-        <Box className={itemContentClasses.refreshIndicator} data-widget-refreshing aria-hidden>
-          <Loader size="xs" />
-        </Box>
-      )}
     </WidgetCardShell>
   );
 

apps/nextjs/src/components/board/items/widget-hover-overlay.module.css

@@ -49,12 +49,14 @@
 }
 
 .widgetIcon {
+  width: var(--mantine-font-size-sm);
+  height: var(--mantine-font-size-sm);
   flex-shrink: 0;
   color: var(--mantine-color-dimmed);
 }
 
 .name {
-  font-size: 11px;
+  font-size: var(--mantine-font-size-xs);
   font-weight: 600;
   line-height: 1.2;
   white-space: nowrap;
@@ -94,7 +96,7 @@
   padding: 2px 6px;
   border-radius: var(--mantine-radius-md);
   background-color: var(--chip-background);
-  font-size: 10px;
+  font-size: var(--mantine-font-size-xxs);
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;

apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css

@@ -2,7 +2,8 @@
   width: 100%;
   max-width: 100%;
   min-width: 0;
-  overflow: clip;
+  overflow-x: clip;
+  overflow-y: visible;
 }
 
 .viewport[data-board-hydrated="false"] {

apps/nextjs/src/components/board/sections/grid/grid-editor.css

@@ -13,7 +13,7 @@
 
 .board-grid-entry:has([data-board-widget-header]):hover,
 .board-grid-entry:has([data-board-widget-header]):focus-within {
-  z-index: 10;
+  z-index: var(--homarr-z-index-widget-focus);
 }
 
 .board-grid-entry[data-grid-preview="true"] {

e2e/lazy-widgets.spec.ts

@@ -163,7 +163,6 @@ describe("lazy widget application graph", () => {
       });
       await expect.poll(() => refreshRequestStarted, { timeout: 10_000 }).toBe(true);
       await expect(cachedDownload).toBeVisible({ timeout: 5_000 });
-      await expect(downloadsWidget.locator("[data-widget-refreshing]")).toBeVisible();
 
       const refreshedDownloadsResponse = page.waitForResponse(
         (response) => response.url().includes("widget.downloads.getJobsAndStatuses") && response.ok(),
@@ -171,7 +170,6 @@ describe("lazy widget application graph", () => {
       releaseRefresh();
       releaseRefresh = undefined;
       await refreshedDownloadsResponse;
-      await expect(downloadsWidget.locator("[data-widget-refreshing]")).toHaveCount(0);
       await page.unroute(downloadsRequestPattern, delayDownloadsRefresh);
       expect(pageErrors).toEqual([]);
       expect(hydrationErrors).toEqual([]);

packages/api/src/router/board.ts

@@ -2776,14 +2776,11 @@ export const boardLayoutsNeedRepair = (
 ) => {
   const mobileLayouts = boardLayouts.filter((layout) => layout.role === "mobile");
   const baseLayouts = boardLayouts.filter((layout) => layout.role === "base");
-  const baseLayout = baseLayouts.at(0);
 
   return (
     mobileLayouts.length !== 1 ||
     baseLayouts.length !== 1 ||
     mobileLayouts.at(0)?.breakpoint !== 0 ||
-    !baseLayout ||
-    boardLayouts.some((layout) => layout.id !== baseLayout.id && layout.breakpoint >= baseLayout.breakpoint) ||
     new Set(boardLayouts.map((layout) => layout.breakpoint)).size !== boardLayouts.length
   );
 };

packages/db/migrations/seed.ts

@@ -143,8 +143,8 @@ export const seedProtectedBoardLayoutsAsync = async (db: Database, boardId?: str
       }
     }
 
-    const mobileLayout = normalizedLayouts[0];
-    const baseLayout = normalizedLayouts.at(-1);
+    const mobileLayout = normalizedLayouts.find((layout) => layout.role === "mobile");
+    const baseLayout = normalizedLayouts.find((layout) => layout.role === "base");
     if (mobileLayout && baseLayout) {
       await insertMissingProjectedPositionsAsync(
         db,

packages/definitions/src/board.ts

@@ -33,14 +33,14 @@ export const normalizeBoardLayoutRoles = <
   const baseLayouts = sourceLayouts.filter((layout) => layout.role === "base");
   const mobileLayout = mobileLayouts.length === 1 ? mobileLayouts[0] : undefined;
   const baseLayout = baseLayouts.length === 1 ? baseLayouts[0] : undefined;
-  const orderedLayouts =
-    mobileLayout && baseLayout
-      ? [
-          mobileLayout,
-          ...sourceLayouts.filter((layout) => layout.role === "custom").toSorted(compareBoardLayouts),
-          baseLayout,
-        ]
-      : sourceLayouts.toSorted(compareBoardLayouts);
+  const hasProtectedLayouts = mobileLayout !== undefined && baseLayout !== undefined;
+  let orderedLayouts = sourceLayouts.toSorted(compareBoardLayouts);
+  if (hasProtectedLayouts) {
+    orderedLayouts = [
+      mobileLayout,
+      ...sourceLayouts.filter((layout) => layout.id !== mobileLayout.id).toSorted(compareBoardLayouts),
+    ];
+  }
 
   let previousBreakpoint = -1;
   return orderedLayouts.map((layout, index) => {
@@ -49,7 +49,12 @@ export const normalizeBoardLayoutRoles = <
       index === 0
         ? 0
         : Math.min(MAX_LAYOUT_BREAKPOINT - remainingLayouts, Math.max(previousBreakpoint + 1, layout.breakpoint));
-    const role: LayoutRole = index === 0 ? "mobile" : index === orderedLayouts.length - 1 ? "base" : "custom";
+    let role: LayoutRole = layout.role ?? "custom";
+    if (!hasProtectedLayouts) {
+      if (index === 0) role = "mobile";
+      else if (index === orderedLayouts.length - 1) role = "base";
+      else role = "custom";
+    }
     previousBreakpoint = breakpoint;
     return { ...layout, breakpoint, role };
   });

packages/translation/src/lang/en.json

@@ -4672,12 +4672,6 @@
       "noSectionsEnabled": "Enable at least one section in widget options.",
       "error": {
         "internalServerError": "Failed to fetch speedtest data"
-      },
-      "range": {
-        "twelveHours": "12h",
-        "oneDay": "24h",
-        "all": "All",
-        "lastThirty": "Last 30"
       }
     },
     "uptimeKuma": {
@@ -4851,7 +4845,8 @@
         "memory": "MEM",
         "network": "NET",
         "up": "UP",
-        "down": "DOWN"
+        "down": "DOWN",
+        "memoryTooltip": "{used} / {available} ({percent}%)"
       }
     },
     "systemDisks": {
@@ -5423,7 +5418,7 @@
           "title": "Layout",
           "responsive": {
             "title": "Responsive layouts",
-            "description": "Each layout keeps its own widget positions and sizes. Mobile and Base are always available; add custom layouts for widths in between.",
+            "description": "Each layout keeps its own widget positions and sizes. Mobile and Base are always available; add custom layouts at any additional breakpoint.",
             "action": {
               "add": "Add layout"
             }

packages/validation/src/board.ts

@@ -116,10 +116,6 @@ export const responsiveBoardLayoutsSchema = z
       ctx.addIssue({ code: "custom", message: "The Mobile layout breakpoint must be 0" });
     }
 
-    if (layouts.some((layout) => layout.id !== baseLayout.id && layout.breakpoint >= baseLayout.breakpoint)) {
-      ctx.addIssue({ code: "custom", message: "The Base layout must have the highest breakpoint" });
-    }
-
     if (new Set(layouts.map((layout) => layout.breakpoint)).size !== layouts.length) {
       ctx.addIssue({ code: "custom", message: "Layout breakpoints must be unique" });
     }

packages/widgets/src/speedtest-tracker/component.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { Box, Card, Group, ScrollArea, SegmentedControl, SimpleGrid, Stack, Text } from "@mantine/core";
+import { useMemo } from "react";
+import { Box, Group, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useI18n } from "@homarr/translation/client";
@@ -21,14 +21,10 @@ export default function SpeedtestTrackerWidget({
   options,
   integrationIds,
   width,
-  height,
-  displayMode = "compact",
 }: WidgetComponentProps<"speedtestTracker">) {
   const t = useI18n("widget.speedtestTracker");
   const dashboardQuery = clientApi.widget.speedtestTracker.getDashboard.useQuery({ integrationIds });
   const dashboardData = getUsableWidgetQueryData(dashboardQuery) ?? emptyDashboardData;
-  const [advancedRange, setAdvancedRange] = useState("24");
-  const isAdvanced = displayMode === "advanced";
   const successfulDashboards = useMemo(() => getAvailableSpeedtestDashboards(dashboardData), [dashboardData]);
 
   const combined = useMemo(
@@ -36,98 +32,24 @@ export default function SpeedtestTrackerWidget({
     [successfulDashboards],
   );
 
-  const rangeHours = isAdvanced ? Number(advancedRange) : 12;
-  const cutoff = rangeHours > 0 ? Date.now() - rangeHours * 60 * 60 * 1000 : 0;
+  const cutoff = Date.now() - 12 * 60 * 60 * 1000;
   const recentFiltered = combined.recentResults.filter((result) => result.created_at.getTime() > cutoff);
 
-  const showLatestResult = isAdvanced || options.showLatestResult;
-  const showStats = isAdvanced || options.showStats;
-  const showRecentResults = isAdvanced || options.showRecentResults;
-  const showPingGraph = isAdvanced || options.showPingGraph;
+  const showLatestResult = options.showLatestResult;
+  const showStats = options.showStats;
+  const showRecentResults = options.showRecentResults;
+  const showPingGraph = options.showPingGraph;
   const hasStatSection = (showLatestResult && combined.latestResult !== null) || (showStats && combined.stats !== null);
   const hasChart = showRecentResults && recentFiltered.length > 0;
-  const noSectionsEnabled =
-    !isAdvanced && !options.showLatestResult && !options.showStats && !options.showRecentResults;
-  const advancedSectionWidth = width >= 720 ? width / 2 : width;
+  const noSectionsEnabled = !options.showLatestResult && !options.showStats && !options.showRecentResults;
 
   const latest = showLatestResult && combined.latestResult && (
-    <LatestResultSection
-      result={combined.latestResult}
-      width={isAdvanced ? advancedSectionWidth : width}
-      compactSurface={!isAdvanced}
-    />
+    <LatestResultSection result={combined.latestResult} width={width} compactSurface />
   );
   const averages = showStats && combined.stats && (
-    <AveragesSection
-      stats={combined.stats}
-      width={isAdvanced ? advancedSectionWidth : width}
-      compactSurface={!isAdvanced}
-    />
+    <AveragesSection stats={combined.stats} width={width} compactSurface />
   );
 
-  if (displayMode === "advanced") {
-    const sourceColumns = successfulDashboards.length > 1 && width >= 900 ? 2 : 1;
-    const sourcePanelWidth = sourceColumns === 2 ? Math.max(0, (width - 48) / 2) : Math.max(0, width - 32);
-    const sourceSectionWidth = sourcePanelWidth >= 720 ? sourcePanelWidth / 2 : sourcePanelWidth;
-
-    return (
-      <Box h="100%" pos="relative">
-        <Group pos="absolute" top={4} right={8} gap={0} style={{ zIndex: 2 }}>
-          <IntegrationErrorIndicator results={dashboardData} />
-        </Group>
-        <ScrollArea h="100%">
-          <Stack gap="md" p="md">
-            <SegmentedControl
-              size="xs"
-              value={advancedRange}
-              onChange={setAdvancedRange}
-              data={[
-                { value: "12", label: t("range.twelveHours") },
-                { value: "24", label: t("range.oneDay") },
-                { value: "0", label: t("range.lastThirty") },
-              ]}
-            />
-            {successfulDashboards.length === 0 ? (
-              <WidgetEmptyState />
-            ) : (
-              <SimpleGrid cols={sourceColumns} spacing="md">
-                {successfulDashboards.map(({ integrationId, integrationName, dashboard }) => {
-                  const sourceRecent = dashboard.recentResults.filter((result) => result.created_at.getTime() > cutoff);
-                  const sourceHasStats = dashboard.latestResult !== null || dashboard.stats !== null;
-                  const sourceHasChart = sourceRecent.length > 0;
-
-                  return (
-                    <Card key={integrationId} data-integration-id={integrationId} p="sm" withBorder>
-                      <Stack gap="md">
-                        <Text size="sm" fw={600} truncate>
-                          {integrationName}
-                        </Text>
-                        {sourceHasStats && (
-                          <SimpleGrid cols={sourcePanelWidth >= 720 ? 2 : 1} spacing="md">
-                            {dashboard.latestResult && (
-                              <LatestResultSection result={dashboard.latestResult} width={sourceSectionWidth} />
-                            )}
-                            {dashboard.stats && <AveragesSection stats={dashboard.stats} width={sourceSectionWidth} />}
-                          </SimpleGrid>
-                        )}
-                        {sourceHasChart && (
-                          <Box h={Math.max(260, Math.min(420, height / 2))}>
-                            <RecentResultsSection results={sourceRecent} showPingGraph />
-                          </Box>
-                        )}
-                        {!sourceHasStats && !sourceHasChart && <WidgetEmptyState />}
-                      </Stack>
-                    </Card>
-                  );
-                })}
-              </SimpleGrid>
-            )}
-          </Stack>
-        </ScrollArea>
-      </Box>
-    );
-  }
-
   return (
     <Box h="100%" pos="relative">
       <Group pos="absolute" top={4} right={8} gap={0} style={{ zIndex: 2 }}>

packages/widgets/src/speedtest-tracker/index.ts

@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("speedtestTracker", {
   icon: IconSpeedboat,
-  supportsAdvancedFocus: true,
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from(

packages/widgets/src/system-resources/chart/combined-network-traffic.tsx

@@ -1,4 +1,4 @@
-import { Box, Group, Paper, Stack, Text } from "@mantine/core";
+import { Box, Group, Stack, Text } from "@mantine/core";
 import { IconNetwork } from "@tabler/icons-react";
 
 import { formatByteRate } from "@homarr/common";
@@ -21,9 +21,43 @@ export const CombinedNetworkTrafficChart = ({
   labelDisplayMode: LabelDisplayModeOption;
   advanced?: boolean;
 }) => {
-  const chartData = usageOverTime.map((usage, index) => ({ index, up: usage.up, down: usage.down }));
+  const chartData = usageOverTime.map((usage, index) => ({
+    index,
+    up: usage.up,
+    down: usage.down,
+  }));
   const t = useI18n("widget.systemResources.card");
 
+  const tooltipLabel = (index: number) => {
+    const point = usageOverTime[index];
+    return (
+      <Stack gap={2}>
+        <Group gap={4} wrap="nowrap">
+          <Box
+            bg="orange.5"
+            w={8}
+            h={8}
+            style={{ borderRadius: 99, flexShrink: 0 }}
+          />
+          <Text size="xs">
+            {t("up")}: {formatByteRate(Math.round(point?.up ?? 0))}
+          </Text>
+        </Group>
+        <Group gap={4} wrap="nowrap">
+          <Box
+            bg="yellow.5"
+            w={8}
+            h={8}
+            style={{ borderRadius: 99, flexShrink: 0 }}
+          />
+          <Text size="xs">
+            {t("down")}: {formatByteRate(Math.round(point?.down ?? 0))}
+          </Text>
+        </Group>
+      </Stack>
+    );
+  };
+
   return (
     <CommonChart
       data={chartData}
@@ -38,28 +72,7 @@ export const CombinedNetworkTrafficChart = ({
       chartType={hasShadow ? "area" : "line"}
       labelDisplayMode={labelDisplayMode}
       advanced={advanced}
-      tooltipProps={{
-        content: ({ payload }) => {
-          return (
-            <Paper px={3} py={2} shadow="md">
-              <Stack gap={0}>
-                {payload.map((payloadData) => (
-                  <Group key={payloadData.key} gap={4}>
-                    <Box bg={payloadData.color} w={10} h={10} style={{ borderRadius: 99 }}></Box>
-                    <Text c="dimmed" size="xs">
-                      {payloadData.value === undefined ? (
-                        <>N/A</>
-                      ) : (
-                        formatByteRate(Math.round(Number(payloadData.value)))
-                      )}
-                    </Text>
-                  </Group>
-                ))}
-              </Stack>
-            </Paper>
-          );
-        },
-      }}
+      tooltipLabel={tooltipLabel}
     />
   );
 };

packages/widgets/src/system-resources/chart/common-chart.tsx

@@ -1,10 +1,24 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CSSProperties, ReactNode } from "react";
+import type {
+  CSSProperties,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+} from "react";
+import { useState } from "react";
 import type { AreaChartSeries } from "@mantine/charts";
 import { AreaChart, LineChart } from "@mantine/charts";
-import { Card, Center, Group, Stack, Text, useComputedColorScheme, useMantineTheme } from "@mantine/core";
+import {
+  Card,
+  Center,
+  Group,
+  Stack,
+  Text,
+  Tooltip,
+  useComputedColorScheme,
+  useMantineTheme,
+} from "@mantine/core";
 import { useElementSize, useHover, useMergedRef } from "@mantine/hooks";
-import type { TooltipProps, YAxisProps } from "recharts";
+import type { YAxisProps } from "recharts";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import { zoomCompensatedSize } from "@homarr/ui";
@@ -19,7 +33,7 @@ export const CommonChart = ({
   title,
   icon: Icon,
   labelDisplayMode,
-  tooltipProps,
+  tooltipLabel,
   yAxisProps,
   lastValue,
   chartType = "line",
@@ -31,7 +45,10 @@ export const CommonChart = ({
   title: ReactNode;
   icon: TablerIcon;
   labelDisplayMode: LabelDisplayModeOption;
-  tooltipProps?: TooltipProps<number, any>;
+  // What to show on hover. Defaults to lastValue when omitted. Pass a function to reflect
+  // the datum under the cursor as it moves across multi-point data (e.g. memory's
+  // used/available at that point), instead of always showing the latest value.
+  tooltipLabel?: ReactNode | ((index: number) => ReactNode);
   yAxisProps?: Omit<YAxisProps, "ref">;
   lastValue?: string;
   chartType?: "line" | "area";
@@ -45,63 +62,80 @@ export const CommonChart = ({
   const ref = useMergedRef(elementSizeRef, hoverRef);
 
   const opacity = board.opacity / 100;
-  let backgroundColor = colorScheme === "dark" ? `rgba(57, 57, 57, ${opacity})` : `rgba(246, 247, 248, ${opacity})`;
+  let backgroundColor =
+    colorScheme === "dark"
+      ? `rgba(57, 57, 57, ${opacity})`
+      : `rgba(246, 247, 248, ${opacity})`;
   const cardStyle: CSSProperties = { overflow: "hidden" };
-  const chartRootStyle: CSSProperties = { padding: 5, borderRadius: theme.radius[board.itemRadius] };
+  const chartRootStyle: CSSProperties = {
+    padding: 5,
+    borderRadius: theme.radius[board.itemRadius],
+  };
   if (advanced) {
-    backgroundColor = "rgb(from var(--mantine-color-primaryColor-filled) r g b / calc(var(--opacity, 1) * 0.12))";
+    backgroundColor =
+      "rgb(from var(--mantine-color-primaryColor-filled) r g b / calc(var(--opacity, 1) * 0.12))";
     cardStyle.border =
       "1px solid rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.45))";
     chartRootStyle.backgroundColor = backgroundColor;
   }
 
   const ChartComponent = chartType === "line" ? LineChart : AreaChart;
-  const showIcon = labelDisplayMode === "icon" || labelDisplayMode === "textWithIcon";
-  const showText = labelDisplayMode === "text" || labelDisplayMode === "textWithIcon";
+  const showIcon =
+    labelDisplayMode === "icon" || labelDisplayMode === "textWithIcon";
+  const showText =
+    labelDisplayMode === "text" || labelDisplayMode === "textWithIcon";
+
+  // Track which data point the cursor is over so the tooltip can reflect that point
+  // instead of always showing the latest value while scrubbing across the chart.
+  const [hoveredIndex, setHoveredIndex] = useState(data.length - 1);
+  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (data.length <= 1) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    if (rect.width === 0) return;
+    const ratio = (event.clientX - rect.left) / rect.width;
+    const index = Math.round(ratio * (data.length - 1));
+    setHoveredIndex(Math.min(data.length - 1, Math.max(0, index)));
+  };
+
+  // Clamp on read rather than syncing via an effect - handles data growing/shrinking
+  // between renders (e.g. history resetting on integration change) without ever
+  // handing a stale or out-of-range index to tooltipLabel.
+  const clampedHoveredIndex = Math.max(
+    0,
+    Math.min(hoveredIndex, data.length - 1),
+  );
+  const resolvedTooltipLabel =
+    typeof tooltipLabel === "function"
+      ? tooltipLabel(clampedHoveredIndex)
+      : (tooltipLabel ?? lastValue);
 
   return (
-    <Card ref={ref} h={"100%"} pos={"relative"} style={cardStyle} p={0} bg={backgroundColor} radius={board.itemRadius}>
-      {data.length > 1 && height > 40 && !hovered && (
-        <Group
-          pos={"absolute"}
-          top={0}
-          left={0}
-          p={8}
-          pt={6}
-          gap={5}
-          wrap={"nowrap"}
-          style={{ zIndex: 2, pointerEvents: "none" }}
-          align="center"
-        >
-          {showIcon && (
-            <Icon
-              color="var(--mantine-color-dimmed)"
-              style={zoomCompensatedSize(height > 100 ? 20 : 14)}
-              stroke={1.5}
-            />
-          )}
-          {showText && (
-            <Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"}>
-              {title}
-            </Text>
-          )}
-          {lastValue && (
-            <Text c={"dimmed"} size={height > 100 ? "md" : "xs"} lineClamp={1}>
-              {lastValue}
-            </Text>
-          )}
-        </Group>
-      )}
-      {advanced && data.length > 1 && height > 0 && height <= 40 && lastValue && !hovered && (
-        <Center pos="absolute" w="100%" h="100%" style={{ zIndex: 2, pointerEvents: "none" }}>
-          <Text size="xs" fw={600}>
-            {lastValue}
-          </Text>
-        </Center>
-      )}
-      {data.length <= 1 ? (
-        <Center pos="absolute" w="100%" h="100%">
-          <Stack px={"xs"} align={"center"} gap={4}>
+    <Tooltip.Floating
+      label={resolvedTooltipLabel}
+      disabled={data.length <= 1 || !resolvedTooltipLabel}
+    >
+      <Card
+        ref={ref}
+        h={"100%"}
+        pos={"relative"}
+        style={cardStyle}
+        p={0}
+        bg={backgroundColor}
+        radius={board.itemRadius}
+        onPointerMove={handlePointerMove}
+      >
+        {data.length > 1 && height > 40 && !hovered && (
+          <Group
+            pos={"absolute"}
+            top={0}
+            left={0}
+            p={8}
+            pt={6}
+            gap={5}
+            wrap={"nowrap"}
+            style={{ zIndex: 2, pointerEvents: "none" }}
+            align="center"
+          >
             {showIcon && (
               <Icon
                 color="var(--mantine-color-dimmed)"
@@ -110,43 +144,85 @@ export const CommonChart = ({
               />
             )}
             {showText && (
-              <Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"} ta="center">
+              <Text c={"dimmed"} size={height > 100 ? "md" : "xs"} fw={"bold"}>
                 {title}
               </Text>
             )}
-            {advanced && lastValue && (
-              <Text size={height > 100 ? "md" : "xs"} fw={600} ta="center">
+            {lastValue && (
+              <Text
+                c={"dimmed"}
+                size={height > 100 ? "md" : "xs"}
+                lineClamp={1}
+              >
                 {lastValue}
               </Text>
             )}
-          </Stack>
-        </Center>
-      ) : (
-        <ChartComponent
-          data={data}
-          dataKey={dataKey}
-          h={"100%"}
-          series={series}
-          curveType="monotone"
-          tickLine="none"
-          gridAxis="none"
-          withXAxis={false}
-          withYAxis={false}
-          withDots={false}
-          bg={backgroundColor}
-          styles={{ root: chartRootStyle }}
-          tooltipAnimationDuration={200}
-          tooltipProps={{
-            // Render via portal so the tooltip isn't clipped by the card's overflow:hidden
-            // (needed to stop the chart line itself bleeding past its rounded corners).
-            portal: typeof document !== "undefined" ? document.body : undefined,
-            ...tooltipProps,
-          }}
-          withTooltip={height >= 64}
-          yAxisProps={yAxisProps}
-          fillOpacity={chartType === "area" ? 0.3 : undefined}
-        />
-      )}
-    </Card>
+          </Group>
+        )}
+        {advanced &&
+          data.length > 1 &&
+          height > 0 &&
+          height <= 40 &&
+          lastValue &&
+          !hovered && (
+            <Center
+              pos="absolute"
+              w="100%"
+              h="100%"
+              style={{ zIndex: 2, pointerEvents: "none" }}
+            >
+              <Text size="xs" fw={600}>
+                {lastValue}
+              </Text>
+            </Center>
+          )}
+        {data.length <= 1 ? (
+          <Center pos="absolute" w="100%" h="100%">
+            <Stack px={"xs"} align={"center"} gap={4}>
+              {showIcon && (
+                <Icon
+                  color="var(--mantine-color-dimmed)"
+                  style={zoomCompensatedSize(height > 100 ? 20 : 14)}
+                  stroke={1.5}
+                />
+              )}
+              {showText && (
+                <Text
+                  c={"dimmed"}
+                  size={height > 100 ? "md" : "xs"}
+                  fw={"bold"}
+                  ta="center"
+                >
+                  {title}
+                </Text>
+              )}
+              {advanced && lastValue && (
+                <Text size={height > 100 ? "md" : "xs"} fw={600} ta="center">
+                  {lastValue}
+                </Text>
+              )}
+            </Stack>
+          </Center>
+        ) : (
+          <ChartComponent
+            data={data}
+            dataKey={dataKey}
+            h={"100%"}
+            series={series}
+            curveType="monotone"
+            tickLine="none"
+            gridAxis="none"
+            withXAxis={false}
+            withYAxis={false}
+            withDots={false}
+            bg={backgroundColor}
+            styles={{ root: chartRootStyle }}
+            withTooltip={false}
+            yAxisProps={yAxisProps}
+            fillOpacity={chartType === "area" ? 0.3 : undefined}
+          />
+        )}
+      </Card>
+    </Tooltip.Floating>
   );
 };

packages/widgets/src/system-resources/chart/cpu-chart.tsx

@@ -1,4 +1,3 @@
-import { Paper, Text } from "@mantine/core";
 import { IconCpu } from "@tabler/icons-react";
 
 import { invariantTechnicalLabels } from "@homarr/definitions";
@@ -27,25 +26,16 @@ export const SystemResourceCPUChart = ({
       title={invariantTechnicalLabels.cpu}
       icon={IconCpu}
       lastValue={
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        cpuUsageOverTime.length > 0 ? `${Math.round(cpuUsageOverTime[cpuUsageOverTime.length - 1]!)}%` : undefined
+        cpuUsageOverTime.length > 0
+          ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            `${Math.round(cpuUsageOverTime[cpuUsageOverTime.length - 1]!)}%`
+          : undefined
       }
       chartType={hasShadow ? "area" : "line"}
       yAxisProps={{ domain: [0, 100] }}
       labelDisplayMode={labelDisplayMode}
       advanced={advanced}
-      tooltipProps={{
-        content: ({ payload }) => {
-          const value = payload[0] ? Number(payload[0].value) : 0;
-          return (
-            <Paper px={3} py={2} shadow="md">
-              <Text c="dimmed" size="xs">
-                {value.toFixed(0)}%
-              </Text>
-            </Paper>
-          );
-        },
-      }}
+      tooltipLabel={(index) => `${Math.round(cpuUsageOverTime[index] ?? 0)}%`}
     />
   );
 };

packages/widgets/src/system-resources/chart/gpu-chart.tsx

@@ -1,4 +1,3 @@
-import { Paper, Text } from "@mantine/core";
 import { IconDeviceDesktop } from "@tabler/icons-react";
 
 import { invariantTechnicalLabels } from "@homarr/definitions";
@@ -27,25 +26,16 @@ export const SystemResourceGPUChart = ({
       title={invariantTechnicalLabels.gpu}
       icon={IconDeviceDesktop}
       lastValue={
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        gpuUsageOverTime.length > 0 ? `${Math.round(gpuUsageOverTime[gpuUsageOverTime.length - 1]!)}%` : undefined
+        gpuUsageOverTime.length > 0
+          ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            `${Math.round(gpuUsageOverTime[gpuUsageOverTime.length - 1]!)}%`
+          : undefined
       }
       chartType={hasShadow ? "area" : "line"}
       yAxisProps={{ domain: [0, 100] }}
       labelDisplayMode={labelDisplayMode}
       advanced={advanced}
-      tooltipProps={{
-        content: ({ payload }) => {
-          const value = payload[0] ? Number(payload[0].value) : 0;
-          return (
-            <Paper px={3} py={2} shadow="md">
-              <Text c="dimmed" size="xs">
-                {value.toFixed(0)}%
-              </Text>
-            </Paper>
-          );
-        },
-      }}
+      tooltipLabel={(index) => `${Math.round(gpuUsageOverTime[index] ?? 0)}%`}
     />
   );
 };

packages/widgets/src/system-resources/chart/memory-chart.tsx

@@ -1,4 +1,3 @@
-import { Paper, Text } from "@mantine/core";
 import { IconBrain } from "@tabler/icons-react";
 
 import { formatBytesPair } from "@homarr/common";
@@ -20,15 +19,33 @@ export const SystemResourceMemoryChart = ({
   labelDisplayMode: LabelDisplayModeOption;
   advanced?: boolean;
 }) => {
-  const chartData = memoryUsageOverTime.map((usage, index) => ({ index, usage }));
+  const chartData = memoryUsageOverTime.map((usage, index) => ({
+    index,
+    usage,
+  }));
   const t = useI18n("widget.systemResources.card");
 
   const percentageUsed =
     memoryUsageOverTime.length > 0 && totalCapacityInBytes > 0
       ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        memoryUsageOverTime[memoryUsageOverTime.length - 1]! / totalCapacityInBytes
+        memoryUsageOverTime[memoryUsageOverTime.length - 1]! /
+        totalCapacityInBytes
       : undefined;
 
+  const tooltipLabel = (index: number) => {
+    const used = memoryUsageOverTime[index] ?? 0;
+    const memory = formatBytesPair(Math.round(used), totalCapacityInBytes);
+    const percent =
+      totalCapacityInBytes > 0
+        ? Math.round((used / totalCapacityInBytes) * 100)
+        : 0;
+    return t("memoryTooltip", {
+      used: memory.used,
+      available: memory.available,
+      percent,
+    });
+  };
+
   return (
     <CommonChart
       data={chartData}
@@ -39,22 +56,13 @@ export const SystemResourceMemoryChart = ({
       labelDisplayMode={labelDisplayMode}
       advanced={advanced}
       yAxisProps={{ domain: [0, totalCapacityInBytes] }}
-      lastValue={percentageUsed !== undefined ? `${Math.round(percentageUsed * 100)}%` : undefined}
+      lastValue={
+        percentageUsed !== undefined
+          ? `${Math.round(percentageUsed * 100)}%`
+          : undefined
+      }
       chartType={hasShadow ? "area" : "line"}
-      tooltipProps={{
-        content: ({ payload }) => {
-          const value = payload[0] ? Number(payload[0].value) : 0;
-          const memory = formatBytesPair(Math.round(value), totalCapacityInBytes);
-          return (
-            <Paper px={3} py={2} shadow="md">
-              <Text c="dimmed" size="xs">
-                {memory.used} / {memory.available} (
-                {totalCapacityInBytes > 0 ? Math.round((value / totalCapacityInBytes) * 100) : 0}%)
-              </Text>
-            </Paper>
-          );
-        },
-      }}
+      tooltipLabel={tooltipLabel}
     />
   );
 };

packages/widgets/src/system-resources/chart/network-traffic.tsx

@@ -1,4 +1,3 @@
-import { Paper, Text } from "@mantine/core";
 import { IconArrowDown, IconArrowUp } from "@tabler/icons-react";
 
 import { formatByteRate } from "@homarr/common";
@@ -39,18 +38,9 @@ export const NetworkTrafficChart = ({
       chartType={hasShadow ? "area" : "line"}
       labelDisplayMode={labelDisplayMode}
       advanced={advanced}
-      tooltipProps={{
-        content: ({ payload }) => {
-          const value = payload[0] ? Number(payload[0].value) : 0;
-          return (
-            <Paper px={3} py={2} shadow="md">
-              <Text c="dimmed" size="xs">
-                {formatByteRate(Math.round(value))}
-              </Text>
-            </Paper>
-          );
-        },
-      }}
+      tooltipLabel={(index) =>
+        formatByteRate(Math.round(usageOverTime[index] ?? 0))
+      }
     />
   );
 };