Schedule attendees: keep number prefix inline with the name
Task #173. The per-attendee `<li>` in `AttendeeFlow` only had `whitespace-nowrap` in non-editable mode. Once edit mode was on, the LI was just `min-w-[3rem]`, so the inline-block `EditableCell` was free to wrap below the small index `<span>` whenever the attendee name was wider than the LI's content box. The result was the stacked "number on top, name below" layout the user reported (e.g. "محمد علي (Webex)" pushed onto a second line under "1-"). Fix: always apply `whitespace-nowrap` on each attendee `<li>`, and keep `min-w-[3rem]` only when editable so empty edit targets still have a usable click area. The parent `<ul flex-wrap>` already handles wrapping between attendees, which is the desired behavior when the cell is narrow. Multi-group layout (Virtual / Internal / External headers as separate rows), the pending "+ Add attendee" ghost row, and the dashed click underline (still hugging only the name) are all unchanged. Edit-toggle e2e tests (2 specs) still pass. Code review: PASS.
This commit is contained in:
@@ -2936,7 +2936,16 @@ function AttendeeFlow({
|
||||
{items.map(({ a, i }, displayIdx) => (
|
||||
<li
|
||||
key={a.id ?? i}
|
||||
className={editable ? "min-w-[3rem]" : "whitespace-nowrap"}
|
||||
// `whitespace-nowrap` keeps the index prefix and the name on
|
||||
// the same visual line so we never get a stacked "number on
|
||||
// top, name below" layout — even for long names like
|
||||
// "محمد علي (Webex)" or in edit mode where the name is wrapped
|
||||
// in an inline-block EditableCell. Wrapping between attendees
|
||||
// still happens at the parent <ul flex-wrap> level, which is
|
||||
// the desired behavior when the cell is narrow.
|
||||
className={
|
||||
"whitespace-nowrap" + (editable ? " min-w-[3rem]" : "")
|
||||
}
|
||||
>
|
||||
<span className="text-gray-500 me-1">{displayIdx + 1}-</span>
|
||||
{editable ? (
|
||||
|
||||
Reference in New Issue
Block a user