Threads: opening the thread panel next to the member drawer squeezes both composers to a few characters at ≤1400 px #218

New Issue

2026-09-18T21:31:31-04:00

jared commented

2026-09-18 21:31:31 -04:00

From the #165 audit (screenshot on that issue). With the member list open, opening a thread on a 1400 px window leaves the main composer showing "Send a mes…" and the thread composer "S…"; three right-hand columns do not fit. Element collapses the right panel when a thread opens below ~1500 px. Suggest: below a width threshold, opening the thread panel hides the members drawer (and restores it on close), or make the thread panel the only right panel on Desktop widths under 1500 px.

thread-1400.png

542 KiB

thread-1600.png

616 KiB

jared added this to the Features 2026-Q4 milestone 2026-09-18 21:31:31 -04:00

jared added the priority: low ux area: threads labels 2026-09-18 21:31:31 -04:00

jared referenced this issue

2026-09-18 21:31:32 -04:00

[deep dive] Threads: full UI/UX audit + "mark all threads read" #165

jared commented

2026-09-19 13:07:30 -04:00

Fixed in 8b1c9fa6 — it was two problems:

Three columns don't fit under ~1500 px. The member drawer now yields to an open content panel (thread / gallery / widgets / threads list) on desktops ≤ 1500 px and comes back when the panel closes — Element's behaviour.
The thread composer was squeezed at every width, not just 1400: it rendered the full ten-button toolbar inside the 360 px panel, leaving 24 px for the input ("S…") even at 1600 px with room to spare. RoomInput gained a compactLayout prop (the phone one-row + | input | emoji | send layout, secondary tools behind "+") and the thread panel uses it.

Measured headless — 1400 px: thread open → drawer hidden, composers 328 / 168 px (was 422 → "Send a mes…" + 24 px); 1600 px: drawer stays, thread composer 168 px.

Fixed in `8b1c9fa6` — it was two problems: 1. **Three columns don't fit under ~1500 px.** The member drawer now yields to an open content panel (thread / gallery / widgets / threads list) on desktops ≤ 1500 px and comes back when the panel closes — Element's behaviour. 2. **The thread composer was squeezed at every width**, not just 1400: it rendered the full ten-button toolbar inside the 360 px panel, leaving 24 px for the input ("S…") even at 1600 px with room to spare. `RoomInput` gained a `compactLayout` prop (the phone one-row `+ | input | emoji | send` layout, secondary tools behind "+") and the thread panel uses it. Measured headless — 1400 px: thread open → drawer hidden, composers 328 / 168 px (was 422 → "Send a mes…" + 24 px); 1600 px: drawer stays, thread composer 168 px. ![1400](https://code.lotusguild.org/attachments/06bb6f9d-d33f-4b3b-9bad-b4dace51fe49) ![1600](https://code.lotusguild.org/attachments/f763028f-d9af-47f2-97ff-b76c3e956d3b)

jared closed this issue

2026-09-19 13:07:30 -04:00

jared referenced this issue from a commit

2026-09-19 13:07:30 -04:00

fix(threads): thread panel no longer squeezes the composers (#218)

jared referenced this issue from a commit

2026-09-19 22:38:43 -04:00

ci(e2e): tier-3 regression suite against a Synapse the job starts itself (#220)

jared referenced this issue

2026-09-19 22:46:15 -04:00

CI: e2e job that starts its own Synapse and runs the UI regression suite (no prod secrets) #220

Sign in to join this conversation.