From ef27ee9fb6633d2a3878ba72cdeaa576d6e93018 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 16 Jul 2024 17:52:17 -0400
Subject: [PATCH] UX: allow category names in select-kit to truncate if needed
 (#27941)

---
 app/assets/stylesheets/common/components/badges.scss     | 2 ++
 app/assets/stylesheets/common/select-kit/select-kit.scss | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index 6d63eb2d6f3..b099a897c06 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -30,6 +30,7 @@
     align-items: baseline;
     gap: 0.33em;
     color: var(--primary-high);
+    min-width: 0;
 
     &:before {
       content: "";
@@ -43,6 +44,7 @@
       color: currentColor;
       text-overflow: ellipsis;
       overflow: hidden;
+      min-width: 0;
     }
 
     &.--has-parent {
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 3dba9a25d31..b46d054f3d2 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -112,6 +112,7 @@
       color: inherit;
       display: flex;
       outline: none;
+      min-width: 0;
 
       &:focus .d-icon-times {
         color: var(--danger);
@@ -124,6 +125,7 @@
       .name {
         display: inline-flex;
         gap: 0.5em;
+        min-width: 0;
         > .d-icon {
           margin-left: 0.5em;
           margin-right: 0;