Comfy message layout in Discord's shape #295

Closed
opened 2026-10-07 20:43:09 -04:00 by Salastil · 1 comment
Owner

Decided: Comfy becomes Discord-shaped; Classic keeps the IRC time column; Bubbles unchanged.

Now: 28px avatars (app.css:1581-1606), the time in a separate 42px column left of the avatar (MessageRow.tsx:680-684), 2px/0px padding so author groups have no breathing room (app.css:1454-1462), timestamps almost as bright as text, grouped rows show no time on hover (MessageRow.tsx:682), and the comfy avatar is a hand-made img (694-709) instead of the shared <Avatar>.

Fix: 40px avatar via <Avatar>; name then a dim time on the same line; ~16px above each new author group; grouped rows show a small time in the gutter on hover.

Part of the v1.0 UI pass.

Decided: Comfy becomes Discord-shaped; Classic keeps the IRC time column; Bubbles unchanged. Now: 28px avatars (app.css:1581-1606), the time in a separate 42px column left of the avatar (MessageRow.tsx:680-684), 2px/0px padding so author groups have no breathing room (app.css:1454-1462), timestamps almost as bright as text, grouped rows show no time on hover (MessageRow.tsx:682), and the comfy avatar is a hand-made `img` (694-709) instead of the shared `<Avatar>`. **Fix:** 40px avatar via `<Avatar>`; name then a dim time on the same line; ~16px above each new author group; grouped rows show a small time in the gutter on hover. _Part of the v1.0 UI pass._
Salastil added this to the v1.0 milestone 2026-10-07 20:43:09 -04:00
Salastil added the feature label 2026-10-07 20:43:09 -04:00
Author
Owner

Finished: 3a7677e.

Before (left) and after (right), the Discord-shaped test guild in the Comfy layout:

comfy

  • A 40px picture (was 28), the name with its time on the same line (the separate 42px time column is gone from Comfy), and 16px of air above each new speaker, so a run of messages reads as one thing.
  • A follow-up line's time sits in the picture's column and shows on hover (see "pics later" - hover it and the time appears in the gutter).
  • Classic keeps the IRC-style time column and Bubbles are unchanged - checked with the same scenes:

classic

bubbles

Relative-time labels (#278) are used in the name line when that setting is on. Not done: Discord's separate mini-avatar-on-the-quote connector is in #296; the picture still uses the existing avatar/fallback element rather than the shared <Avatar> component, to keep Kick's own name colours as the fallback.

Finished: [3a7677e](https://git.salastil.com/Salastil/moho/commit/3a7677ef16e5f6285cbb9fd3b63f6a650e66dc57). Before (left) and after (right), the Discord-shaped test guild in the Comfy layout: ![comfy](https://git.salastil.com/attachments/dbfff7f2-0b6e-45de-b654-05a377387c3c) - **A 40px picture** (was 28), the **name with its time on the same line** (the separate 42px time column is gone from Comfy), and **16px of air above each new speaker**, so a run of messages reads as one thing. - **A follow-up line's time sits in the picture's column and shows on hover** (see "pics later" - hover it and the time appears in the gutter). - **Classic keeps the IRC-style time column and Bubbles are unchanged** - checked with the same scenes: ![classic](https://git.salastil.com/attachments/af19bc20-9d42-4977-9036-bd8e0aa50c0b) ![bubbles](https://git.salastil.com/attachments/aa619db8-ee06-497a-a046-2f9e8eeb9ad5) Relative-time labels (#278) are used in the name line when that setting is on. Not done: Discord's separate mini-avatar-on-the-quote connector is in #296; the picture still uses the existing avatar/fallback element rather than the shared `<Avatar>` component, to keep Kick's own name colours as the fallback.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Salastil/moho#295