fix: add clamptext component for long titles and descriptions per UnlockedLabs#675

Author: carddev81

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

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

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,
@@ -82,7 +83,9 @@ export default function HelpfulLinkCard({
                 <figure className="w-[48px] h-[48px] bg-cover">
                     <img src={link.thumbnail_url ?? ''} alt={link.title} />
                 </figure>
-                <h3 className="w-3/4 body my-auto mr-7">{link.title}</h3>
+                <ClampedText as="h3" className="w-3/4 body my-auto mr-7">
+                    {link.title}
+                </ClampedText>
             </div>
             {AdminRoles.includes(role) ? (
                 showModal != undefined && (
@@ -117,9 +120,9 @@ export default function HelpfulLinkCard({
                 </div>
             )}
             <div className="p-4 space-y-2">
-                <p className="body-small h-[40px] leading-5 line-clamp-2">
+                <ClampedText as="p" className="body-small h-[40px] leading-5">
                     {link.description}
-                </p>
+                </ClampedText>
                 {AdminRoles.includes(role) && (
                     <VisibleHiddenToggle
                         visible={visible}

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>