fix: added ellipsis for long content in breadcrumb (#6794)

* fix:added ellipsis for long value in breadcrumb

* changes js to css logic

* removed double truncate

* removed unneccesary comments and further minor changes

* Update components/Common/Breadcrumbs/BreadcrumbLink/index.module.css

Signed-off-by: Claudio W <[email protected]>

* draft changes

* pl to px

* increase the px from 2 to 6

---------

Signed-off-by: Claudio W <[email protected]>
Co-authored-by: Claudio W <[email protected]>

Author: TenzDelek

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

@@ -1,9 +1,15 @@
 .item {
   @apply flex
-    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
@@ -23,6 +29,7 @@
 
   .separator {
     @apply size-4
+      max-w-fit
       flex-shrink-0
       flex-grow
       text-neutral-600

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

@@ -1,4 +1,7 @@
 .link {
+  @apply max-w-fit 
+    truncate;
+
   &.active {
     @apply rounded
       bg-green-600

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

@@ -1,5 +1,6 @@
 .list {
   @apply flex
-    items-center
-    gap-5;
+    w-full
+    gap-5
+    px-6;
 }