fix: branch protection user list (#38570)

fix #38569, also fix the UI

web_src/css/modules/dropdown.css

@@ -441,7 +441,6 @@ select.ui.dropdown {
 }
 
 .ui.multiple.dropdown > .label {
-  display: inline-block;
   white-space: normal;
   font-size: 1em;
   padding: 0.35714286em 0.78571429em;
@@ -449,6 +448,11 @@ select.ui.dropdown {
   box-shadow: 0 0 0 1px var(--color-secondary) inset;
 }
 
+.ui.multiple.dropdown > .label img {
+  width: auto;
+  max-height: 20px;
+}
+
 /* Text */
 .ui.multiple.dropdown > .text {
   position: static;

web_src/css/modules/label.css

@@ -33,12 +33,6 @@ a.ui.label {
   opacity: 1;
 }
 
-.ui.label > img {
-  width: auto;
-  vertical-align: middle;
-  height: 2.1666em;
-}
-
 .ui.label > .icon {
   width: auto;
   margin: 0 0.75em 0 0;

web_src/css/repo.css

@@ -1836,10 +1836,14 @@ tbody.commit-list {
   align-items: center;
   max-width: 100%; /* min/max widths are for "gt-ellipsis", see the comment of other "flex-xxx" family classes */
   min-width: 0;
+  overflow: hidden;
 }
 
 .username-display > .username-fullname {
   color: var(--color-text-light-2);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 #issue-pins {

web_src/js/features/repo-issue-list.ts

@@ -133,7 +133,7 @@ function initDropdownUserRemoteSearch(el: Element) {
         processedResults.length = 0;
         for (const item of resp.results) {
           const htmlAvatar = html`<img class="ui avatar tw-align-middle" src="${item.avatar_link}" aria-hidden="true" alt width="20" height="20">`;
-          const htmlFullName = item.full_name ? html`<span class="username-fullname gt-ellipsis">(${item.full_name})</span>` : '';
+          const htmlFullName = item.full_name ? html`<span class="username-fullname">(${item.full_name})</span>` : '';
           const htmlItem = html`<span class="username-display">${htmlRaw(htmlAvatar)}<span>${item.username}</span>${htmlRaw(htmlFullName)}</span>`;
           if (selectedUsername.toLowerCase() === item.username.toLowerCase()) selectedUsername = item.username;
           processedResults.push({value: item.username, name: htmlItem});