fix:added ellipsis for long value in breadcrumb

apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css

@@ -1,5 +1,7 @@
 .list {
   @apply flex
+    w-full
     items-center
-    gap-5;
+    gap-5
+    pl-2;
 }

apps/site/components/Common/Breadcrumbs/index.tsx

@@ -18,6 +18,7 @@ type BreadcrumbsProps = {
   maxLength?: number;
   hideHome?: boolean;
 };
+// Convert link.label to string and get its length
 
 const Breadcrumbs: FC<BreadcrumbsProps> = ({
   links = [],
@@ -28,6 +29,13 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
   const lengthOffset = maxLength - totalLength;
   const isOverflow = lengthOffset < 0;
 
+  const formatLabelWithWordCount = (label: string, maxWords: number) => {
+    const words = label.split(' ');
+    if (words.length > maxWords) {
+      return <>{words.slice(0, maxWords).join(' ')} ...</>;
+    }
+    return label;
+  };
   const items = useMemo(
     () =>
       links.map((link, index, items) => {
@@ -37,6 +45,8 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
           // We add 1 here to take into account of the truncated breadcrumb.
           position <= Math.abs(lengthOffset) + 1 && isOverflow && !isLastItem;
 
+        const labelString = link.label.toString();
+        const formattedLabel = formatLabelWithWordCount(labelString, 6);
         return (
           <BreadcrumbItem
             key={link.label.toString()}
@@ -45,7 +55,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
             position={position + +!hideHome}
           >
             <BreadcrumbLink href={link.href} active={isLastItem}>
-              {link.label}
+              <div className=" text-center">{formattedLabel}</div>
             </BreadcrumbLink>
           </BreadcrumbItem>
         );