feat(breadcrumb_row): improve badge fit on constrained width

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 {

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;

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 (