From a6061348c3af4d410639a151bcafd2a0bcaaba6b Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 10 Aug 2026 18:57:54 +0200
Subject: [PATCH 1/2] fix: polish settings and command menu

---
 .../[locale]/boards/[name]/settings/page.tsx  |  2 +-
 .../_components/analytics.settings.tsx        | 24 +++++++--
 .../src/app/[locale]/manage/settings/page.tsx | 13 ++---
 .../src/app/[locale]/manage/workshop/page.tsx |  1 -
 .../layout/header/lazy-spotlight.tsx          | 52 +++----------------
 .../src/components/layout/header/search.tsx   |  7 ---
 .../components/manage/unsaved-changes-bar.tsx |  4 +-
 e2e/lazy-widgets.spec.ts                      |  1 +
 packages/translation/src/lang/en.json         |  1 +
 9 files changed, 37 insertions(+), 68 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
index 318d5196a..f6af46d65 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
@@ -53,7 +53,7 @@ export default async function BoardSettingsPage(props: Props) {
   }
 
   return (
-    <Container>
+    <Container size="xl">
       <Stack>
         <Title>{t("title", { boardName: capitalize(board.name) })}</Title>
         <BoardSettingsForm
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
index b68e28e90..1c490112d 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import { Anchor } from "@mantine/core";
+import { IconExternalLink } from "@tabler/icons-react";
+
+import { createDocumentationLink } from "@homarr/definitions";
 import type { UseFormReturnType } from "@homarr/form";
 import { useScopedI18n } from "@homarr/translation/client";
 
@@ -12,11 +16,25 @@ interface AnalyticsSettingsProps {
 }
 
 export const AnalyticsSettings = ({ form }: AnalyticsSettingsProps) => {
-  const t = useScopedI18n("management.page.settings.section.analytics");
+  const t = useScopedI18n("management.page.settings.section");
 
   return (
-    <SectionCard title={t("title")}>
-      <SwitchSetting form={form} formKey="enableGeneral" title={t("general.title")} text={t("general.text")} />
+    <SectionCard title={t("analytics.title")}>
+      <SwitchSetting
+        form={form}
+        formKey="enableGeneral"
+        title={t("analytics.general.title")}
+        text={t("analytics.general.text")}
+      />
+      <Anchor
+        href={createDocumentationLink("/docs/management/settings", "#analytics")}
+        target="_blank"
+        rel="noopener noreferrer"
+        size="sm"
+      >
+        {t("analyticsDocumentation")}
+        <IconExternalLink size={14} style={{ marginInlineStart: 4, verticalAlign: "middle" }} />
+      </Anchor>
     </SectionCard>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
index eee563069..242cd44c1 100644
--- a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
@@ -1,11 +1,10 @@
 import { notFound } from "next/navigation";
-import { Stack, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getScopedI18n } from "@homarr/translation/server";
 
-import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
+import { ManagePageLayout } from "~/components/manage/manage-page-layout";
 import { SettingsForm } from "./_components/settings-form";
 
 export async function generateMetadata() {
@@ -28,12 +27,8 @@ export default async function SettingsPage() {
   const tSettings = await getScopedI18n("management.page.settings");
 
   return (
-    <>
-      <DynamicBreadcrumb />
-      <Stack>
-        <Title order={1}>{tSettings("title")}</Title>
-        <SettingsForm initialData={serverSettings} />
-      </Stack>
-    </>
+    <ManagePageLayout title={tSettings("title")}>
+      <SettingsForm initialData={serverSettings} />
+    </ManagePageLayout>
   );
 }
diff --git a/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx b/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx
index d52825869..260ca8db3 100644
--- a/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/workshop/page.tsx
@@ -22,7 +22,6 @@ export default async function WorkshopPage() {
   return (
     <ManagePageLayout
       title={t("title")}
-      size="xl"
       primaryAction={
         <Button
           component="a"
diff --git a/apps/nextjs/src/components/layout/header/lazy-spotlight.tsx b/apps/nextjs/src/components/layout/header/lazy-spotlight.tsx
index 958c0d537..aff8496e9 100644
--- a/apps/nextjs/src/components/layout/header/lazy-spotlight.tsx
+++ b/apps/nextjs/src/components/layout/header/lazy-spotlight.tsx
@@ -1,38 +1,14 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import dynamic from "next/dynamic";
-import { Center, Loader, Paper } from "@mantine/core";
 import { useHotkeys } from "@mantine/hooks";
 
 import { hotkeys } from "@homarr/definitions";
+import { Spotlight } from "@homarr/spotlight/component";
 import { hasPendingSpotlightOpen, openSpotlight, spotlightOpenEvent } from "@homarr/spotlight/open";
 
-const loadSpotlight = () => import("@homarr/spotlight/component");
-const SpotlightLoading = () => (
-  <Center
-    data-homarr-dev-benchmark-spotlight-feedback
-    pos="fixed"
-    inset={0}
-    role="status"
-    aria-label="Loading search"
-    style={{ zIndex: 1000, background: "rgb(0 0 0 / 20%)", backdropFilter: "blur(2px)" }}
-  >
-    <Paper withBorder radius="md" p="xl" shadow="xl">
-      <Loader />
-    </Paper>
-  </Center>
-);
-const Spotlight = dynamic(() => loadSpotlight().then(({ Spotlight: Component }) => Component), {
-  ssr: false,
-  loading: SpotlightLoading,
-});
-
-export const preloadSpotlight = () => void loadSpotlight().catch(() => undefined);
-
 export const LazySpotlight = () => {
   const [isMounted, setIsMounted] = useState(false);
-  const [isPreloaded, setIsPreloaded] = useState(false);
 
   useHotkeys(
     isMounted
@@ -49,41 +25,27 @@ export const LazySpotlight = () => {
   );
 
   useEffect(() => {
-    let isActive = true;
     const mount = () => setIsMounted(true);
     window.addEventListener(spotlightOpenEvent, mount);
     if (hasPendingSpotlightOpen()) mount();
 
-    const preload = () => {
-      void loadSpotlight().then(
-        () => {
-          if (isActive) setIsPreloaded(true);
-        },
-        () => undefined,
-      );
-    };
     let idleId: number | undefined;
     const delayId = window.setTimeout(() => {
-      idleId = window.requestIdleCallback?.(preload, { timeout: 1_000 });
-      if (idleId === undefined) preload();
+      idleId = window.requestIdleCallback?.(mount, { timeout: 1_000 });
+      if (idleId === undefined) mount();
     }, 1_000);
     return () => {
-      isActive = false;
       window.removeEventListener(spotlightOpenEvent, mount);
       window.clearTimeout(delayId);
       if (idleId !== undefined) window.cancelIdleCallback?.(idleId);
     };
   }, []);
 
-  return isMounted || isPreloaded ? (
+  return isMounted ? (
     <>
-      {isPreloaded && <span hidden data-homarr-dev-benchmark-spotlight-preloaded />}
-      {isMounted && (
-        <>
-          <span hidden data-homarr-dev-benchmark-spotlight-mounted />
-          <Spotlight />
-        </>
-      )}
+      <span hidden data-homarr-dev-benchmark-spotlight-preloaded />
+      <span hidden data-homarr-dev-benchmark-spotlight-mounted />
+      <Spotlight />
     </>
   ) : null;
 };
diff --git a/apps/nextjs/src/components/layout/header/search.tsx b/apps/nextjs/src/components/layout/header/search.tsx
index 8e42efd9a..a7963fc07 100644
--- a/apps/nextjs/src/components/layout/header/search.tsx
+++ b/apps/nextjs/src/components/layout/header/search.tsx
@@ -8,7 +8,6 @@ import { useI18n } from "@homarr/translation/client";
 
 import { HeaderButton } from "./button";
 import classes from "./search.module.css";
-import { preloadSpotlight } from "./lazy-spotlight";
 
 export const DesktopSearchInput = () => {
   const t = useI18n();
@@ -22,9 +21,6 @@ export const DesktopSearchInput = () => {
       size="sm"
       leftSection={<IconSearch size={20} stroke={1.5} />}
       onClick={openSpotlight}
-      onFocus={preloadSpotlight}
-      onPointerDown={preloadSpotlight}
-      onPointerEnter={preloadSpotlight}
       radius="xl"
     >
       {`${t("search.placeholder")}...`}
@@ -37,9 +33,6 @@ export const MobileSearchButton = () => {
     <HeaderButton
       data-homarr-dev-benchmark-interaction="search"
       onClick={openSpotlight}
-      onFocus={preloadSpotlight}
-      onPointerDown={preloadSpotlight}
-      onPointerEnter={preloadSpotlight}
       className={classes.mobileSearch}
     >
       <IconSearch size={20} stroke={1.5} />
diff --git a/apps/nextjs/src/components/manage/unsaved-changes-bar.tsx b/apps/nextjs/src/components/manage/unsaved-changes-bar.tsx
index da0b91ad1..aa3f771f5 100644
--- a/apps/nextjs/src/components/manage/unsaved-changes-bar.tsx
+++ b/apps/nextjs/src/components/manage/unsaved-changes-bar.tsx
@@ -13,8 +13,8 @@ export const UnsavedChangesBar = ({ children }: UnsavedChangesBarProps) => {
   const t = useI18n();
 
   return (
-    <div style={{ position: "sticky", bottom: 20 }}>
-      <Card withBorder>
+    <div style={{ position: "sticky", bottom: 20, zIndex: "var(--mantine-z-index-app)" }}>
+      <Card withBorder bg="var(--mantine-color-body)">
         <Group justify="space-between" wrap="wrap">
           <Text fw={500}>{t("common.unsavedChanges")}</Text>
           <Group>{children}</Group>
diff --git a/e2e/lazy-widgets.spec.ts b/e2e/lazy-widgets.spec.ts
index 76041981f..61dd87ff3 100644
--- a/e2e/lazy-widgets.spec.ts
+++ b/e2e/lazy-widgets.spec.ts
@@ -92,6 +92,7 @@ describe("lazy widget application graph", () => {
         timeout: 15_000,
       });
       await page.keyboard.press("Control+K");
+      await expect(page.locator("[data-homarr-dev-benchmark-spotlight-feedback]")).toHaveCount(0);
       await expect(page.locator("[data-homarr-dev-benchmark-spotlight]")).toBeVisible({ timeout: 15_000 });
       await page.keyboard.press("Escape");
       await expect(page.locator("[data-homarr-dev-benchmark-spotlight]")).not.toBeVisible();
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index ec29cd732..67a86976d 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -5199,6 +5199,7 @@
           }
         },
         "section": {
+          "analyticsDocumentation": "See exactly what analytics data Homarr collects",
           "analytics": {
             "title": "Analytics",
             "general": {

From 920631373c1bf352bedd679f886128959400f25f Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 10 Aug 2026 19:09:04 +0200
Subject: [PATCH 2/2] fix: refine responsive layout settings

---
 .../settings/_layout-preview.module.css       |  2 +-
 .../[name]/settings/_layout-preview.tsx       |  2 +-
 .../boards/[name]/settings/_layout.module.css |  2 +-
 .../boards/[name]/settings/_layout.tsx        | 25 ++++++++++---------
 .../[locale]/boards/[name]/settings/page.tsx  |  2 +-
 5 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css
index ad99b48f1..f8415e012 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.module.css
@@ -4,7 +4,7 @@
   background: color-mix(in srgb, var(--mantine-color-body) 82%, var(--mantine-primary-color-light));
   padding: var(--mantine-spacing-xs);
   min-height: 7rem;
-  max-height: min(24rem, 48dvh);
+  max-height: min(18rem, 38dvh);
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx
index a0816c831..7d54a0e51 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout-preview.tsx
@@ -45,7 +45,7 @@ export const LayoutPreview = ({ board, layout, layouts, sourceLayout, apps }: Pr
           {layout.columnCount} {t("board.setting.section.layout.preview.columns")}
         </Text>
       </Group>
-      <Box w={{ base: "100%", md: previewWidth }} maw="100%" className={classes.canvas}>
+      <Box w={{ base: "100%", md: `max(${previewWidth}, 14rem)` }} maw="100%" className={classes.canvas}>
         {elements.length === 0 ? (
           <Text size="xs" c="dimmed" ta="center" py="xl">
             {t("board.setting.section.layout.preview.empty")}
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css
index 7c8bdbebd..0a6b80363 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.module.css
@@ -6,7 +6,7 @@
   display: grid;
   gap: 6px;
   width: 100%;
-  min-height: 112px;
+  min-height: 88px;
   padding: 8px;
   overflow: hidden;
   background: var(--mantine-color-body);
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
index 745c55b51..44c28e44e 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
@@ -168,7 +168,7 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
               bg="transparent"
             >
               <Grid gap={{ base: "lg", xl: "xl" }} align="flex-start">
-                <Grid.Col span={{ base: 12, md: 4 }}>
+                <Grid.Col span={{ base: 12, md: 6, lg: 4 }}>
                   <Stack gap="md">
                     <TextInput {...form.getInputProps(`layouts.${index}.name`)} label={t("layout.field.name.label")} />
                     <Input.Wrapper label={t("layout.field.columnCount.label")}>
@@ -209,16 +209,9 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
                       }
                       max={layout.role === "custom" ? baseBreakpoint - 1 : 32767}
                     />
-                    <GutterSettings
-                      left={layout.leftGutterColumnCount}
-                      right={layout.rightGutterColumnCount}
-                      columnCount={layout.columnCount}
-                      onLeftChange={(value) => form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, value)}
-                      onRightChange={(value) => form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, value)}
-                    />
                   </Stack>
                 </Grid.Col>
-                <Grid.Col span={{ base: 12, md: 8 }}>
+                <Grid.Col span={{ base: 12, md: 6, lg: 4 }}>
                   {sourceLayout && (
                     <LayoutPreview
                       board={board}
@@ -229,6 +222,15 @@ export const LayoutSettingsContent = ({ board, form, isSaving, saveSettingsAsync
                     />
                   )}
                 </Grid.Col>
+                <Grid.Col span={{ base: 12, lg: 4 }}>
+                  <GutterSettings
+                    left={layout.leftGutterColumnCount}
+                    right={layout.rightGutterColumnCount}
+                    columnCount={layout.columnCount}
+                    onLeftChange={(value) => form.setFieldValue(`layouts.${index}.leftGutterColumnCount`, value)}
+                    onRightChange={(value) => form.setFieldValue(`layouts.${index}.rightGutterColumnCount`, value)}
+                  />
+                </Grid.Col>
               </Grid>
 
               <Group justify="space-between" mt="lg" gap="sm" wrap="wrap">
@@ -334,7 +336,7 @@ const GutterSettings = ({ left, right, columnCount, onLeftChange, onRightChange
         <GutterPreview left={left} right={right} columnCount={columnCount} />
 
         <Grid>
-          <Grid.Col span={{ base: 12, md: 6 }}>
+          <Grid.Col span={{ base: 12, sm: 6 }}>
             <GutterControl
               side="left"
               value={left}
@@ -342,7 +344,7 @@ const GutterSettings = ({ left, right, columnCount, onLeftChange, onRightChange
               onChange={onLeftChange}
             />
           </Grid.Col>
-          <Grid.Col span={{ base: 12, md: 6 }}>
+          <Grid.Col span={{ base: 12, sm: 6 }}>
             <GutterControl
               side="right"
               value={right}
@@ -377,7 +379,6 @@ const GutterControl = ({
         disabled={max < 1}
         onChange={(event) => onChange(event.currentTarget.checked ? Math.min(2, max) : 0)}
         label={t(`layout.field.gutters.${side}.label`)}
-        description={t(`layout.field.gutters.${side}.description`)}
       />
       {enabled && (
         <Input.Wrapper label={t("layout.field.gutters.width.label")}>
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
index 609428b2f..734542221 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
@@ -53,7 +53,7 @@ export default async function BoardSettingsPage(props: Props) {
   }
 
   return (
-    <Container fluid px={{ base: "md", md: "xl" }}>
+    <Container size="xl" px={{ base: "md", md: "xl" }}>
       <Stack>
         <Title>{t("title", { boardName: capitalize(board.name) })}</Title>
         <BoardSettingsForm