Resources

• Figma: Reference screenshots

---

Thread list

• Root message avatar: Make .mx_EventTile_avatar render a 36px image (instead of 24px)
  ❌ Apr. 1 Now it's measuring 32px instead of 36px.
• Root message avatar: Change .mx_EventTile_avatar top position to 0 (instead of top: -4px)
• Vertical alignment for elements in the thread summary should behave the same way as thread summaries in the main timeline (the ones that Michael (t3chguy) recently fixed).
• Align thread list to the top (latest activity on the top, screenshot).
  ✋ Blocked by BACAT scrolling
  ❌ May. 26 It's been suggested to treat this enhancement separately from the Threads project. Threads Beta — Design implementation review #21502 (comment)
• Make the right gutter 40px (screenshot: currently set to 32px).
  ❌ Apr. 1 Now it's measuring 46px instead of 40px.
• Unread indicator: set dot size to 10px and center it. (screenshot)
  → Figma
  🐛 Apr. 1 Barely visible, the dot is almost completely cut off (macOS Chrome).
• Unread indicator: use Compound’s secondary color for the gray color (instead of #61708b)

Thread list: Hover state

• Fix split background colors. (screenshot)
  Tracked by Implement improved spacing for the thread list and timeline. #21759
• Remove left green border for own root messages.
• Make the border radius 8px (instead of 4px).
• Extend background color on all sides to add expected padding.
  Tracked by Implement improved spacing for the thread list and timeline. #21759

Thread list: Empty state

Refer to mockups.

• Fix the margins for the contents (screenshot).
• Add missing line: Tip: Use “Reply in thread” when hovering over a message..
  → Figma
  🐛 Apr. 1 When visiting a room it suddenly changes to the previous version (the one without the tip) when it attempts to load the thread list for the first time.
• Set Show all threads font size to 15px.
• Filter popover menu: Do not reverse caret direction when control is active.
  → Figma
• Filter popover menu: Set a gap of 2px between popover menu and the control.
  → Figma
  ❌ Apr. 1 The gap is now bigger, get it 2px closer.

Thread view

• Make the left gutter 60px (screenshot: currently set to 48px)
  ❌ Apr. 1 It was 48px, now 52px, still not 60px.
• The user name and message body should align to the same vertical line. (screenshot)
• Vertical spacing between message titles: Apply the same spacing as in the main timeline (screenshot).
  ❌ Apr. 1 Set padding-top: 14px for .mx_ThreadView .mx_EventTile.
• Align timeline to the top of the timeline container.
  → Figma
  ✋ Blocked by BACAT scrolling
  ❌ May. 26 We're dropping this requirement for the thread timeline.
• View in room action is missing in the root message contextual actions.

Thread search: Keyword match in thread reply

• Fix layout for “From a thread” footer: align left edge and add missing gap between icon and label (just change margin-left: 8px; for .mx_ThreadSummaryIcon::before to be margin-right: 8px;), reduce top margin (make margin-top: 8px for mx_ThreadSummaryIcon).
  → Figma
  ❌ Apr. 1 "From a thread" text should use secondary color. Also, .mx_ThreadSummaryIcon is now an inline element, and thus the 8px vertical margin is having no effect.
• Make the thread reply footer mx_ThreadSummaryIcon clickable, behaving the same way as its related mx_EventTile_line.

Thread search: Keyword match in thread root message

• Root messages in search results should display the thread summary in the footer. (“From a thread” it’s only for thread replies)
  → Figma
  Tracked by Thread summary is not displayed for root messages in search results #21450

Refer to the annotations on how the flow should work for “Keyword match in root message”:

• Clicking on the root message shows it in the room timeline.
• Clicking on the thread summary opens the thread panel for the matching room. It will only exit the search result screen if keyword match is from a different room.