improve(messages): compact inline layout for member picker list
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions

Name and company in one line separated by | pipe, smaller avatars,
tighter padding for more compact member selection.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-20 11:42:26 +01:00
parent 3e26f1e289
commit 43b48983c4

View File

@ -224,8 +224,8 @@
.member-list-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
gap: var(--spacing-xs);
padding: 6px var(--spacing-md);
cursor: pointer;
transition: background 0.15s;
}
@ -244,16 +244,16 @@
}
.member-list-avatar {
width: 32px;
height: 32px;
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.member-list-initial {
width: 32px;
height: 32px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--primary);
color: white;
@ -261,19 +261,29 @@
align-items: center;
justify-content: center;
font-weight: 600;
font-size: var(--font-size-sm);
font-size: 12px;
flex-shrink: 0;
}
.member-list-info {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
}
.member-list-name {
font-weight: 500;
font-size: var(--font-size-sm);
color: var(--text-primary);
white-space: nowrap;
}
.member-list-sep {
color: var(--border-color, #cbd5e1);
flex-shrink: 0;
}
.member-list-company {
@ -421,13 +431,13 @@
var avatarHtml = u.avatarPath
? '<img src="' + u.avatarPath + '" class="member-list-avatar" alt="">'
: '<div class="member-list-initial">' + initial + '</div>';
var companyHtml = u.companyName ? '<div class="member-list-company">' + u.companyName + '</div>' : '';
var companyHtml = u.companyName ? '<span class="member-list-sep">|</span><span class="member-list-company">' + u.companyName + '</span>' : '';
return '<label class="member-list-item' + selectedClass + '" data-user-id="' + u.id + '">' +
'<input type="checkbox" ' + checked + ' data-id="' + u.id + '" style="width:auto;">' +
avatarHtml +
'<div class="member-list-info">' +
'<div class="member-list-name">' + u.name + '</div>' +
'<span class="member-list-name">' + u.name + '</span>' +
companyHtml +
'</div>' +
'</label>';