Skip to content

chore: improve chat message layout to left-aligned design#309

Merged
wesbillman merged 8 commits intomainfrom
tho/chat-style-improvements
Apr 13, 2026
Merged

chore: improve chat message layout to left-aligned design#309
wesbillman merged 8 commits intomainfrom
tho/chat-style-improvements

Conversation

@tellaho
Copy link
Copy Markdown
Collaborator

@tellaho tellaho commented Apr 13, 2026 •
edited
Loading

Overview

Category: UI Improvement
User Impact: Chat messages now use a familiar left-aligned layout with larger avatars, tighter spacing, and no layout shift on hover — matching the feel of Slack and Discord.
Problem: The previous centered, max-width-constrained message layout felt cramped and unfamiliar. Avatars were small (32px), the action bar caused layout shift on hover, bot identicons competed with avatars for space, and bot persona names duplicated the author name.
Solution: Seven incremental commits rework the message row into a left-aligned, full-width layout with 42px avatars optically centered to the first line, an absolutely-positioned action bar, inline bot badges, refined spacing, and smarter persona-name suppression.

Changes

Changed files (9 files, +101 -114)

desktop/src/shared/ui/UserAvatar.tsx (new)

New shared avatar component with image-loading state, error fallback to initials, accent support, and sm/md size variants. Replaces ad-hoc avatar rendering in MessageRow and ForumPostCard/ForumThreadPanel.

desktop/src/features/messages/ui/MessageRow.tsx

Major refactor — swaps inline avatar markup for UserAvatar (42px), moves BotIdenticon from the avatar column to a 14px inline badge next to the username, wraps MessageActionBar in an absolutely-positioned container to eliminate layout shift, increases vertical padding (py-1 to py-1.5), widens body spacing (space-y-0.5 to space-y-1), removes max-w-3xl on Markdown, and suppresses personaDisplayName when it matches author or when the role is a bot instance.

desktop/src/features/messages/ui/MessageActionBar.tsx

When hidden on desktop the bar now collapses its border and shadow (sm:border-0 sm:shadow-none) and restores them on hover/focus, preventing a 2px layout bump.

desktop/src/features/messages/ui/MessageTimeline.tsx

Removes max-w-4xl mx-auto, adds px-4, and increases inter-message gap from gap-2 to gap-3 for a full-width, breathable timeline.

desktop/src/features/messages/ui/MessageComposer.tsx

Removes max-w-4xl mx-auto from the composer wrapper so it stretches to match the new full-width timeline.

desktop/src/features/messages/ui/TypingIndicatorRow.tsx

Removes max-w-4xl mx-auto to align the typing indicator with the new full-width layout.

desktop/src/features/profile/ui/UserProfilePopover.tsx

Accepts new role and botIdenticonValue props; renders a 20px BotIdenticon next to the display name when the role is "bot". Also adds a "View all / Show less" toggle for the recent-notes section.

desktop/src/features/forum/ui/ForumPostCard.tsx

Replaces ProfileAvatar with the new UserAvatar component (size="sm").

desktop/src/features/forum/ui/ForumThreadPanel.tsx

Same ProfileAvatar to UserAvatar swap for thread replies and the original post header.

Reproduction Steps

  1. Open any channel with a mix of human and bot messages.
  2. Left-aligned layout — Verify messages span the full width with no centered max-width constraint. Avatars should be on the left at 42px.
  3. Avatar alignment — The avatar vertical center should align roughly with the midpoint of the username + first line of body text.
  4. Bot badge — Bot messages should show a small 14px identicon inline next to the username, not in the avatar column.
  5. Action bar hover — Hover over a message on desktop. The emoji/reply/more actions bar should appear without the message content shifting down or sideways.
  6. Spacing — Confirm comfortable vertical rhythm: slightly more gap between messages, slightly more space between username row and body.
  7. "Two Neds" fix — For bot messages where personaDisplayName equals the author name, only the author name should show (no duplicate).
  8. Profile popover — Click a bot avatar; the popover should display a 20px bot identicon next to the display name.
  9. Forum posts — Navigate to a forum channel and verify post cards and thread replies render avatars correctly via the new UserAvatar component.

Screenshots / Demos

Screen.Recording.2026-04-13.at.9.43.42.AM.mov
Screenshot 2026-04-13 at 10 06 48 AM Screenshot 2026-04-13 at 10 04 29 AM Screenshot 2026-04-13 at 10 03 14 AM

tellaho added 7 commits April 10, 2026 22:03
@tellaho
style: remove max-width constraints from conversation UI
9d5dcd2 
Remove max-w-4xl from timeline, composer, and typing indicator containers.
Remove max-w-3xl from message markdown body. Let content fill available
width — user controls window size and text zoom (like Slack/Discord).
@tellaho
fix: vertically center avatar across username + first body line
a1324c2 
Add mt-px (1px top margin) to avatar container and change items-center
to items-start. This nudges the 40px avatar down so it visually spans
from the top of the author name through the first line of message body
text (~42px combined height), centering it in that block.
@tellaho
fix: collapse MessageActionBar height when hidden on desktop
5dc4dc3 
Add sm:h-0, sm:border-0, sm:shadow-none, sm:p-0 to the collapsed state
so the action bar contributes zero height to the metadata flex row.
Restore h-auto, border, and shadow-sm on group-hover, group-focus-within,
and the pinned-open state (reply/reaction picker active).

