From 22b6f9ad89f81345d05c19ed9c42bf1668dde83d Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Tue, 21 Jul 2026 10:08:17 +0200
Subject: [PATCH] Fix mobile custom widget authoring controls

---
 .../custom-widgets/_copy-ai-prompt-button.spec.tsx | 14 ++++++++++++++
 .../custom-widgets/_custom-widget-ai-card.tsx      |  6 +++---
 .../custom-widgets/_custom-widget-form.module.css  |  4 ++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.tsx
index 436e01099..2bb767724 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_copy-ai-prompt-button.spec.tsx
@@ -20,4 +20,18 @@ describe("Copy AI prompt", () => {
     expect(prompt).toContain("exactly one complete `json` fenced block");
     expect(prompt).toContain("one complete `jsx` fenced block");
   });
+
+  it("keeps AI actions and section navigation readable on narrow screens", () => {
+    const card = readFileSync(
+      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx`,
+      "utf8",
+    );
+    const styles = readFileSync(
+      `${process.cwd()}/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css`,
+      "utf8",
+    );
+    expect(card).toContain("<SimpleGrid cols={{ base: 1, sm: 2 }}>");
+    expect(styles).toContain(".sectionNav > a");
+    expect(styles).toContain("flex: 0 0 auto");
+  });
 });
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx
index c99d1a203..dd13ce1b4 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-ai-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Card, Group, Stack, Text, TextInput, Textarea } from "@mantine/core";
+import { Button, Card, Group, SimpleGrid, Stack, Text, TextInput, Textarea } from "@mantine/core";
 import { IconSparkles } from "@tabler/icons-react";
 
 import type { HomarrCustomWidgetV2 } from "@homarr/custom-widgets/core";
@@ -38,7 +38,7 @@ export function CustomWidgetAiCard(props: AiCardProps) {
           value={props.documentationUrl}
           onChange={(event) => props.onDocumentationUrlChange(event.currentTarget.value)}
         />
-        <Group grow wrap="wrap">
+        <SimpleGrid cols={{ base: 1, sm: 2 }}>
           <CopyAiPromptButton
             currentConfig={props.candidate}
             request={props.request}
@@ -47,7 +47,7 @@ export function CustomWidgetAiCard(props: AiCardProps) {
           <Button type="button" variant="light" leftSection={<IconSparkles size={16} />} onClick={props.onPaste}>
             {t("paste")}
           </Button>
-        </Group>
+        </SimpleGrid>
       </Stack>
     </Card>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css
index 303e7d5d4..90a81b026 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.module.css
@@ -17,6 +17,10 @@
   backdrop-filter: blur(10px);
 }
 
+.sectionNav > a {
+  flex: 0 0 auto;
+}
+
 .editorSection {
   scroll-margin-top: 5rem;
 }