From 81b21b5f9f8a532f0a1e00a1407efd017ab7fb85 Mon Sep 17 00:00:00 2001
From: carddev81 <rich@unlockedlabs.org>
Date: Wed, 29 Jan 2025 21:41:50 -0600
Subject: [PATCH] fix: add clamptext component for long titles and descriptions
 per #675

---
 frontend/src/Components/LibraryCard.tsx       | 23 +++++++++++--------
 frontend/src/Components/VideoCard.tsx         | 15 ++++++------
 .../src/Components/cards/HelpfulLinkCard.tsx  | 10 +++++---
 .../Components/dashboard/TopContentList.tsx   |  5 ++--
 4 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/frontend/src/Components/LibraryCard.tsx b/frontend/src/Components/LibraryCard.tsx
index ecbd4a83..f4153738 100644
--- a/frontend/src/Components/LibraryCard.tsx
+++ b/frontend/src/Components/LibraryCard.tsx
@@ -12,6 +12,7 @@ import {
     FlagIcon as FlagIconOutline,
     MagnifyingGlassIcon
 } from '@heroicons/react/24/outline';
+import ClampedText from './ClampedText';
 
 export default function LibraryCard({
     library,
@@ -79,18 +80,20 @@ export default function LibraryCard({
                         alt={`${library.title} thumbnail`}
                     />
                 </figure>
-                <h3 className="w-3/4 body my-auto mr-7">{library.title}</h3>
+                <ClampedText as="h3" className="w-3/4 body my-auto mr-7">
+                    {library.title}
+                </ClampedText>
             </div>
             <div className="flex items-center justify-end space-x-2 absolute right-2 top-2 z-100">
-            {!route.pathname.includes('knowledge-insights') && (
-                <div onClick={handleSearchClick}>
-                    <ULIComponent
-                        icon={MagnifyingGlassIcon}
-                        iconClassName="!w-5 !h-5"
-                        dataTip={`Search ${library.title}`}
-                    />
-                </div>
-            )}
+                {!route.pathname.includes('knowledge-insights') && (
+                    <div onClick={handleSearchClick}>
+                        <ULIComponent
+                            icon={MagnifyingGlassIcon}
+                            iconClassName="!w-5 !h-5"
+                            dataTip={`Search ${library.title}`}
+                        />
+                    </div>
+                )}
                 <div onClick={(e) => void handleToggleAction('favorite', e)}>
                     {!route.pathname.includes('knowledge-insights') && (
                         <ULIComponent
diff --git a/frontend/src/Components/VideoCard.tsx b/frontend/src/Components/VideoCard.tsx
index ed27d29a..2b390d12 100644
--- a/frontend/src/Components/VideoCard.tsx
+++ b/frontend/src/Components/VideoCard.tsx
@@ -15,6 +15,7 @@ import { useToast } from '@/Context/ToastCtx';
 import { StarIcon } from '@heroicons/react/24/solid';
 import { StarIcon as StarIconOutline } from '@heroicons/react/24/outline';
 import { AdminRoles } from '@/useAuth';
+import ClampedText from './ClampedText';
 
 export default function VideoCard({
     video,
@@ -86,30 +87,28 @@ export default function VideoCard({
                     {bookmark}
                 </div>
             )}
-            <div
-                className="flex flex-col p-4 gap-2 border-b-2"
-            >
+            <div className="flex flex-col p-4 gap-2 border-b-2">
                 <figure className="w-1/2 mx-auto bg-cover">
                     <img
                         src={video?.thumbnail_url ?? ''}
                         alt={`${video.title} thumbnail`}
                     />
                 </figure>
-                <h3 className="body text-center h-10 line-clamp-2 my-auto">
+                <ClampedText as="h3" className="body text-center h-10 my-auto">
                     {video.title}
-                </h3>
+                </ClampedText>
             </div>
             <div className="p-4 space-y-2">
                 <p className="body font-bold sm:h-10 sm:line-clamp-2">
                     {video.channel_title} - {toMinutes(video.duration)}
                 </p>
-                <p className="body-small h-[40px] leading-5 line-clamp-2">
+                <ClampedText as="p" className="body-small h-[40px] leading-5">
                     {videoIsAvailable(video)
                         ? video?.description
                         : getVideoErrorMessage(video) ??
                           `Video currently unavailable.
-                           May be in the process of downloading, Please check back later`}
-                </p>
+                            May be in the process of downloading, Please check back later`}
+                </ClampedText>
                 {AdminRoles.includes(role) &&
                     (videoIsAvailable(video) ? (
                         <VisibleHiddenToggle
diff --git a/frontend/src/Components/cards/HelpfulLinkCard.tsx b/frontend/src/Components/cards/HelpfulLinkCard.tsx
index cc49b703..cc1ae872 100644
--- a/frontend/src/Components/cards/HelpfulLinkCard.tsx
+++ b/frontend/src/Components/cards/HelpfulLinkCard.tsx
@@ -14,6 +14,7 @@ import { AdminRoles } from '@/useAuth';
 import { useToast } from '@/Context/ToastCtx';
 import { StarIcon } from '@heroicons/react/24/solid';
 import { StarIcon as StarIconOutline } from '@heroicons/react/24/outline';
+import ClampedText from '../ClampedText';
 
 export default function HelpfulLinkCard({
     link,
@@ -111,9 +112,12 @@ export default function HelpfulLinkCard({
                 alt={link.title}
                 className="h-16 mx-auto object-contain"
             />
-            <h3 className="body">{link.title}</h3>
-            <p className="body line-clamp-2 h-10">{link.description}</p>
-
+            <ClampedText as="h3" className="w-3/4 body my-auto mr-7">
+                {link.title}
+            </ClampedText>
+            <ClampedText as="p" className="body h-10">
+                {link.description}
+            </ClampedText>
             {AdminRoles.includes(role) && (
                 <VisibleHiddenToggle
                     visible={visible}
diff --git a/frontend/src/Components/dashboard/TopContentList.tsx b/frontend/src/Components/dashboard/TopContentList.tsx
index d3f0e435..601e6e10 100644
--- a/frontend/src/Components/dashboard/TopContentList.tsx
+++ b/frontend/src/Components/dashboard/TopContentList.tsx
@@ -2,6 +2,7 @@ import { OpenContentItem } from '@/common';
 import OpenContentCard from '../cards/OpenContentCard';
 import ULIComponent from '../ULIComponent';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
+import ClampedText from '../ClampedText';
 
 export default function TopContentList({
     heading,
@@ -32,9 +33,9 @@ export default function TopContentList({
                         tooltipClassName="h-8 flex items-center"
                         icon={ArrowTopRightOnSquareIcon}
                     />
-                    <h3 className="body font-normal">
+                    <ClampedText as="h3" className="body font-normal">
                         Explore other content offered
-                    </h3>
+                    </ClampedText>
                 </div>
             )}
         </div>