Skip to content

Fix full-width message layouts #591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thomaspblock merged 5 commits into from
May 17, 2026
Merged

Fix full-width message layouts #591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
35f8d58
fix(ui): expand content width and align message metadata
thomaspblock May 15, 2026
ff3ee67
fix(ui): align home timestamps and loading skeletons
thomaspblock May 15, 2026
cc368c6
fix(desktop): keep profile button first in message rows
thomaspblock May 15, 2026
c7079ef
fix(desktop): preserve compact thread reply layout
thomaspblock May 15, 2026
6b41c02
chore(desktop): use thread-reply radius class
thomaspblock May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion desktop/src/features/channels/ui/ChannelPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ export const ChannelPane = React.memo(function ChannelPane({
showTopBorder={false}
/>
<div className="h-7 bg-background px-4 pb-1 pt-0 sm:px-6 -mt-1">
<div className="mx-auto flex h-full w-full max-w-4xl items-center gap-2">
<div className="flex h-full w-full items-center gap-2">
{hasComposerBotActivity ? (
<div className="shrink-0">
<BotActivityComposerAction
Expand Down
78 changes: 38 additions & 40 deletions desktop/src/features/home/ui/InboxDetailPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ export function InboxDetailPane({
<div className="px-6 py-2">
<article
className={cn(
"group/message flex items-start gap-2.5 px-2 py-1 transition-colors duration-1000",
"group/message relative flex items-start gap-2.5 px-2 py-1 transition-colors duration-1000",
message.isSelected
? cn(
isFocusHighlightVisible
Expand All @@ -292,60 +292,58 @@ export function InboxDetailPane({
: "home-inbox-context-message"
}
>
{canReply || onToggleReaction ? (
<div className="absolute right-2 top-1 z-10">
<MessageActionBar
activeReplyTargetId={replyTargetId}
message={toActionBarMessage(message)}
onReactionSelect={
onToggleReaction
? (emoji) => {
const actionBarMessage =
toActionBarMessage(message);
const remove =
actionBarMessage.reactions?.some(
(reaction) =>
reaction.emoji === emoji &&
reaction.reactedByCurrentUser,
) ?? false;
return onToggleReaction(
actionBarMessage,
emoji,
remove,
);
}
: undefined
}
onReply={
canReply
? () => handleSelectReplyTarget(message)
: undefined
}
reactions={message.reactions ?? []}
/>
</div>
) : null}
<UserAvatar
avatarUrl={message.avatarUrl}
className="h-8 w-8 shrink-0 rounded-xl"
displayName={message.authorLabel}
size="md"
/>
<div className="-mt-1 min-w-0 flex-1">
<div className="flex min-w-0 flex-wrap items-start gap-x-2 gap-y-0">
<div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0">
<p className="truncate text-sm font-semibold leading-none tracking-tight text-foreground">
{message.authorLabel}
</p>
<p className="shrink-0 text-xs font-normal leading-none tabular-nums text-muted-foreground/55">
{message.fullTimestampLabel}
</p>
{message.isSelected ? (
<span className="text-[10px] font-semibold uppercase leading-none tracking-[0.14em] text-muted-foreground/70">
Inbox item
</span>
) : null}
<p className="ml-auto text-xs text-muted-foreground">
{message.fullTimestampLabel}
</p>
{canReply || onToggleReaction ? (
<div className="relative ml-1">
<div className="absolute right-0 top-1/2 -translate-y-1/2">
<MessageActionBar
activeReplyTargetId={replyTargetId}
message={toActionBarMessage(message)}
onReactionSelect={
onToggleReaction
? (emoji) => {
const actionBarMessage =
toActionBarMessage(message);
const remove =
actionBarMessage.reactions?.some(
(reaction) =>
reaction.emoji === emoji &&
reaction.reactedByCurrentUser,
) ?? false;
return onToggleReaction(
actionBarMessage,
emoji,
remove,
);
}
: undefined
}
onReply={
canReply
? () => handleSelectReplyTarget(message)
: undefined
}
reactions={message.reactions ?? []}
/>
</div>
</div>
) : null}
</div>
<div className="mt-1">
<Markdown
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/messages/ui/DayDivider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export function DayDivider({ label }: { label: string }) {
return (
<section
aria-label={label}
className="sticky top-11 z-20 flex justify-center py-1"
className="sticky top-11 z-[5] flex justify-center py-1"
data-testid="message-timeline-day-divider"
data-day-label={label}
>
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/messages/ui/MessageComposer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,7 @@ export function MessageComposer({
aria-hidden="true"
className="absolute inset-x-0 bottom-0 h-5 bg-background"
/>
<div className="relative mx-auto flex w-full max-w-4xl flex-col gap-3">
<div className="relative flex w-full flex-col gap-3">
<form
className="relative isolate rounded-2xl border border-border/50 bg-background/70 px-3 pb-2 pt-3 shadow-[0_4px_24px_rgba(0,0,0,0.08)] backdrop-blur-xl supports-[backdrop-filter]:bg-background/55 dark:shadow-[0_4px_24px_rgba(0,0,0,0.35)] sm:px-4"
data-testid="message-composer"
Expand Down
75 changes: 39 additions & 36 deletions desktop/src/features/messages/ui/MessageRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,26 +178,28 @@ export const MessageRow = React.memo(
</h3>
);

const metadataNode = (
<div className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
<div className="relative">
<div className="absolute right-0 top-1/2 -translate-y-1/2">
<MessageActionBar
activeReplyTargetId={activeReplyTargetId}
message={message}
onDelete={onDelete}
onEdit={onEdit}
onMarkUnread={onMarkUnread}
onReactionSelect={
canToggleReactions ? handleReactionSelect : undefined
}
onReply={onReply}
reactionErrorMessage={reactionErrorMessage}
reactionPending={reactionPending}
reactions={reactions}
/>
</div>
</div>
const actionBarNode = (
<div className="absolute right-2 top-1 z-10">
<MessageActionBar
activeReplyTargetId={activeReplyTargetId}
message={message}
onDelete={onDelete}
onEdit={onEdit}
onMarkUnread={onMarkUnread}
onReactionSelect={
canToggleReactions ? handleReactionSelect : undefined
}
onReply={onReply}
reactionErrorMessage={reactionErrorMessage}
reactionPending={reactionPending}
reactions={reactions}
/>
</div>
);

const inlineMetadataNode = (
<div className="flex shrink-0 items-baseline gap-2 text-xs">
<MessageTimestamp createdAt={message.createdAt} time={message.time} />
{message.pending ? (
<p className="font-medium uppercase tracking-[0.14em] text-primary/80">
Sending
Expand All @@ -211,7 +213,6 @@ export const MessageRow = React.memo(
<TooltipContent>This message has been edited</TooltipContent>
</Tooltip>
) : null}
<MessageTimestamp createdAt={message.createdAt} time={message.time} />
</div>
);

Expand Down Expand Up @@ -281,7 +282,7 @@ export const MessageRow = React.memo(

<article
className={cn(
"group/message rounded-2xl px-2 py-1 transition-colors",
"group/message relative rounded-2xl px-2 py-1 transition-colors",
isThreadReplyLayout ? "space-y-1" : "flex items-start gap-2.5",
highlighted ? "bg-primary/10 ring-1 ring-primary/30" : "",
)}
Expand All @@ -290,15 +291,18 @@ export const MessageRow = React.memo(
>
{isThreadReplyLayout ? (
<>
<div className="flex min-w-0 items-start gap-1.5">
<div className="flex min-w-0 items-baseline gap-1.5">
{message.pubkey ? (
<UserProfilePopover
pubkey={message.pubkey}
role={message.role}
botIdenticonValue={message.author}
>
<button
className="flex shrink-0 items-start gap-1.5 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
className={cn(
"flex shrink-0 items-start gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
avatarButtonRadiusClass,
)}
type="button"
>
{avatarNode}
Expand All @@ -313,16 +317,14 @@ export const MessageRow = React.memo(
{authorNode}
</>
)}
<div className="min-w-0 flex-1">
<div className="flex min-w-0 flex-wrap items-start gap-x-2 gap-y-0.5">
{message.personaDisplayName &&
message.personaDisplayName !== message.author ? (
<span className="text-xs text-muted-foreground">
{message.personaDisplayName}
</span>
) : null}
{metadataNode}
</div>
<div className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2 gap-y-0.5">
{inlineMetadataNode}
{message.personaDisplayName &&
message.personaDisplayName !== message.author ? (
<span className="text-xs text-muted-foreground">
{message.personaDisplayName}
</span>
) : null}
</div>
</div>
<div className="min-w-0 space-y-0.5">{messageBodyNode}</div>
Expand All @@ -349,7 +351,7 @@ export const MessageRow = React.memo(
<div className="flex shrink-0 items-start">{avatarNode}</div>
)}
<div className="-mt-1 min-w-0 flex-1 space-y-0">
<div className="flex min-w-0 flex-wrap items-start gap-x-2 gap-y-0">
<div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0">
{message.pubkey ? (
<UserProfilePopover
pubkey={message.pubkey}
Expand All @@ -366,18 +368,19 @@ export const MessageRow = React.memo(
) : (
authorNode
)}
{inlineMetadataNode}
{message.personaDisplayName &&
message.personaDisplayName !== message.author ? (
<span className="text-xs text-muted-foreground">
{message.personaDisplayName}
</span>
) : null}
{metadataNode}
</div>
<div className="-mt-0.5">{messageBodyNode}</div>
</div>
</>
)}
{actionBarNode}
</article>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion desktop/src/features/messages/ui/MessageTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export const MessageTimeline = React.memo(function MessageTimeline({
ref={scrollContainerRef}
>
<div
className="mx-auto flex w-full max-w-4xl flex-col gap-2 pb-10 pt-16"
className="flex w-full flex-col gap-2 pb-10 pt-16"
ref={contentRef}
>
<div ref={topSentinelRef} aria-hidden className="h-px" />
Expand Down
4 changes: 3 additions & 1 deletion desktop/src/features/messages/ui/MessageTimestamp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ export function MessageTimestamp({
return (
<Tooltip>
<TooltipTrigger asChild>
<p className="cursor-default whitespace-nowrap">{time}</p>
<p className="shrink-0 cursor-default whitespace-nowrap text-xs font-normal leading-none tabular-nums text-muted-foreground/55">
{time}
</p>
</TooltipTrigger>
<TooltipContent side="top">
{formatFullDateTime(createdAt)}
Expand Down
Loading
Loading