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
ntua-unit-of-control-and-informatics · Sep 9, 2024 · abf3146 · abf3146
1 parent 836fe52
commit abf3146
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 11 deletions.
diff --git a/src/app/dashboard/models/[modelId]/components/tabs/FeaturesTab.tsx b/src/app/dashboard/models/[modelId]/components/tabs/FeaturesTab.tsx
@@ -73,15 +73,15 @@ 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>
                 </TableCell>
                 <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
@@ -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
@@ -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
@@ -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 && (