Fix mobile custom widget authoring controls

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");
+  });
 });

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

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