fix(widgets): use readable onboarding sizes

fix(board): beszel & calendar scale fix (#6737 )
* fix(calendar): add cell spacing and scale day content with widget size * fix(beszel): stop chart panels from leaving blank grid columns and size charts to fit the widget * fix(widgets): address CodeRabbit review on calendar/beszel scaling PR - beszel: account for the SimpleGrid row gap and the Stack gap between the controls row and the grid in the available-height budget, so a two-row layout no longer overflows the widget. - calendar: memoize the day-cell scale lookup instead of recomputing it on every render. - calendar: don't render the notification indicator row when none of a day's events have an indicatorColor, which was shifting the date number up with no visible dot to show for it. Skipped one finding: the claim that .day's absolute inset:0 covers monthCell's padding. It doesn't - the containing block for an absolutely positioned element is the padding edge of its positioned ancestor per the CSS spec, so the padding correctly insets .day. This was also visually verified in the browser while building the fix. * fix(beszel): don't treat availableHeight=0 as omitted in computeChartHeight A falsy check on availableHeight also caught the legitimate value 0 (widget shorter than its own padding+controls), falling back to the full 180px height instead of clamping to MIN_CHART_HEIGHT - the exact overflow this height budget was meant to prevent.
2026-08-29 06:30:19 +02:00 · 2026-08-29 11:02:10 +10:00 · 2026-08-29 09:26:15 +10:00 · 2026-08-28 17:11:51 +02:00
26 changed files with 232 additions and 165 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.

@@ -271,6 +273,8 @@ Expanding it smoothly restores those bounds and moves following items out of the

 ### Background

+When a background image is set, it always covers at least the full browser window height, even if the board's content is shorter (for example when a Container is collapsed).
+
 #### Background image URL

 Homarr can display a background image behind apps and widgets.
@@ -16,6 +16,7 @@ import TabItem from "@theme/TabItem";
 import { mediaRequestListWidget } from ".";
 import { jellyseerrIntegration } from "@site/docs/integrations/jellyseerr";
 import { overseerrIntegration } from "@site/docs/integrations/overseerr";
+import { seerrIntegration } from "@site/docs/integrations/seerr";

 <WidgetHeader widget={mediaRequestListWidget} categories={["Media requests"]} />

@@ -39,6 +40,9 @@ import mediaRequestList from "./img/list.png";
    {
      integration: overseerrIntegration,
    },
+    {
+      integration: seerrIntegration,
+    },
  ]}
 />

@@ -46,6 +50,7 @@ import mediaRequestList from "./img/list.png";

 - Approve / decline a request by clicking on the thumbs up or down icon.
 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
+- When no requests exist yet, the widget offers the same media search action instead of reporting an integration error.
 - A warning indicator identifies unavailable integrations without hiding requests returned by healthy integrations.

 <WidgetInteractionGuide advancedView={false} />
@@ -16,6 +16,7 @@ import TabItem from "@theme/TabItem";
 import { mediaRequestStatsWidget } from ".";
 import { jellyseerrIntegration } from "@site/docs/integrations/jellyseerr";
 import { overseerrIntegration } from "@site/docs/integrations/overseerr";
+import { seerrIntegration } from "@site/docs/integrations/seerr";

 <WidgetHeader widget={mediaRequestStatsWidget} categories={["Media requests"]} />

@@ -31,6 +32,9 @@ Provides an overview of media requests, including totals, availability, approval
    {
      integration: overseerrIntegration,
    },
+    {
+      integration: seerrIntegration,
+    },
  ]}
 />

@@ -43,6 +47,7 @@ import mediaRequestStats from "./img/stats.png";
 ### Interactions

 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
+- When no requests exist yet, the widget offers media search and explains when statistics will appear.
 - A warning indicator identifies unavailable integrations while totals from healthy integrations remain visible.

 <WidgetInteractionGuide advancedView={false} />
