From abf31464ecaf9b7defe399f9451c4c2579e2f398 Mon Sep 17 00:00:00 2001
From: Alex Arvanitidis <alex.arvanitidis.ntua.gr@gmail.com>
Date: Mon, 9 Sep 2024 13:58:20 +0300
Subject: [PATCH] fix(JAQPOT-258): description field show 2 lines clamped (#52)

* bugfix(JAQPOT-258): description field show 2 lines clamped

* fix: also clamp features description and results description
---
 .../models/[modelId]/components/tabs/FeaturesTab.tsx        | 4 ++--
 src/app/dashboard/models/components/ModelsTable.tsx         | 6 +-----
 src/app/dashboard/models/components/SearchModelsTable.tsx   | 4 +++-
 src/app/dashboard/results/components/ResultsTable.tsx       | 4 +---
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/app/dashboard/models/[modelId]/components/tabs/FeaturesTab.tsx b/src/app/dashboard/models/[modelId]/components/tabs/FeaturesTab.tsx
index 5f9d8d0..fadc894 100644
--- a/src/app/dashboard/models/[modelId]/components/tabs/FeaturesTab.tsx
+++ b/src/app/dashboard/models/[modelId]/components/tabs/FeaturesTab.tsx
@@ -73,7 +73,7 @@ export default function FeaturesTab({ model }: FeaturesTabProps) {
               <TableRow key={index}>
                 <TableCell>
                   <Tooltip content={independentFeature.name}>
-                    <div className="max-h-28 max-w-52 overflow-hidden text-ellipsis whitespace-nowrap">
+                    <div className="line-clamp-2">
                       {independentFeature.name}
                     </div>
                   </Tooltip>
@@ -81,7 +81,7 @@ export default function FeaturesTab({ model }: FeaturesTabProps) {
                 <TableCell>{independentFeature.units}</TableCell>
                 <TableCell>
                   <Tooltip content={independentFeature.description}>
-                    <div className="max-h-28 max-w-52 overflow-hidden text-ellipsis whitespace-nowrap">
+                    <div className="line-clamp-2">
                       {independentFeature.description}
                     </div>
                   </Tooltip>
diff --git a/src/app/dashboard/models/components/ModelsTable.tsx b/src/app/dashboard/models/components/ModelsTable.tsx
index 75f982c..79e7a5e 100644
--- a/src/app/dashboard/models/components/ModelsTable.tsx
+++ b/src/app/dashboard/models/components/ModelsTable.tsx
@@ -136,11 +136,7 @@ export default function ModelsTable({
   const rows = data?.content?.map((model: ModelSummaryDto) => {
     return {
       ...model,
-      description: (
-        <div className="max-h-28 max-w-52 overflow-hidden text-ellipsis whitespace-nowrap">
-          {model.description}
-        </div>
-      ),
+      description: <div className="line-clamp-2">{model.description}</div>,
       createdAt: <JaqpotTimeAgo date={model.createdAt as any} />,
       sharedWithOrganizations: model.sharedWithOrganizations
         .filter((org) => userOrganizationIds.includes(org.id))
diff --git a/src/app/dashboard/models/components/SearchModelsTable.tsx b/src/app/dashboard/models/components/SearchModelsTable.tsx
index 4f7c673..0bc972b 100644
--- a/src/app/dashboard/models/components/SearchModelsTable.tsx
+++ b/src/app/dashboard/models/components/SearchModelsTable.tsx
@@ -181,7 +181,9 @@ export default function SearchModelsTable() {
             >
               <TableCell>{item.name}</TableCell>
               <TableCell>{item.type}</TableCell>
-              <TableCell>{item.description}</TableCell>
+              <TableCell>
+                <div className="line-clamp-2">{item.description}</div>
+              </TableCell>
               <TableCell>{item.independentFeaturesLength}</TableCell>
               <TableCell>{item.dependentFeaturesLength}</TableCell>
               <TableCell>{item.visibility}</TableCell>
diff --git a/src/app/dashboard/results/components/ResultsTable.tsx b/src/app/dashboard/results/components/ResultsTable.tsx
index 5f3cba8..7d32bea 100644
--- a/src/app/dashboard/results/components/ResultsTable.tsx
+++ b/src/app/dashboard/results/components/ResultsTable.tsx
@@ -147,9 +147,7 @@ export default function ResultsTable() {
             </TableCell>
             <TableCell>{getDatasetStatusNode(item)}</TableCell>
             <TableCell>
-              <div className="max-h-28 max-w-52 overflow-hidden text-ellipsis whitespace-nowrap">
-                {JSON.stringify(item.input)}
-              </div>
+              <div className="line-clamp-2">{JSON.stringify(item.input)}</div>
             </TableCell>
             <TableCell>
               {item.executedAt && (