chore(badges): allow overflow with clipping

apps/client/src/widgets/layout/NoteBadges.css

@@ -16,6 +16,13 @@
         &.share-badge {--color: var(--badge-share-background-color);}
         &.clipped-note-badge {--color: var(--badge-clipped-note-background-color);}
         &.execute-badge {--color: var(--badge-execute-background-color);}
+        min-width: 0;
+
+        .text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            min-width: 0;
+        }
     }
 
     .dropdown-badge {

apps/client/src/widgets/react/Badge.css

@@ -50,16 +50,30 @@
     white-space: nowrap;
     border-radius: var(--badge-radius);
 
+    button,
+    .btn {
+        min-width: 0;
+        overflow: hidden;
+    }
+
     .ext-badge {
         border-radius: 0;
 
         .text {
             display: inline-flex;
             align-items: center;
+            min-width: 0;
+
+            .text-inner {
+                min-width: 0;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
 
             .arrow {
                 font-size: 1.3em;
-                margin-left: 0.25em;
+                margin-inline-start: 0.25em;
+                margin-inline-end: 0;
             }
         }
     }

apps/client/src/widgets/react/Badge.tsx

@@ -60,7 +60,10 @@ export function BadgeWithDropdown({ text, children, tooltip, className, dropdown
         <Dropdown
             className={`dropdown-badge dropdown-${className}`}
             text={<Badge
-                text={<>{text} <Icon className="arrow" icon="bx bx-chevron-down" /></>}
+                text={<>
+                    <span class="text-inner">{text}</span>
+                    <Icon className="arrow" icon="bx bx-chevron-down" />
+                </>}
                 className={className}
                 {...props}
             />}