@@ -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,7 +1,7 @@
 .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;
@@ -52,7 +52,6 @@

@media (max-width: 768px) {
  .settingsButton {
-    right: 4px;
    opacity: 1;
    pointer-events: auto;
  }
@@ -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"] {
@@ -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"] {
@@ -27,6 +27,12 @@ export const ClientShell = ({
  return (
    <AppShell
      {...backgroundProps}
+      // The board canvas sizes itself to its content (AppShell runs in "static" mode so
+      // <main> doesn't force a 100dvh minimum - see AppShell.css). Without this, a board
+      // background image only covers as much height as the content needs, so collapsing a
+      // container short enough leaves flat page background showing below it instead of the
+      // background continuing to the bottom of the viewport.
+      mih={backgroundProps.bg ? "100dvh" : undefined}
      header={hasHeader ? { height: headerHeight } : undefined}
      navbar={
        hasNavigation
@@ -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 };
  });
@@ -63,13 +63,19 @@ export type WidgetKind = (typeof widgetKinds)[number];

 export const widgetDefaultSizes: Partial<Record<WidgetKind, { width: number; height: number }>> = {
  airQuality: { width: 2, height: 1 },
+  calendar: { width: 2, height: 2 },
  countdown: { width: 2, height: 1 },
+  downloads: { width: 4, height: 2 },
+  indexerManager: { width: 2, height: 3 },
  timer: { width: 2, height: 1 },
  uptimeKuma: { width: 2, height: 3 },
  audioStats: { width: 2, height: 2 },
  paperlessNgx: { width: 2, height: 2 },
  patchmon: { width: 2, height: 2 },
-  mediaMissing: { width: 4, height: 3 },
+  mediaServer: { width: 3, height: 2 },
+  "mediaRequests-requestList": { width: 3, height: 2 },
+  "mediaRequests-requestStats": { width: 2, height: 2 },
+  mediaMissing: { width: 2, height: 2 },
  bazarr: { width: 2, height: 2 },
  assistant: { width: 10, height: 4 },
 };
@@ -4227,7 +4227,11 @@
    },
    "mediaRequests-requestList": {
      "name": "Media Requests List",
-      "description": "See a list of all media requests from your Overseerr or Jellyseerr instance",
+      "description": "See a list of all media requests from your Seerr, Overseerr, or Jellyseerr instance",
+      "empty": {
+        "title": "No media requests yet",
+        "description": "Search for a movie or show to start a request."
+      },
      "option": {
        "linksTargetNewTab": {
          "label": "Open links in new tab"
@@ -4267,6 +4271,10 @@
    "mediaRequests-requestStats": {
      "name": "Media Requests Stats",
      "description": "Statistics about your media requests",
+      "empty": {
+        "title": "No request activity yet",
+        "description": "Stats will appear after the first media request."
+      },
      "titles": {
        "stats": {
          "main": "Media Stats",
@@ -4672,12 +4680,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": {
@@ -5424,7 +5426,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" });
    }
@@ -23,11 +23,16 @@ import { getUsableWidgetQueryData } from "../common/query-state";
 import { BeszelStatsView } from "../beszel/_shared/stats-view";
 import { createBeszelSystemChoices, resolveBeszelSystemChoice } from "./selection";

+const CONTROLS_ROW_HEIGHT = 36;
+const CONTROLS_ROW_GAP = 16;
+const STACK_PADDING = 24;
+
 export default function BeszelSystemStatsWidget({
  options,
  integrationIds,
  isEditMode,
  width,
+  height,
  boardId,
  itemId,
  setOptions,
@@ -256,6 +261,10 @@ export default function BeszelSystemStatsWidget({
            systemId={selectedSystem?.systemId ?? ""}
            timePeriod={options.timePeriod as BeszelTimePeriod}
            columns={width > 600 ? 2 : 1}
+            availableHeight={Math.max(
+              0,
+              height - STACK_PADDING - (isEditMode ? 0 : CONTROLS_ROW_HEIGHT + CONTROLS_ROW_GAP),
+            )}
            visibility={{
              cpu: options.showCpu,
              memory: options.showMemory,
@@ -62,9 +62,20 @@ interface BeszelStatsViewProps {
  timePeriod: BeszelTimePeriod;
  visibility: BeszelStatsVisibility;
  columns: 1 | 2;
+  availableHeight?: number;
  onSwitchToHistorical?: () => void;
 }

+const MIN_CHART_HEIGHT = 100;
+const PANEL_ROW_OVERHEAD = 28;
+const GRID_ROW_GAP = 16;
+
+const computeChartHeight = (availableHeight: number | undefined, rowCount: number) => {
+  if (availableHeight === undefined || rowCount <= 0) return CHART_HEIGHT;
+  const perRow = (availableHeight - (rowCount - 1) * GRID_ROW_GAP) / rowCount - PANEL_ROW_OVERHEAD;
+  return Math.max(MIN_CHART_HEIGHT, Math.min(CHART_HEIGHT, Math.floor(perRow)));
+};
+
 const whenVisible = <T,>(visible: boolean, data: T | undefined) => (visible ? data : undefined);

 export function BeszelStatsView({
@@ -73,6 +84,7 @@ export function BeszelStatsView({
  timePeriod,
  visibility,
  columns,
+  availableHeight,
  onSwitchToHistorical,
 }: BeszelStatsViewProps) {
  const t = useI18n("widget.beszelSystemStats");
@@ -248,14 +260,29 @@ export function BeszelStatsView({
    );
  }

+  const renderedPanelCount =
+    (visibility.cpu && cpuData.length > 0 ? 1 : 0) +
+    (visibility.memory && memoryData.length > 0 ? 1 : 0) +
+    (visibility.disk && diskData.length > 0 ? 1 : 0) +
+    (visibility.diskIO && diskIOData.length > 0 ? 1 : 0) +
+    (visibility.network && networkData.length > 0 ? 1 : 0) +
+    (showDocker && containerSeries.length > 0
+      ? (visibility.dockerCpu && dockerCpuData.length > 0 ? 1 : 0) +
+        (visibility.dockerMemory && dockerMemoryData.length > 0 ? 1 : 0) +
+        (visibility.dockerNetwork && dockerNetworkData.length > 0 ? 1 : 0)
+      : 0);
+  const effectiveColumns = Math.min(columns, Math.max(1, renderedPanelCount)) as 1 | 2;
+  const rowCount = Math.ceil(renderedPanelCount / effectiveColumns);
+  const chartHeight = computeChartHeight(availableHeight, rowCount);
+
  return (
-    <SimpleGrid cols={columns} spacing="md">
+    <SimpleGrid cols={effectiveColumns} spacing="md">
      {visibility.cpu && cpuData.length > 0 && (
        <BeszelChartPanel
          title={t("chart.cpu.title")}
          subtitle={t("chart.cpu.subtitle")}
          chartProps={{
-            h: CHART_HEIGHT,
+            h: chartHeight,
            data: cpuData,
            series: series.cpu,
            yAxisFormatter: chartAxisFormatters.percent,
@@ -269,7 +296,7 @@ export function BeszelStatsView({
          title={t("chart.memory.title")}
          subtitle={t("chart.memory.subtitle")}
          chartProps={{
-            h: CHART_HEIGHT,
+            h: chartHeight,
            data: memoryData,
            type: "stacked",
            series: series.memory,
@@ -283,7 +310,7 @@ export function BeszelStatsView({
          title={t("chart.disk.title")}
          subtitle={t("chart.disk.subtitle")}
          chartProps={{
-            h: CHART_HEIGHT,
+            h: chartHeight,
            data: diskData,
            type: "stacked",
            series: diskSeries,
@@ -297,7 +324,7 @@ export function BeszelStatsView({
          title={t("chart.diskIO.title")}
          subtitle={t("chart.diskIO.subtitle")}
          chartProps={{
-            h: CHART_HEIGHT,
+            h: chartHeight,
            data: diskIOData,
            series: series.diskIO,
            yAxisFormatter: chartAxisFormatters.rate,
@@ -310,7 +337,7 @@ export function BeszelStatsView({
          title={t("chart.network.title")}
          subtitle={t("chart.network.subtitle")}
          chartProps={{
-            h: CHART_HEIGHT,
+            h: chartHeight,
            data: networkData,
            series: series.network,
            yAxisFormatter: chartAxisFormatters.rate,
@@ -325,7 +352,7 @@ export function BeszelStatsView({
              title={t("chart.dockerCpu.title")}
              subtitle={t("chart.dockerCpu.subtitle")}
              chartProps={{
-                h: CHART_HEIGHT,
+                h: chartHeight,
                data: dockerCpuData,
                type: "stacked",
                series: containerSeries,
@@ -339,7 +366,7 @@ export function BeszelStatsView({
              title={t("chart.dockerMemory.title")}
              subtitle={t("chart.dockerMemory.subtitle")}
              chartProps={{
-                h: CHART_HEIGHT,
+                h: chartHeight,
                data: dockerMemoryData,
                type: "stacked",
                series: containerSeries,
@@ -353,7 +380,7 @@ export function BeszelStatsView({
              title={t("chart.dockerNetwork.title")}
              subtitle={t("chart.dockerNetwork.subtitle")}
              chartProps={{
-                h: CHART_HEIGHT,
+                h: chartHeight,
                data: dockerNetworkData,
                series: containerSeries,
                yAxisFormatter: chartAxisFormatters.rate,
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { Box, Container, Flex, HoverCard, Text, useMantineTheme } from "@mantine/core";

 import { useRequiredBoard } from "@homarr/boards/context";
@@ -13,15 +14,25 @@ interface CalendarDayProps {
  rootHeight: number;
 }

+const fallbackDayScale = { textSize: "xs" as const, indicatorSize: 3, indicatorMarginTop: 2 };
+const dayScaleTiers = [
+  { minAxisSize: 700, textSize: "lg" as const, indicatorSize: 6, indicatorMarginTop: 6 },
+  { minAxisSize: 450, textSize: "md" as const, indicatorSize: 5, indicatorMarginTop: 4 },
+  { minAxisSize: 250, textSize: "sm" as const, indicatorSize: 4, indicatorMarginTop: 3 },
+  { minAxisSize: 0, ...fallbackDayScale },
+];
+
+const getDayScale = (minAxisSize: number) =>
+  dayScaleTiers.find((tier) => minAxisSize >= tier.minAxisSize) ?? fallbackDayScale;
+
 export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: CalendarDayProps) => {
  const board = useRequiredBoard();
  const mantineTheme = useMantineTheme();
  const actualItemRadius = mantineTheme.radius[board.itemRadius];

  const minAxisSize = Math.min(rootWidth, rootHeight);
-  const shouldScaleDown = minAxisSize < 350;
  const shouldShowIndicators = rootHeight >= 256;
-  const indicatorSize = shouldScaleDown ? 3 : 4;
+  const { textSize, indicatorSize, indicatorMarginTop } = useMemo(() => getDayScale(minAxisSize), [minAxisSize]);

  const cell = (
    <Container
@@ -39,10 +50,15 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
        justifyContent: "center",
      }}
    >
-      <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
+      <Text ta={"center"} size={textSize} lh={1}>
        {date.getDate()}
      </Text>
-      <NotificationIndicator events={events} size={indicatorSize} visible={shouldShowIndicators} />
+      <NotificationIndicator
+        events={events}
+        size={indicatorSize}
+        marginTop={indicatorMarginTop}
+        visible={shouldShowIndicators}
+      />
    </Container>
  );

@@ -70,19 +86,20 @@ export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: C
 interface NotificationIndicatorProps {
  events: CalendarEvent[];
  size: number;
+  marginTop: number;
  visible: boolean;
 }

-const NotificationIndicator = ({ events, size, visible }: NotificationIndicatorProps) => {
+const NotificationIndicator = ({ events, size, marginTop, visible }: NotificationIndicatorProps) => {
  const notificationEvents = [...new Set(events.map((event) => event.indicatorColor))].filter(
    (color): color is string => Boolean(color),
  );

-  if (!visible) return null;
+  if (!visible || notificationEvents.length === 0) return null;

  return (
    <Flex
-      mt={3}
+      mt={marginTop}
      w="fit-content"
      maw="75%"
      h={size}
@@ -212,6 +212,7 @@ const CalendarBase = ({
          monthCell: {
            textAlign: "center",
            position: "relative",
+            padding: 3,
          },
          day: {
            borderRadius: actualItemRadius,
@@ -0,0 +1,49 @@
+"use client";
+
+import { Button, Stack, Text, ThemeIcon } from "@mantine/core";
+import { IconMovieOff, IconSearch } from "@tabler/icons-react";
+
+import { openMediaRequestSearch } from "@homarr/spotlight";
+import { useI18n } from "@homarr/translation/client";
+
+interface MediaRequestsEmptyStateProps {
+  title: string;
+  description: string;
+  integrationIds: string[];
+  isEditMode: boolean;
+}
+
+export const MediaRequestsEmptyState = ({
+  title,
+  description,
+  integrationIds,
+  isEditMode,
+}: MediaRequestsEmptyStateProps) => {
+  const tSearch = useI18n("search.mode.media");
+
+  return (
+    <Stack h="100%" align="center" justify="center" gap="xs" p="md">
+      <ThemeIcon variant="light" size="xl" radius="xl">
+        <IconMovieOff />
+      </ThemeIcon>
+      <Stack gap={2} align="center">
+        <Text fw={600} ta="center">
+          {title}
+        </Text>
+        <Text c="dimmed" size="sm" ta="center" maw="28ch">
+          {description}
+        </Text>
+      </Stack>
+      {!isEditMode ? (
+        <Button
+          variant="light"
+          size="compact-sm"
+          leftSection={<IconSearch size="var(--mantine-font-size-md)" />}
+          onClick={() => openMediaRequestSearch({ integrationIds })}
+        >
+          {tSearch("action.search.label")}
+        </Button>
+      ) : null}
+    </Stack>
+  );
+};
@@ -20,7 +20,7 @@ import { WidgetQueryLoadingState } from "../../common/query-state-indicator";
 import actionTargetClasses from "../../common/action-target.module.css";
 import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
-import { NoIntegrationDataError } from "../../errors/no-data-integration";
+import { MediaRequestsEmptyState } from "../empty-state";
 import classes from "./component.module.css";
 import searchClasses from "../search-button.module.css";

@@ -30,6 +30,7 @@ export default function MediaServerWidget({
  options,
  width,
 }: WidgetComponentProps<"mediaRequests-requestList">) {
+  const t = useI18n("widget.mediaRequests-requestList");
  const interactIntegrationIds = new Set(
    useIntegrationsWithInteractAccess()
      .filter(({ id }) => integrationIds.includes(id))
@@ -48,7 +49,16 @@ export default function MediaServerWidget({
  if (isInitialWidgetQueryPending(mediaRequestQuery)) return <WidgetQueryLoadingState />;
  if (!mediaRequestData) return <WidgetEmptyState />;
  const { requests: mediaRequests, failedIntegrations } = mediaRequestData;
-  if (mediaRequests.length === 0 && failedIntegrations.length === 0) throw new NoIntegrationDataError();
+  if (mediaRequests.length === 0 && failedIntegrations.length === 0) {
+    return (
+      <MediaRequestsEmptyState
+        title={t("empty.title")}
+        description={t("empty.description")}
+        integrationIds={integrationIds}
+        isEditMode={isEditMode}
+      />
+    );
+  }
  const showIntegrationSource = new Set(mediaRequests.map(({ integrationId }) => integrationId)).size > 1;

  return (
@@ -28,7 +28,7 @@ import { WidgetQueryLoadingState } from "../../common/query-state-indicator";
 import actionTargetClasses from "../../common/action-target.module.css";
 import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
-import { NoIntegrationDataError } from "../../errors/no-data-integration";
+import { MediaRequestsEmptyState } from "../empty-state";
 import classes from "./component.module.css";
 import searchClasses from "../search-button.module.css";

@@ -54,8 +54,16 @@ export default function MediaServerWidget({
    requestStats.users.length === 0 &&
    requestStats.stats.length === 0 &&
    requestStats.failedIntegrations.length === 0
-  )
-    throw new NoIntegrationDataError();
+  ) {
+    return (
+      <MediaRequestsEmptyState
+        title={t("empty.title")}
+        description={t("empty.description")}
+        integrationIds={integrationIds}
+        isEditMode={isEditMode}
+      />
+    );
+  }

  const data = [
    {
@@ -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(
Author	SHA1	Message	Date
ajnart	1f8d12c19e	fix(widgets): use readable onboarding sizes	2026-08-29 06:30:19 +02:00
Bergasha	10ba298233	fix(board): beszel & calendar scale fix (#6737 ) * fix(calendar): add cell spacing and scale day content with widget size * fix(beszel): stop chart panels from leaving blank grid columns and size charts to fit the widget * fix(widgets): address CodeRabbit review on calendar/beszel scaling PR - beszel: account for the SimpleGrid row gap and the Stack gap between the controls row and the grid in the available-height budget, so a two-row layout no longer overflows the widget. - calendar: memoize the day-cell scale lookup instead of recomputing it on every render. - calendar: don't render the notification indicator row when none of a day's events have an indicatorColor, which was shifting the date number up with no visible dot to show for it. Skipped one finding: the claim that .day's absolute inset:0 covers monthCell's padding. It doesn't - the containing block for an absolutely positioned element is the padding edge of its positioned ancestor per the CSS spec, so the padding correctly insets .day. This was also visually verified in the browser while building the fix. * fix(beszel): don't treat availableHeight=0 as omitted in computeChartHeight A falsy check on availableHeight also caught the legitimate value 0 (widget shorter than its own padding+controls), falling back to the full 180px height instead of clamping to MIN_CHART_HEIGHT - the exact overflow this height budget was meant to prevent.	2026-08-29 11:02:10 +10:00
Bergasha	7855278ed1	fix(board): give AppShell root a viewport-height floor (#6736 ) * fix(board): give AppShell root a viewport-height floor when a background is set The board canvas sizes itself to its content, and AppShell runs in 'static' mode so <main> doesn't force a 100dvh minimum either. That means a board's background image only covers as much height as the content needs - collapsing a container (or any board with short content) leaves flat page background showing below it instead of the background continuing to the bottom of the viewport, looking like a big empty void. Root-caused via a local repro: the grid/reflow system was already shrinking the collapsed container's own space correctly (verified the live-measured canvas height matched exactly, not the stale debug attribute) - the void was purely a background-sizing issue on the AppShell root, unrelated to the collapse/layout logic itself. * docs(boards): document background minimum-height behavior	2026-08-29 09:26:15 +10:00
Thomas	aa179f1ec0	fix: decouple responsive layout roles from breakpoints * fix: rework responsive layout breakpoints * fix: keep widget edit overlays visible * fix: inset widget edit action * fix: use valid widget inset token	2026-08-28 17:11:51 +02:00