Fix tag name overflow in projects list (#20120)

GitOrigin-RevId: 9fc317dbebd8115ab8af97f4753350f5ee79c1cd

services/web/frontend/js/features/project-list/components/tags-list.tsx

@@ -78,12 +78,9 @@ function TagsList({ onTagClick, onEditClick }: TagsListProps) {
                       style={{ verticalAlign: 'sub' }}
                     />
                   </span>
-                  <span>
-                    {tag.name}{' '}
-                    <span className="subdued">
-                      {' '}
-                      ({tag.project_ids?.length})
-                    </span>
+                  <span className="tag-name-and-size">
+                    <span className="tag-name">{tag.name}</span>
+                    <span className="subdued">({tag.project_ids?.length})</span>
                   </span>
                 </span>
               </MenuItemButton>

services/web/frontend/stylesheets/app/project-list-react.less

@@ -714,6 +714,7 @@
 
     & + .projects-dropdown-menu {
       min-width: 226px;
+      max-width: 92vw;
     }
   }
 
@@ -814,6 +815,7 @@
 .menu-item-button {
   position: relative;
   width: 100%;
+  overflow: hidden;
   border: none;
   box-shadow: none;
   background: inherit;
@@ -822,6 +824,18 @@
 
   .menu-item-button-text {
     padding-left: 14px;
+    overflow: hidden;
+
+    .tag-name-and-size {
+      overflow: hidden;
+      display: flex;
+      gap: 1ex;
+    }
+
+    .tag-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   .menu-item-button-icon {