Unbox comment UI

Opportunity

Comments are currently enclosed in visible containers, or "boxes", and threads consist of a series of containers for the parent comment, threaded comments, and new reply. While containers can be useful to both relate content together, and separate unrelated content, this also can be achieved through spacing and alignment.

Proposal

Direction: Thread Unboxing

All activity	Comments only

Figma

Comments remain enclosed, but inner containers are removed to streamline the appearance within the thread.

Details

Pros: Comments, with their different actions and unknown content, are set apart from history when in the combined view.

Cons: Adds containers, which especially in the "Comments only" view may not be entirely necessary especially alongside the timeline connector.

Alternate Direction

Direction 🅱️: Complete Unboxing

All activity	Comments only

Figma

Small emojis and highlight glow are independent experiments, but help highlight a fully "streamlined" approach

All comment and thread containers are removed; containers are only visible to denote special characteristics such as internal notes or highlighted items (notes opened from a direct link).

Pros: Streamlined UI (minimal nesting, all notes aligned)

Cons: Comments are less distinct — users have to rely on other context clues (avatars, content of the message) to scan for comments in a combined activity view

• The existing ability to access a comments-only view mitigates this when used, though this is not currently the default.

UI Details

New reply/comment

Adding the avatar to the left of new reply/comment, so the comment appears the same when editing and once added, and also maintaining its logical alignment to other comments.

Single reply action

Shifting Reply expand/collapse so that the Reply button is a single action, rather than 2 separate actions with a different action in the middle (today both the > and "[#] replies" expand the thread, while avatars open a new page). This also allows both expand/collapse states to use the same basic pattern.

States	Demo	Hover detail