From 74c635753935190bbaace637015180fbd68a765c Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Mon, 3 Jun 2024 10:50:49 +0530
Subject: [PATCH 1/8] fix:added ellipsis for long value in breadcrumb

---
 .../Breadcrumbs/BreadcrumbRoot/index.module.css      |  4 +++-
 apps/site/components/Common/Breadcrumbs/index.tsx    | 12 +++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
index 55bedbeb24394..19eeccdcf91eb 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
+++ b/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;
 }
diff --git a/apps/site/components/Common/Breadcrumbs/index.tsx b/apps/site/components/Common/Breadcrumbs/index.tsx
index 13c796305cb47..690b5ab8c6ef1 100644
--- a/apps/site/components/Common/Breadcrumbs/index.tsx
+++ b/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>
         );

From 80aeab18277fd18fd7701c1290766cb5af6ffc63 Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Mon, 3 Jun 2024 15:13:33 +0530
Subject: [PATCH 2/8] changes js to css logic

---
 .../Breadcrumbs/BreadcrumbItem/index.module.css       |  2 ++
 .../Breadcrumbs/BreadcrumbLink/index.module.css       |  2 ++
 apps/site/components/Common/Breadcrumbs/index.tsx     | 11 +----------
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
index 47f767b5c7e73..9cf8609815fd0 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
@@ -1,7 +1,9 @@
 .item {
   @apply flex
+    max-w-96
     items-center
     gap-5
+    truncate
     text-sm
     font-medium;
 
diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
index d82fa364b5b8f..5e8a9e4f3af6c 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
@@ -1,4 +1,6 @@
 .link {
+  @apply w-full truncate;
+
   &.active {
     @apply rounded
       bg-green-600
diff --git a/apps/site/components/Common/Breadcrumbs/index.tsx b/apps/site/components/Common/Breadcrumbs/index.tsx
index 690b5ab8c6ef1..998931b4939e1 100644
--- a/apps/site/components/Common/Breadcrumbs/index.tsx
+++ b/apps/site/components/Common/Breadcrumbs/index.tsx
@@ -29,13 +29,6 @@ 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) => {
@@ -45,8 +38,6 @@ 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()}
@@ -55,7 +46,7 @@ const Breadcrumbs: FC<BreadcrumbsProps> = ({
             position={position + +!hideHome}
           >
             <BreadcrumbLink href={link.href} active={isLastItem}>
-              <div className=" text-center">{formattedLabel}</div>
+              {link.label}
             </BreadcrumbLink>
           </BreadcrumbItem>
         );

From 78cb69285ebdd1aa5cb4c528730a8f1e09e761ec Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Mon, 3 Jun 2024 15:17:29 +0530
Subject: [PATCH 3/8] removed double truncate

---
 .../Common/Breadcrumbs/BreadcrumbItem/index.module.css           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
index 9cf8609815fd0..04a31b607aee3 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
@@ -3,7 +3,6 @@
     max-w-96
     items-center
     gap-5
-    truncate
     text-sm
     font-medium;
 

From 7f61f6875da76c2337c75179a0846934979ef40c Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Mon, 3 Jun 2024 15:40:55 +0530
Subject: [PATCH 4/8] removed unneccesary comments and further minor changes

---
 .../Common/Breadcrumbs/BreadcrumbLink/index.module.css         | 3 ++-
 apps/site/components/Common/Breadcrumbs/index.tsx              | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
index 5e8a9e4f3af6c..c6b221313c7da 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
@@ -1,5 +1,6 @@
 .link {
-  @apply w-full truncate;
+  @apply w-full 
+  truncate;
 
   &.active {
     @apply rounded
diff --git a/apps/site/components/Common/Breadcrumbs/index.tsx b/apps/site/components/Common/Breadcrumbs/index.tsx
index 998931b4939e1..13c796305cb47 100644
--- a/apps/site/components/Common/Breadcrumbs/index.tsx
+++ b/apps/site/components/Common/Breadcrumbs/index.tsx
@@ -18,7 +18,6 @@ type BreadcrumbsProps = {
   maxLength?: number;
   hideHome?: boolean;
 };
-// Convert link.label to string and get its length
 
 const Breadcrumbs: FC<BreadcrumbsProps> = ({
   links = [],

From da325b40cea048e600768619f0ed4ce06f867feb Mon Sep 17 00:00:00 2001
From: Claudio W <cwunder@gnome.org>
Date: Mon, 3 Jun 2024 12:13:32 +0200
Subject: [PATCH 5/8] Update
 components/Common/Breadcrumbs/BreadcrumbLink/index.module.css

Signed-off-by: Claudio W <cwunder@gnome.org>
---
 .../Common/Breadcrumbs/BreadcrumbLink/index.module.css          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
index c6b221313c7da..2b71ad85de1e7 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
@@ -1,6 +1,6 @@
 .link {
   @apply w-full 
-  truncate;
+    truncate;
 
   &.active {
     @apply rounded

From 7ba9fa380fb1185ea2a8069d78e6b2d3ba856daf Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Tue, 4 Jun 2024 12:54:49 +0530
Subject: [PATCH 6/8] draft changes

---
 .../Breadcrumbs/BreadcrumbItem/index.module.css  | 16 +++++++++++-----
 .../Breadcrumbs/BreadcrumbLink/index.module.css  |  2 +-
 .../Breadcrumbs/BreadcrumbRoot/index.module.css  |  1 -
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
index 04a31b607aee3..8edfa1fb194b1 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
@@ -1,10 +1,15 @@
 .item {
   @apply flex
-    max-w-96
-    items-center
-    gap-5
-    text-sm
-    font-medium;
+     max-w-fit
+     items-center
+     gap-5
+     truncate
+     text-sm
+     font-medium;
+
+  &:last-child {
+    @apply w-full;
+  }
 
   a {
     @apply flex-shrink
@@ -24,6 +29,7 @@
 
   .separator {
     @apply size-4
+      max-w-fit
       flex-shrink-0
       flex-grow
       text-neutral-600
diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
index 2b71ad85de1e7..b23a220ff8147 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
@@ -1,5 +1,5 @@
 .link {
-  @apply w-full 
+  @apply max-w-fit 
     truncate;
 
   &.active {
diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
index 19eeccdcf91eb..0856e1331de38 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
@@ -1,7 +1,6 @@
 .list {
   @apply flex
     w-full
-    items-center
     gap-5
     pl-2;
 }

From 80b672e2c621dc8421e2aaa540a564d1bf32c838 Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Tue, 4 Jun 2024 15:57:40 +0530
Subject: [PATCH 7/8] pl to px

---
 .../Common/Breadcrumbs/BreadcrumbRoot/index.module.css          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
index 0856e1331de38..211f26f4bc74b 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
@@ -2,5 +2,5 @@
   @apply flex
     w-full
     gap-5
-    pl-2;
+    px-2;
 }

From 07934dc68e803aa682a3ea659309ede39b3bcebe Mon Sep 17 00:00:00 2001
From: TenzDelek <tibetdelek@gmail.com>
Date: Sun, 21 Jul 2024 20:36:49 +0530
Subject: [PATCH 8/8] increase the px from 2 to 6

---
 .../Common/Breadcrumbs/BreadcrumbRoot/index.module.css          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css b/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
index 211f26f4bc74b..a0d9c35c8a58c 100644
--- a/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
+++ b/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
@@ -2,5 +2,5 @@
   @apply flex
     w-full
     gap-5
-    px-2;
+    px-6;
 }