From 950636e81d4a934183f27694829dd3af05e5373f Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Sat, 16 Aug 2025 23:39:20 +0200
Subject: [PATCH] feat(app-widget): multiline description (#3873)

---
 apps/nextjs/src/app/[locale]/manage/apps/page.tsx | 8 +++++++-
 packages/forms-collection/src/new-app/_form.tsx   | 8 +++++++-
 packages/widgets/src/app/component.tsx            | 9 +++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
index 761fd4495..f94cff54f 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { ActionIcon, ActionIconGroup, Anchor, Avatar, Card, Group, Stack, Text, Title } from "@mantine/core";
@@ -98,7 +99,12 @@ const AppCard = async ({ app }: AppCardProps) => {
             </Text>
             {app.description && (
               <Text size="sm" c="gray.6" lineClamp={4}>
-                {app.description}
+                {app.description.split("\n").map((line, index) => (
+                  <Fragment key={index}>
+                    {line}
+                    <br />
+                  </Fragment>
+                ))}
               </Text>
             )}
             {app.href && (
diff --git a/packages/forms-collection/src/new-app/_form.tsx b/packages/forms-collection/src/new-app/_form.tsx
index a23f8c5e6..00d60a033 100644
--- a/packages/forms-collection/src/new-app/_form.tsx
+++ b/packages/forms-collection/src/new-app/_form.tsx
@@ -97,7 +97,13 @@ export const AppForm = ({
       <Stack>
         <TextInput {...form.getInputProps("name")} withAsterisk label={t("app.field.name.label")} />
         <IconPicker {...form.getInputProps("iconUrl")} />
-        <Textarea {...form.getInputProps("description")} label={t("app.field.description.label")} />
+        <Textarea
+          {...form.getInputProps("description")}
+          label={t("app.field.description.label")}
+          autosize
+          minRows={2}
+          resize="vertical"
+        />
         <TextInput {...form.getInputProps("href")} label={t("app.field.url.label")} />
 
         <Checkbox
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index a89532063..04654e5f0 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import { Suspense } from "react";
+import { Fragment, Suspense } from "react";
 import { Flex, Text, Tooltip, UnstyledButton } from "@mantine/core";
 import { IconLoader } from "@tabler/icons-react";
 import combineClasses from "clsx";
@@ -65,7 +65,12 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
       enabled={Boolean(app.href) && !isEditMode}
     >
       <Tooltip.Floating
-        label={app.description}
+        label={app.description?.split("\n").map((line, index) => (
+          <Fragment key={index}>
+            {line}
+            <br />
+          </Fragment>
+        ))}
         position="right-start"
         multiline
         disabled={!options.showDescriptionTooltip || !app.description}