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 <cwunder@gnome.org> * draft changes * pl to px * increase the px from 2 to 6 --------- Signed-off-by: Claudio W <cwunder@gnome.org> Co-authored-by: Claudio W <cwunder@gnome.org>
nodejs · Jul 22, 2024 · 22ebf9e · 22ebf9e
1 parent 96192d6
commit 22ebf9e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css b/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

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css b/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

diff --git a/apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css b/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;
 }