fix: use valid widget inset token

fix: inset widget edit action
fix: keep widget edit overlays visible
2026-08-28 16:50:39 +02:00 · 2026-08-28 16:48:31 +02:00 · 2026-08-28 16:36:05 +02:00 · 2026-08-28 15:44:25 +02:00 · 2026-08-28 17:36:41 +10:00 · 2026-08-28 08:31:41 +02:00
40 changed files with 523 additions and 463 deletions
@@ -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.

@@ -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.

@@ -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.

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

@@ -361,6 +336,7 @@ const LoadedBoardItemContent = ({
        widgetStateRef={widgetStateRef}
        widgetRuntimeRef={widgetRuntimeRef}
        sourceRef={sourceRef}
+        disabled={isAdvanced}
      >
        <Box
          ref={sourceRef}
@@ -44,6 +44,7 @@ interface WidgetContextMenuProps {
  widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
  widgetRuntimeRef: WidgetRuntimeRef;
  sourceRef: RefObject<HTMLElement | null>;
+  disabled?: boolean;
  children: ReactNode;
 }

@@ -53,6 +54,7 @@ export const WidgetContextMenu = ({
  previewDimensions,
  widgetRuntimeRef,
  sourceRef,
+  disabled = false,
  children,
 }: WidgetContextMenuProps) => {
  const { data: session } = useSession();
@@ -162,6 +164,7 @@ export const WidgetContextMenu = ({
    }) ?? [];

  const openEditModal = useCallback(() => {
+    setMenuOpened(false);
    openModal(
      {
        kind: item.kind,
@@ -230,6 +233,7 @@ export const WidgetContextMenu = ({

  const handleOpenAdvancedFocus = useCallback(() => {
    if (!sourceRef.current) return;
+    setMenuOpened(false);
    openAdvancedFocus(item.id, sourceRef.current, {
      restoreFocusTarget:
        sourceRef.current.querySelector<HTMLElement>("[data-advanced-focus-trigger]") ?? sourceRef.current,
@@ -256,7 +260,7 @@ export const WidgetContextMenu = ({
      opened={menuOpened}
      onChange={setMenuOpened}
    >
-      <Menu.ContextMenu>{children}</Menu.ContextMenu>
+      <Menu.ContextMenu disabled={disabled}>{children}</Menu.ContextMenu>
      <WidgetContextMenuDropdown opened={menuOpened} onClose={handleCloseMenu} title={getWidgetName(item.kind, t)}>
        {canOpenAdvancedFocus && (
          <>
@@ -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;
@@ -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"] {
@@ -45,4 +46,13 @@
  --mantine-h4-font-size: calc(1.125rem * var(--board-canvas-ui-scale, 1));
  --mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1));
  --mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1));
+  /* Without these, border-radius tokens (e.g. the board's "Item radius" setting) stay at their
+   * flat rem value while the canvas zoom shrinks the rendered card, so the chosen radius becomes
+   * imperceptibly small on busy/zoomed-out boards - same class of bug as the spacing/font tokens
+   * above, just never ported over to radius. */
+  --mantine-radius-xs: calc(0.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-sm: calc(0.25rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-md: calc(0.5rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-lg: calc(0.75rem * var(--board-canvas-ui-scale, 1));
+  --mantine-radius-xl: calc(1rem * var(--board-canvas-ui-scale, 1));
 }
@@ -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"] {
@@ -3,6 +3,22 @@
  overflow: visible;
 }

+/* --board-grid-drag-height inherits down the DOM tree like any custom property. A capped
+   section's own GridPreviewLayer effect correctly avoids setting it on itself (see
+   grid-preview-layer.tsx), but that does nothing to stop it inheriting the value an
+   *uncapped* ancestor section (e.g. the board's root section) legitimately sets on itself
+   while growing during a drag happening anywhere else on the board - any container (not just
+   a scrollable one - a non-scrollable, e.g. collapsible, container is just as capped) sits
+   inside that section's DOM tree, so the stray value cascades straight through and silently
+   defeats the `var(--board-grid-drag-height, ...px)` fallback in section-grid.tsx (including
+   its collapsibleHeaderInset adjustment), which only kicks in when the property is entirely
+   unset, not merely inherited. Reset it here so every container can never inherit a stray
+   value from anywhere above it, no matter what any ancestor's own drag state is doing.
+   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables#custom_properties_and_inheritance */
+.viewport[data-section-kind="container"] {
+  --board-grid-drag-height: initial;
+}
+
 /* Chained with .viewport (rather than a standalone .scrollableViewport rule) so this always
   wins on specificity, not source order. GridEditor loads as a separate async chunk in edit
   mode, and a board mutation can trigger its stylesheet to re-register - at equal specificity,
@@ -11,17 +27,14 @@
 .viewport.scrollableViewport {
  overflow-x: hidden;
  overflow-y: auto;
-  /* --board-grid-drag-height inherits down the DOM tree like any custom property. A capped
-     section's own GridPreviewLayer effect correctly avoids setting it on itself (see
-     grid-preview-layer.tsx), but that does nothing to stop it inheriting the value an
-     *uncapped* ancestor section (e.g. the board's root section) legitimately sets on itself
-     while growing during a drag happening anywhere else on the board - a nested scrollable
-     container sits inside that section's DOM tree, so the stray value cascades straight
-     through and silently defeats the `var(--board-grid-drag-height, ...px)` fallback in
-     section-grid.tsx, which only kicks in when the property is entirely unset, not merely
-     inherited. Reset it here so this element can never inherit a stray value from anywhere
-     above it, no matter what any ancestor's own drag state is doing.
-     https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables#custom_properties_and_inheritance */
+  /* The grid content inside has a fixed pixel width matching this viewport's full
+     outer width (needed for the drag/resize math), so there's no room to reserve
+     for a scrollbar without it eating into - or overlapping - the content on
+     whichever side it renders. Hiding the native scrollbar track entirely (wheel/
+     touch/drag scrolling still works) avoids that instead of trying to reserve
+     space for it. */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
  --board-grid-drag-height: initial;
 }

@@ -148,8 +148,25 @@ export const SectionGrid = ({
  // card and visually spills past its right/bottom edges. 10 must match that CSS rule's inset.
  const effectiveCanvasScale = Number.isFinite(canvasScale) && canvasScale > 0 ? canvasScale : 1;
  const outerCardInset = section.kind === "container" ? (2 * 10) / effectiveCanvasScale : 0;
+  // A collapsible container's toggle bar (see the `containerToggle` Button in
+  // container-section.tsx) is an absolutely positioned overlay sitting on top of this grid.
+  // Its height comes from a Mantine size prop, which - like spacing/font-size - is compensated
+  // by --mantine-scale to render at a constant physical size regardless of board zoom (see
+  // scaled-board-canvas.module.css). That makes it behave like the outerCardInset gap above,
+  // not like the grid's own un-compensated logical-pixel math, so it needs the same
+  // effectiveCanvasScale conversion - a plain, unconverted subtraction would under-reserve on
+  // a zoomed-out board and leave the header overlapping the content. Without reserving it at
+  // all, the header bar covers the first row of the container's content instead of sitting
+  // above it. Only the vertical axis is affected - the toggle spans the full width already.
+  const collapsibleHeaderInset =
+    section.kind === "container" && section.options.collapsible
+      ? CONTAINER_HEADER_HEIGHT / effectiveCanvasScale
+      : 0;
  const logicalWidth = getLogicalGridSize(columnCount) - outerCardInset;
-  const viewportHeight = getLogicalGridSize(viewportRowCount) - outerCardInset;
+  const viewportHeight = Math.max(
+    1,
+    getLogicalGridSize(viewportRowCount) - outerCardInset - collapsibleHeaderInset,
+  );
  // Items are positioned in a coordinate space sized to the *un-inset* column/row count
  // (fullGridWidth/Height below - see getLogicalItemStyle), but logicalWidth/Height above are
  // deliberately smaller by outerCardInset to match the container's actual visible card size.
@@ -283,6 +300,7 @@ export const SectionGrid = ({
          {
            width: logicalWidth,
            height: `var(--board-grid-drag-height, ${viewportHeight}px)`,
+            marginTop: collapsibleHeaderInset || undefined,
            "--board-item-radius": `var(--mantine-radius-${board.itemRadius})`,
          } as CSSProperties
        }
@@ -317,6 +335,9 @@ export const SectionGrid = ({
  );
 };

+// Matches the collapsible container toggle's h={24} in container-section.tsx.
+const CONTAINER_HEADER_HEIGHT = 24;
+
 const INTERACTIVE_GRID_SELECTOR =
  'a,button,input,textarea,select,option,[contenteditable="true"],[role="button"],[data-grid-no-drag]';
 const EDIT_ACTIVATION_KEYS = new Set(["Enter", " ", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
@@ -2,7 +2,7 @@
  overflow: hidden;
 }

-.header[data-desktop-visible="false"] {
+.header[data-visible="false"] {
  display: none;
 }

@@ -73,39 +73,38 @@
  flex: 0 0 auto;
 }

+.userMenu {
+  display: flex;
+  padding-inline: rem(6px);
+}
+
 .mobileContent {
  display: none;
+  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
-  justify-content: space-between;
  gap: var(--mantine-spacing-xs);
  width: 100%;
  height: 100%;
  padding-inline: var(--mantine-spacing-xs);
 }

-.mobileIdentity,
-.mobileActions {
+.mobileZone {
  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
 }

-.mobileIdentity {
-  flex: 1 1 auto;
-  overflow: hidden;
+.mobileZone::-webkit-scrollbar {
+  display: none;
 }

-.mobileIdentity > :last-child {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
+.mobileZone[data-zone="left"] {
+  justify-content: flex-start;
 }

-.mobileIdentity h2 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mobileActions {
-  flex: 0 0 auto;
+.mobileZone[data-zone="right"] {
+  justify-content: flex-end;
+  max-width: 72vw;
 }

 .floatingControls {
@@ -155,21 +154,12 @@
 }

@media (max-width: $mantine-breakpoint-sm) {
-  .header[data-desktop-visible="false"] {
-    display: block;
-  }
-
  .desktopContent {
    display: none;
  }

  .mobileContent {
-    display: flex;
-  }
-
-  .floatingControls,
-  .floatingControlsCorner {
-    display: none;
+    display: grid;
  }
 }

@@ -3,15 +3,7 @@
 import type { ReactNode } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { AppShellHeader, Avatar, Group, Indicator, Loader, Tooltip, useMantineColorScheme } from "@mantine/core";
-import {
-  IconBrandDocker,
-  IconHome,
-  IconLayoutDashboard,
-  IconReplace,
-  IconRobot,
-  IconSettings,
-  IconSunMoon,
-} from "@tabler/icons-react";
+import { IconBrandDocker, IconHome, IconReplace, IconRobot, IconSettings, IconSunMoon } from "@tabler/icons-react";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -81,7 +73,10 @@ export const ConfigurableHeader = ({
  return (
    <BoardSwitcher>
      {(boardSwitcher) => {
-        const renderItems = (items: HeaderItem[]) =>
+        const renderItems = (
+          items: HeaderItem[],
+          display: { search: "input" | "icon"; logo: "logo" | "logoAndText" },
+        ) =>
          items.map((item) => (
            <HeaderItem
              key={getHeaderItemKey(item)}
@@ -95,8 +90,8 @@ export const ConfigurableHeader = ({
              isAdmin={isAdmin}
              isDockerEnabled={isDockerEnabled}
              board={item.type === "board" ? boardsById.get(item.boardId) : undefined}
-              searchDisplay={headerPreferences.searchDisplay}
-              logoDisplay={headerPreferences.logoDisplay}
+              searchDisplay={display.search}
+              logoDisplay={display.logo}
              boardSwitcher={boardSwitcher}
              assistant={assistant}
              openDockerModal={openDockerModal}
@@ -106,13 +101,19 @@ export const ConfigurableHeader = ({
            />
          ));

+        const desktopDisplay = {
+          search: headerPreferences.searchDisplay,
+          logo: headerPreferences.logoDisplay,
+        };
+        const mobileDisplay = { search: "icon", logo: "logo" } as const;
+
        return (
          <>
            <AppShellHeader
              maw="100vw"
              zIndex="var(--homarr-z-index-board-header)"
              className={classes.header}
-              data-desktop-visible={headerPreferences.visible}
+              data-visible={headerPreferences.visible}
              data-advanced-focus-background
              data-app-shell-header
            >
@@ -120,37 +121,26 @@ export const ConfigurableHeader = ({
                <div className={classes.content}>
                  <div className={classes.zone} data-zone="left">
                    {hasNavigation ? <ClientBurger /> : null}
-                    {renderItems(headerPreferences.zones.left)}
+                    {renderItems(headerPreferences.zones.left, desktopDisplay)}
                  </div>
                  <div className={classes.zone} data-zone="center">
-                    {renderItems(headerPreferences.zones.center)}
+                    {renderItems(headerPreferences.zones.center, desktopDisplay)}
                  </div>
                  <div className={classes.zone} data-zone="right">
-                    {renderItems(headerPreferences.zones.right)}
+                    {renderItems(headerPreferences.zones.right, desktopDisplay)}
                    {actions ? <Group className={classes.contextActions}>{actions}</Group> : null}
                  </div>
                </div>
              </div>
              <div className={classes.mobileContent}>
-                <Group className={classes.mobileIdentity} gap="xs" wrap="nowrap">
+                <Group className={classes.mobileZone} data-zone="left" gap="xs" wrap="nowrap">
                  {hasNavigation ? <ClientBurger /> : null}
-                  <HeaderLogo display="logo" logo={logo} logoWithTitle={logoWithTitle} label={t("items.logo")} />
+                  {renderItems(headerPreferences.zones.left, mobileDisplay)}
                </Group>
-                <Group className={classes.mobileActions} gap="xs" wrap="nowrap">
-                  {actions}
-                  {boardEditAction}
-                  {boardSettingsAction}
-                  <TourTarget id="board-search">
-                    <MobileSearchButton alwaysVisible />
-                  </TourTarget>
-                  <TourTarget id="board-user-menu">
-                    <UserButtonClient
-                      avatar={avatar}
-                      isAdmin={isAdmin}
-                      isDockerEnabled={isDockerEnabled}
-                      boardSwitcher={boardSwitcher}
-                    />
-                  </TourTarget>
+                <Group className={classes.mobileZone} data-zone="right" gap="xs" wrap="nowrap">
+                  {renderItems(headerPreferences.zones.center, mobileDisplay)}
+                  {renderItems(headerPreferences.zones.right, mobileDisplay)}
+                  {actions ? <Group className={classes.contextActions}>{actions}</Group> : null}
                </Group>
              </div>
            </AppShellHeader>
@@ -298,7 +288,9 @@ const HeaderItem = ({
      return (
        <Tooltip label={boardUnavailableLabel}>
          <HeaderButton aria-label={boardUnavailableLabel} disabled>
-            <IconLayoutDashboard size={20} stroke={1.5} />
+            <Avatar size={22} radius="sm">
+              ?
+            </Avatar>
          </HeaderButton>
        </Tooltip>
      );
@@ -416,14 +408,19 @@ const HeaderItem = ({

  return (
    <TourTarget id="board-user-menu">
-      <UserButtonClient
-        avatar={avatar}
-        isAdmin={isAdmin}
-        isDockerEnabled={isDockerEnabled}
-        boardSwitcher={boardSwitcher}
-      />
+      <div className={classes.userMenu}>
+        <UserButtonClient
+          avatar={avatar}
+          isAdmin={isAdmin}
+          isDockerEnabled={isDockerEnabled}
+          boardSwitcher={boardSwitcher}
+        />
+      </div>
    </TourTarget>
  );
 };

-const getBoardInitial = (name: string) => Array.from(name.trim())[0]?.toLocaleUpperCase() ?? "?";
+const getBoardInitial = (name: string) => {
+  const firstCharacter = Array.from(name.trim())[0] ?? "?";
+  return Array.from(firstCharacter.toUpperCase())[0] ?? "?";
+};
@@ -22,7 +22,7 @@ export const ClientShell = ({
  const collapsed = useAtomValue(navigationCollapsedAtom);
  const backgroundProps = useOptionalBackgroundProps();
  const { headerPreferences } = useSettings();
-  const headerHeight = headerPreferences.visible ? appShellHeaderHeight : { base: appShellHeaderHeight, sm: 0 };
+  const headerHeight = headerPreferences.visible ? appShellHeaderHeight : 0;

  return (
    <AppShell
@@ -6,6 +6,7 @@ import { Badge, Indicator, Kbd, Loader, Menu, Text } from "@mantine/core";
 import {
  IconBrandDocker,
  IconHome,
+  IconLayoutDashboard,
  IconLogin,
  IconLogout,
  IconReplace,
@@ -16,6 +17,8 @@ import {

 import type { RouterOutputs } from "@homarr/api";
 import { signOut, useSession } from "@homarr/auth/client";
+import { constructBoardPermissions } from "@homarr/auth/shared";
+import { useOptionalBoard } from "@homarr/boards/context";
 import { hotkeys, invariantTechnicalLabels } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
@@ -46,6 +49,8 @@ export const UserAvatarMenu = ({ children, availableUpdates, isDockerEnabled, bo
  const t = useI18n("common.userAvatar.menu");
  const tBoard = useI18n("board");
  const session = useSession();
+  const board = useOptionalBoard();
+  const boardPermissions = board && constructBoardPermissions(board, session.data ?? null);

  const { logoutUrl } = useAuthContext();
  const { openModal: openDockerModal } = useModalAction(DockerQuickAccessModal);
@@ -67,6 +72,15 @@ export const UserAvatarMenu = ({ children, availableUpdates, isDockerEnabled, bo
        <Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>
          {t("homeBoard")}
        </Menu.Item>
+        {board && boardPermissions?.hasChangeAccess && (
+          <Menu.Item
+            component={Link}
+            href={`/boards/${encodeURIComponent(board.name)}/settings`}
+            leftSection={<IconLayoutDashboard size="1rem" />}
+          >
+            {tBoard("action.settings")}
+          </Menu.Item>
+        )}
        <Menu.Item
          leftSection={<IconReplace size="1rem" />}
          rightSection={<Kbd size="xs">{formatHotkeyLabel(boardSwitcher.hotkey, t("modifier"))}</Kbd>}
@@ -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([]);
@@ -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
  );
 };
@@ -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,
@@ -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 };
  });
@@ -49,8 +49,7 @@ export const BoardCreateForm = ({ onCancel }: BoardCreateFormProps) => {
              message: tBoard("action.create.notification.success.message", { name: values.name }),
            });
            const name = encodeURIComponent(result.name);
-            const layoutId = encodeURIComponent(result.layoutId);
-            router.push(`/boards/${name}?layout=${layoutId}&edit=true&add=true`);
+            router.push(`/boards/${name}`);
          },
          onError() {
            showErrorNotification({
@@ -7,6 +7,7 @@ import { useI18n } from "@homarr/translation/client";

 interface ModalFormFooterProps {
  onCancel: () => void;
+  form?: string;
  submitLabel?: string;
  cancelLabel?: string;
  loading?: boolean;
@@ -18,24 +19,38 @@ const ActionButtons = ({
  submitLabel,
  cancelLabel,
  loading,
-}: Pick<ModalFormFooterProps, "onCancel" | "submitLabel" | "cancelLabel" | "loading">) => {
-  const t = useI18n();
+  form,
+}: Pick<ModalFormFooterProps, "onCancel" | "submitLabel" | "cancelLabel" | "loading" | "form">) => {
+  const t = useI18n("common.action");

  return (
    <>
      <Button onClick={onCancel} variant="subtle" color="gray">
-        {cancelLabel ?? t("common.action.cancel")}
+        {cancelLabel ?? t("cancel")}
      </Button>
-      <Button type="submit" loading={loading}>
-        {submitLabel ?? t("common.action.saveChanges")}
+      <Button type="submit" form={form} loading={loading}>
+        {submitLabel ?? t("saveChanges")}
      </Button>
    </>
  );
 };

-export const ModalFormFooter = ({ onCancel, submitLabel, cancelLabel, loading, leftSection }: ModalFormFooterProps) => {
+export const ModalFormFooter = ({
+  onCancel,
+  form,
+  submitLabel,
+  cancelLabel,
+  loading,
+  leftSection,
+}: ModalFormFooterProps) => {
  const actionButtons = (
-    <ActionButtons onCancel={onCancel} submitLabel={submitLabel} cancelLabel={cancelLabel} loading={loading} />
+    <ActionButtons
+      onCancel={onCancel}
+      form={form}
+      submitLabel={submitLabel}
+      cancelLabel={cancelLabel}
+      loading={loading}
+    />
  );

  if (leftSection) {
@@ -2430,6 +2430,16 @@
          "label": "Animate weather icon",
          "description": "Animate the weather icon. Disabled by default and always disabled when reduced motion is requested."
        },
+        "colorWeatherByDayNight": {
+          "label": "Color weather by day/night",
+          "description": "Tint the weather icon and temperature with a day color or a night color, based on whether it's currently day or night at the chosen location."
+        },
+        "dayWeatherColor": {
+          "label": "Day color"
+        },
+        "nightWeatherColor": {
+          "label": "Night color"
+        },
        "worldClockCities": {
          "label": "World clock cities",
          "description": "Add and order up to six cities for advanced view."
@@ -4662,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": {
@@ -4841,7 +4845,8 @@
        "memory": "MEM",
        "network": "NET",
        "up": "UP",
-        "down": "DOWN"
+        "down": "DOWN",
+        "memoryTooltip": "{used} / {available} ({percent}%)"
      }
    },
    "systemDisks": {
@@ -5413,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"
            }
@@ -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" });
    }
@@ -16,7 +16,7 @@ export const headerBuiltinItemIds = [
  "user",
 ] as const;

-export const requiredHeaderBuiltinItemIds = ["boardEdit", "boardSettings", "user"] as const;
+export const requiredHeaderBuiltinItemIds = ["user"] as const;

 export const headerPreferenceItemIds = headerBuiltinItemIds;
 export const headerItemIds = headerBuiltinItemIds;
@@ -132,6 +132,9 @@ const PrimaryClock = ({ now, options, primary }: Pick<ModeProps, "now" | "option
              locationName={options.weatherLocation.name}
              isFahrenheit={options.isWeatherFormatFahrenheit}
              animateIcon={options.animateWeatherIcon}
+              colorByDayNight={options.colorWeatherByDayNight}
+              dayColor={options.dayWeatherColor}
+              nightColor={options.nightWeatherColor}
              detailed
            />
          </Paper>
@@ -54,6 +54,9 @@ export default function ClockWidget({ options, width, height, displayMode }: Wid
            locationName={options.weatherLocation.name}
            isFahrenheit={options.isWeatherFormatFahrenheit}
            animateIcon={options.animateWeatherIcon}
+            colorByDayNight={options.colorWeatherByDayNight}
+            dayColor={options.dayWeatherColor}
+            nightColor={options.nightWeatherColor}
            detailed={false}
          />
        </Box>
@@ -12,6 +12,23 @@ import {

 const timeZoneOptions = getTimeZoneOptions();

+// Mantine theme color names, used to let users pick their own day/night weather colors.
+const weatherColorOptions: string[] = [
+  "red",
+  "pink",
+  "grape",
+  "violet",
+  "indigo",
+  "blue",
+  "cyan",
+  "teal",
+  "green",
+  "lime",
+  "yellow",
+  "orange",
+  "gray",
+];
+
 export const { definition, componentLoader } = createWidgetDefinition("clock", {
  icon: IconClock,
  supportsAdvancedFocus: true,
@@ -101,6 +118,18 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
          defaultValue: false,
          withDescription: true,
        }),
+        colorWeatherByDayNight: factory.switch({
+          defaultValue: false,
+          withDescription: true,
+        }),
+        dayWeatherColor: factory.select({
+          options: weatherColorOptions,
+          defaultValue: "orange",
+        }),
+        nightWeatherColor: factory.select({
+          options: weatherColorOptions,
+          defaultValue: "blue",
+        }),
        worldClockCities: factory.timezoneList({
          defaultValue: defaultWorldClockCities.map((city) => ({ ...city })),
          maxValues: maximumWorldClockCities,
@@ -131,6 +160,15 @@ export const { definition, componentLoader } = createWidgetDefinition("clock", {
        animateWeatherIcon: {
          shouldHide: (options) => !options.showWeather,
        },
+        colorWeatherByDayNight: {
+          shouldHide: (options) => !options.showWeather,
+        },
+        dayWeatherColor: {
+          shouldHide: (options) => !options.showWeather || !options.colorWeatherByDayNight,
+        },
+        nightWeatherColor: {
+          shouldHide: (options) => !options.showWeather || !options.colorWeatherByDayNight,
+        },
      },
    );
  },
@@ -14,6 +14,9 @@ interface ClockWeatherSummaryProps {
  locationName: string;
  isFahrenheit: boolean;
  animateIcon: boolean;
+  colorByDayNight: boolean;
+  dayColor: string;
+  nightColor: string;
  detailed: boolean;
 }

@@ -23,6 +26,9 @@ export const ClockWeatherSummary = ({
  locationName,
  isFahrenheit,
  animateIcon,
+  colorByDayNight,
+  dayColor,
+  nightColor,
  detailed,
 }: ClockWeatherSummaryProps) => {
  const tCommon = useI18n("common");
@@ -46,6 +52,10 @@ export const ClockWeatherSummary = ({
    return `${Math.round(preferred)}${unit}`;
  };

+  const weatherColor = colorByDayNight
+    ? `var(--mantine-color-${weather.current.isDay ? dayColor : nightColor}-5)`
+    : undefined;
+
  return (
    <Stack gap={detailed ? 3 : 2} align={detailed ? "flex-start" : "center"}>
      {detailed ? (
@@ -54,9 +64,9 @@ export const ClockWeatherSummary = ({
            animated={animateIcon}
            code={weather.current.weatherCode}
            isDay={weather.current.isDay}
-            style={zoomCompensatedSize(28)}
+            style={{ ...zoomCompensatedSize(28), ...(weatherColor ? { color: weatherColor } : undefined) }}
          />
-          <Text size="sm" fw={600}>
+          <Text size="sm" fw={600} c={weatherColor}>
            {Math.round(temperature)}
            {unit}
          </Text>
@@ -68,9 +78,9 @@ export const ClockWeatherSummary = ({
            animated={animateIcon}
            code={weather.current.weatherCode}
            isDay={weather.current.isDay}
-            style={zoomCompensatedSize(26)}
+            style={{ ...zoomCompensatedSize(26), ...(weatherColor ? { color: weatherColor } : undefined) }}
          />
-          <Text size="xs" c="dimmed">
+          <Text size="xs" c={weatherColor ?? "dimmed"}>
            {Math.round(temperature)}
            {unit}
          </Text>
@@ -143,6 +143,7 @@
  margin-inline: calc(var(--mantine-spacing-md) * -1);
  margin-bottom: calc(var(--mantine-spacing-md) * -1);
  padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+  padding-bottom: max(var(--mantine-spacing-sm), env(safe-area-inset-bottom));
  border-top: 1px solid var(--mantine-color-default-border);
  background: color-mix(in srgb, var(--mantine-color-body) 94%, transparent);
  backdrop-filter: blur(10px);
@@ -36,7 +36,7 @@ import { objectEntries } from "@homarr/common";
 import { IntegrationProvider, useSession } from "@homarr/auth/client";
 import { useOptionalBoard } from "@homarr/boards/context";
 import type { WidgetKind } from "@homarr/definitions";
-import { createModal, modalSizeForm } from "@homarr/modals";
+import { createModal, ModalFormFooter, modalSizeForm } from "@homarr/modals";
 import type { SettingsContextProps } from "@homarr/settings/creator";
 import { SpotlightProvider } from "@homarr/spotlight";
 import { useI18n } from "@homarr/translation/client";
@@ -674,16 +674,7 @@ export const WidgetEditModal = createModal<WidgetEditModalProps<WidgetKind>>(({

  const footer = (
    <Box className={classes.footer}>
-      <Group justify="end" wrap="nowrap">
-        <Group gap="xs" wrap="nowrap">
-          <Button onClick={actions.closeModal} variant="subtle" color="gray">
-            {tCommon("action.cancel")}
-          </Button>
-          <Button type="submit" form={widgetFormId} loading={isSubmitting}>
-            {tCommon("action.saveChanges")}
-          </Button>
-        </Group>
-      </Group>
+      <ModalFormFooter onCancel={actions.closeModal} form={widgetFormId} loading={isSubmitting} />
    </Box>
  );

@@ -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 }}>
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";

 export const { definition, componentLoader } = createWidgetDefinition("speedtestTracker", {
  icon: IconSpeedboat,
-  supportsAdvancedFocus: true,
  refetchInterval: null,
  createOptions() {
    return optionsBuilder.from(
@@ -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}
    />
  );
 };
@@ -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>
  );
 };
@@ -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)}%`}
    />
  );
 };
@@ -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)}%`}
    />
  );
 };
@@ -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}
    />
  );
 };
@@ -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))
+      }
    />
  );
 };
@@ -26,7 +26,7 @@ export const AnimatedWeatherIcon = ({ animated = false, code, isDay, size = 26,
  let animationClass = "";
  if (animated && (code !== 0 || isDay !== false)) animationClass = getAnimationClass(code);
  return (
-    <span className={`weather-anim-wrapper ${animationClass}`}>
+    <span className={`weather-anim-wrapper ${animationClass}`} data-is-day={isDay === false ? "false" : "true"}>
      <WeatherIcon code={code} isDay={isDay} size={size} style={style} />
    </span>
  );
Author	SHA1	Message	Date
ajnart	ded5bf03bb	fix: use valid widget inset token	2026-08-28 16:50:39 +02:00
ajnart	f484306bb3	fix: inset widget edit action	2026-08-28 16:48:31 +02:00
ajnart	649008d327	fix: keep widget edit overlays visible	2026-08-28 16:36:05 +02:00
ajnart	e716f847ab	fix: rework responsive layout breakpoints	2026-08-28 15:44:25 +02:00
Bergasha	f455e71be5	fix(board): remove per-widget refresh indicator (#6731 ) 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.	2026-08-28 17:36:41 +10:00
Thomas	f221a5b4d3	fix: respect mobile header and widget interactions (#6730 )	2026-08-28 08:31:41 +02:00
Bergasha	c18fa8cf77	fix(widgets): replace system-resources chart tooltip with Mantine (#6729 ) * fix(widgets): replace system-resources chart tooltip with Mantine Tooltip.Floating	2026-08-28 15:08:22 +10:00
Bergasha	5f572f1b92	fix(board): reserve and scale space for collapsible container header (#6727 )	2026-08-28 10:59:48 +10:00
Bergasha	a7aa89fafe	feat(board+clock): fix item radius zoom, add clock day/night weather colour (#6726 )	2026-08-28 10:22:48 +10:00
Thomas	e723cbe6dd	Merge pull request #6725 from homarr-labs/codex/fix-demo-read-only fix(cli): make demo mode writable	2026-08-27 22:45:49 +02:00