From f3e3a25c199ae7fe018ffc0b59783977830c60e9 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Sat, 10 Jan 2026 18:20:48 -0800
Subject: [PATCH] fix: line-clamp class ui/TruncatedText

tailwind classes cannot use string interpolated classes. replaces line-clamp in ui/TruncatedText with class mapping for maxLines prop. Default is 2; removes redundant maxLine={2} from component usages.
---
 app/[locale]/apps/_components/AppCard.tsx       | 1 -
 app/[locale]/apps/_components/AppsHighlight.tsx | 1 -
 src/components/ui/TruncatedText.tsx             | 9 ++++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/[locale]/apps/_components/AppCard.tsx b/app/[locale]/apps/_components/AppCard.tsx
index 7e50e929218..f790fbf33b2 100644
--- a/app/[locale]/apps/_components/AppCard.tsx
+++ b/app/[locale]/apps/_components/AppCard.tsx
@@ -85,7 +85,6 @@ const AppCard = ({
         {showDescription && (
           <TruncatedText
             text={app.description}
-            maxLines={2}
             className="text-body group-hover:text-body"
             matomoEvent={{
               eventCategory: matomoCategory,
diff --git a/app/[locale]/apps/_components/AppsHighlight.tsx b/app/[locale]/apps/_components/AppsHighlight.tsx
index 6b551940009..75454ff7de5 100644
--- a/app/[locale]/apps/_components/AppsHighlight.tsx
+++ b/app/[locale]/apps/_components/AppsHighlight.tsx
@@ -40,7 +40,6 @@ const AppsHighlight = ({ apps, matomoCategory }: AppsHighlightProps) => {
         <div className="mb-4">
           <TruncatedText
             text={app.description}
-            maxLines={2}
             matomoEvent={{
               eventCategory: matomoCategory,
               eventAction: "highlights_show_more",
diff --git a/src/components/ui/TruncatedText.tsx b/src/components/ui/TruncatedText.tsx
index 0de0563662d..108aa30ce05 100644
--- a/src/components/ui/TruncatedText.tsx
+++ b/src/components/ui/TruncatedText.tsx
@@ -27,11 +27,18 @@ const TruncatedText = ({
 }: TruncatedTextProps) => {
   const [isExpanded, setIsExpanded] = useState(false)
 
+  const lineClampClass = {
+    1: "line-clamp-1",
+    2: "line-clamp-2",
+    3: "line-clamp-3",
+    4: "line-clamp-4",
+  }
+
   return (
     <div className={className}>
       <p
         className={`text-body ${
-          !isExpanded ? `line-clamp-${maxLines} overflow-hidden` : ""
+          !isExpanded ? `${lineClampClass[maxLines]} overflow-hidden` : ""
         }`}
         style={
           !isExpanded