From 9e4b5b2bedcdfae057e4abefb6d23c1c52605fdf Mon Sep 17 00:00:00 2001
From: SameepAher <sameepaher@gmail.com>
Date: Sun, 16 Apr 2023 17:11:22 +0530
Subject: [PATCH] css: Fix text overflow bug for pill values.

This commit fixes the text overflow bug for pill values by adding a
maximum width of 100% for the pill along with the ellipsis property on
text overflow.

Fixes: #21807.
---
 web/styles/input_pill.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index 39d49889e2..8c4150dff1 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -12,6 +12,7 @@
     .pill {
         display: inline-flex;
         align-items: center;
+        max-width: 100%;
 
         height: 20px;
         margin: 1px 2px;
@@ -38,6 +39,9 @@
 
         .pill-value {
             margin: 0 5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
         .exit {