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:
riyadhafraa
2026-04-29 18:37:51 +00:00
parent f9691a37a2
commit 38f9564476
@@ -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 ? (