feat(breadcrumb_badges): basic shrink support

apps/client/src/widgets/BreadcrumbBadges.css

@@ -5,19 +5,21 @@
 .breadcrumb-badges {
     display: flex;
     gap: 5px;
+    min-width: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+    --badge-radius: 12px;
 
     .breadcrumb-badge {
         display: flex;
         align-items: center;
         padding: 2px 6px;
-        border-radius: 12px;
+        border-radius: var(--badge-radius);
         font-size: 0.75em;
-        background-color: var(--color, --badge-background-color);
+        background-color: var(--color, var(--badge-background-color));
         color: white;
         min-width: 0;
-        text-overflow: ellipsis;
+        flex-shrink: 1;
-        white-space: nowrap;
-        overflow: hidden;
 
         &.clickable {
             cursor: pointer;
@@ -36,13 +38,30 @@
             color: inherit;
             text-decoration: none;
         }
+
+        > * {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
     }
 
     .dropdown {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        border-radius: var(--badge-radius);
+
         &.dropdown-backlinks-badge .dropdown-menu {
             min-width: 500px;
         }
 
+        .breadcrumb-badge {
+            border-radius: 0;
+        }
+
         .btn {
             border: 0;
             margin: 0;

apps/client/src/widgets/BreadcrumbBadges.tsx

@@ -112,7 +112,7 @@ function Badge({ icon, className, text, tooltip, onClick, href }: BadgeProps) {
             className={clsx("breadcrumb-badge", className, { "clickable": !!onClick })}
             onClick={onClick}
         >
-            {href ? <a href={href}>{content}</a> : content}
+            {href ? <a href={href}>{content}</a> : <span>{content}</span>}
         </div>
     );
 }
@@ -130,7 +130,7 @@ function BadgeWithDropdown({ children, tooltip, className, dropdownOptions, ...p
             hideToggleArrow
             title={tooltip}
             titlePosition="bottom"
-            dropdownOptions={{ popperConfig: { placement: "bottom" } }}
+            dropdownOptions={{ popperConfig: { placement: "bottom", strategy: "fixed" } }}
             {...dropdownOptions}
         >{children}</Dropdown>
     );