This prevents the metadata row from being taller than the username +
timestamp content, which in turn fixes avatar vertical alignment.
@tellaho
fix: move BotIdenticon inline as badge, absolute-position action bar
6090451 
Move BotIdenticon from the avatar column to an inline 14px badge next
to the username in the metadata row. Remove it from the avatar container.

Wrap MessageActionBar in absolute positioning so hover reveal doesn't
shift layout. Strip h-0/h-auto hacks from the bar's own classes since
it no longer participates in flow.
@tellaho
style: increase spacing between messages, username-to-body, and messa…
4436540 
…ge padding

- MessageTimeline: gap-2 → gap-3 (between messages)
- MessageRow: space-y-0.5 → space-y-1 (username to body)
- MessageRow: py-1 → py-1.5 (message row padding)
@tellaho
fix: suppress duplicate bot persona name, add BotIdenticon to profile…
3e3a5e9 
… popover

Suppress personaDisplayName when it matches author or when the message
is from a bot — the inline BotIdenticon badge already identifies them.

Add optional role and botIdenticonValue props to UserProfilePopover.
When role is 'bot', render a 20px BotIdenticon next to the display name
in the popover header. Both avatar and username popovers now pass these
props through from MessageRow.
@tellaho
fix: show personaDisplayName for bots when it differs from author
d8f1a4e 
Per feedback: only suppress the persona label when it matches
message.author. If it's unique (e.g. a named persona), show it
regardless of whether the sender is a bot.
@tellaho tellaho changed the title improve chat message layout to slack/discord-style left-aligned design chore: improve chat message layout to left-aligned design Apr 13, 2026
@tellaho tellaho marked this pull request as ready for review April 13, 2026 20:08
@tellaho tellaho requested a review from wesbillman as a code owner April 13, 2026 20:08
wesbillman
wesbillman approved these changes Apr 13, 2026
View reviewed changes
Copy link
Copy Markdown
Collaborator

@wesbillman wesbillman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it!

@wesbillman wesbillman merged commit 5fec48c into main Apr 13, 2026
10 checks passed
@wesbillman wesbillman deleted the tho/chat-style-improvements branch April 13, 2026 21:42
tellaho added a commit that referenced this pull request Apr 14, 2026
@tellaho
Merge remote-tracking branch 'origin/main' into tho/richtext-editor
361e756 
* origin/main:
  Replace inline channel creation with dialog (#312)
  chore: improve chat message layout to left-aligned design (#309)
  Add edit dialog for managed agents with relay profile sync (#277)
  fix(ci): build relay with optimized profile to fix flaky e2e tests (#307)
  Update actions/checkout action to v6 (#305)
  Update dependency @tanstack/react-query to v5.98.0 (#304)
  Update dependency @playwright/test to v1.59.1 (#303)
  Update react monorepo to v19.2.5 (#302)
  feat(mobile): scaffold Flutter app with Riverpod & Catppuccin theme (#306)
  Update dependency @tanstack/react-router to v1.168.13 (#301)
  feat: Markdown-based persona packs (crate + ACP + desktop) (#297)
  feat(desktop): improve Agents page UX (#298)
  feat(desktop): add Pulse social notes surface (#296)
  Fix flaky desktop smoke tests (#294)
  Add agent lifecycle controls to channel members sidebar (#291)

# Conflicts:
#	desktop/pnpm-lock.yaml
tlongwell-block added a commit that referenced this pull request Apr 14, 2026
@tlongwell-block
Merge remote-tracking branch 'origin/main' into feat/huddles-plan
20dbfc4 
* origin/main:
  feat(desktop): deterministic nested thread panels (#308)
  fix: show private channels in channel browser when user is a member (#311)
  Replace inline channel creation with dialog (#312)
  chore: improve chat message layout to left-aligned design (#309)
  Add edit dialog for managed agents with relay profile sync (#277)
  fix(ci): build relay with optimized profile to fix flaky e2e tests (#307)
  Update actions/checkout action to v6 (#305)
  Update dependency @tanstack/react-query to v5.98.0 (#304)
  Update dependency @playwright/test to v1.59.1 (#303)
  Update react monorepo to v19.2.5 (#302)
  feat(mobile): scaffold Flutter app with Riverpod & Catppuccin theme (#306)
  Update dependency @tanstack/react-router to v1.168.13 (#301)
  feat: Markdown-based persona packs (crate + ACP + desktop) (#297)
  feat(desktop): improve Agents page UX (#298)

# Conflicts:
#	desktop/scripts/check-file-sizes.mjs
#	desktop/src-tauri/Cargo.lock
#	desktop/src-tauri/Cargo.toml
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@wesbillman wesbillman wesbillman approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@tellaho @wesbillman