fix(repo): unify DEFAULT_SHOW_FULL_NAME output in templates and dropdown (#36597)

The design of DefaultShowFullName has some problems, which make the UI
inconsistent, see the new comment in code

This PR does a clean up for various legacy problems, and clarify some
"user name display" behaviors.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Tyrone Yeh
2026-03-04 21:23:17 +08:00
committed by GitHub
parent 315b947740
commit 79ae9ea97b
18 changed files with 128 additions and 122 deletions

View File

@@ -1969,7 +1969,15 @@ tbody.commit-list {
padding-right: 0.5em; /* To match the alignment with the "required" label */
}
.search-fullname {
.username-display {
max-width: 100%; /* the inner part might have "gt-ellipsis" */
min-width: 0; /* if it is the top flex container, "max-width" works; but if it is inside another flex container, the parent needs to handle the x-axis and here also needs "min-width" */
display: inline-flex;
gap: var(--gap-inline);
align-items: center;
}
.username-display > .username-fullname {
color: var(--color-text-light-2);
}

View File

@@ -1,6 +1,6 @@
import {updateIssuesMeta} from './repo-common.ts';
import {toggleElem, queryElems, isElemVisible} from '../utils/dom.ts';
import {html} from '../utils/html.ts';
import {html, htmlRaw} from '../utils/html.ts';
import {confirmModal} from './comp/ConfirmModal.ts';
import {showErrorToast} from '../modules/toast.ts';
import {createSortable} from '../modules/sortable.ts';
@@ -138,10 +138,11 @@ function initDropdownUserRemoteSearch(el: Element) {
// the content is provided by backend IssuePosters handler
processedResults.length = 0;
for (const item of resp.results) {
let nameHtml = html`<img class="ui avatar tw-align-middle" src="${item.avatar_link}" aria-hidden="true" alt width="20" height="20"><span class="gt-ellipsis">${item.username}</span>`;
if (item.full_name) nameHtml += html`<span class="search-fullname tw-ml-2">${item.full_name}</span>`;
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 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: nameHtml});
processedResults.push({value: item.username, name: htmlItem});
}
resp.results = processedResults;
return resp;