From bd81db41172a1ae01a662d6d0072b3924d3f1434 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 10 Dec 2025 13:33:33 +0200
Subject: [PATCH] feat(breadcrumb_row): improve badge fit on constrained width

---
 apps/client/src/widgets/Breadcrumb.css       | 31 ++++++++++++++++++++
 apps/client/src/widgets/BreadcrumbBadges.css |  2 +-
 apps/client/src/widgets/BreadcrumbBadges.tsx |  2 +-
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/Breadcrumb.css b/apps/client/src/widgets/Breadcrumb.css
index 5f3bc886b..9d702beff 100644
--- a/apps/client/src/widgets/Breadcrumb.css
+++ b/apps/client/src/widgets/Breadcrumb.css
@@ -4,6 +4,37 @@
     min-height: 30px;
     align-items: center;
     padding: 10px;
+    container-type: inline-size;
+
+    @container (max-width: 500px) {
+        .breadcrumb-badges {
+            flex-shrink: 0;
+
+            >* {
+                flex-shrink: 0;
+                width: 18px;
+            }
+
+            .dropdown {
+                button {
+                    flex-shrink: 0;
+                }
+            }
+
+            .breadcrumb-badge {
+                flex-shrink: 0;
+                padding: 0 2px;
+
+                >* {
+                    text-overflow: clip;
+                }
+
+                .text {
+                    display: none;
+                }
+            }
+        }
+    }
 }
 
 body.experimental-feature-new-layout .breadcrumb-row {
diff --git a/apps/client/src/widgets/BreadcrumbBadges.css b/apps/client/src/widgets/BreadcrumbBadges.css
index 41116aa1e..7d6405159 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.css
+++ b/apps/client/src/widgets/BreadcrumbBadges.css
@@ -16,7 +16,7 @@
         padding: 2px 6px;
         border-radius: var(--badge-radius);
         font-size: 0.75em;
-        background-color: var(--color, var(--badge-background-color));
+        background-color: var(--color, transparent);
         color: white;
         min-width: 0;
         flex-shrink: 1;
diff --git a/apps/client/src/widgets/BreadcrumbBadges.tsx b/apps/client/src/widgets/BreadcrumbBadges.tsx
index 35cda87dd..57377167e 100644
--- a/apps/client/src/widgets/BreadcrumbBadges.tsx
+++ b/apps/client/src/widgets/BreadcrumbBadges.tsx
@@ -103,7 +103,7 @@ function Badge({ icon, className, text, tooltip, onClick, href }: BadgeProps) {
 
     const content = <>
         {icon && <><Icon icon={icon} />&nbsp;</>}
-        {text}
+        <span class="text">{text}</span>
     </>;
 
     return (