From 2fef25e57bc7e3bdb39b6d05d199fd9cb8d2d9aa Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 23 Dec 2025 22:01:49 +0200
Subject: [PATCH] chore(badges): allow overflow with clipping

---
 apps/client/src/widgets/layout/NoteBadges.css |  7 +++++++
 apps/client/src/widgets/react/Badge.css       | 16 +++++++++++++++-
 apps/client/src/widgets/react/Badge.tsx       |  5 ++++-
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/layout/NoteBadges.css b/apps/client/src/widgets/layout/NoteBadges.css
index 39fafd90e..8de12b810 100644
--- a/apps/client/src/widgets/layout/NoteBadges.css
+++ b/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 {
diff --git a/apps/client/src/widgets/react/Badge.css b/apps/client/src/widgets/react/Badge.css
index cf661b4f9..8eac80b7d 100644
--- a/apps/client/src/widgets/react/Badge.css
+++ b/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;
             }
         }
     }
diff --git a/apps/client/src/widgets/react/Badge.tsx b/apps/client/src/widgets/react/Badge.tsx
index 6e17ed0ce..48fa7fe09 100644
--- a/apps/client/src/widgets/react/Badge.tsx
+++ b/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}
             />}