Skip to content

Fix typing indicator composer positioning #512

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
wesbillman merged 11 commits into from
May 8, 2026
Merged

Fix typing indicator composer positioning #512

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
903b5ac
fix(desktop): add space above reply pill
thomaspblock May 8, 2026
174e2ea
fix(desktop): tighten composer spacing
thomaspblock May 8, 2026
5233607
fix(desktop): overlay message composer
thomaspblock May 8, 2026
2185fa9
fix(desktop): align thread jump-to-latest and bottom spacing
thomaspblock May 8, 2026
bab9040
fix(desktop): tighten message header gap and bump avatar size
thomaspblock May 8, 2026
2bd892b
fix(e2e): adapt smoke assertions to overlay composer
thomaspblock May 8, 2026
ac6af2a
fix(desktop): keep day divider behind composer
thomaspblock May 8, 2026
f7fa37a
fix(desktop): move typing indicator below composer
thomaspblock May 8, 2026
b5028f9
fix(desktop): reserve stable typing space below composer
thomaspblock May 8, 2026
9276cc7
Merge origin/main into typing-position
thomaspblock May 8, 2026
70d2859
fix(desktop): separate jump pill from composer
thomaspblock May 8, 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
19 changes: 11 additions & 8 deletions desktop/src/features/channels/ui/ChannelPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,14 +357,6 @@ export const ChannelPane = React.memo(function ChannelPane({
) : (
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10">
<div className="pointer-events-auto">
{hasTypingActivity ? (
<TypingIndicatorRow
channel={activeChannel}
currentPubkey={currentPubkey}
profiles={profiles}
typingPubkeys={typingPubkeys}
/>
) : null}
<MessageComposer
channelId={activeChannel?.id ?? null}
channelName={activeChannel?.name ?? "channel"}
Expand Down Expand Up @@ -395,6 +387,17 @@ export const ChannelPane = React.memo(function ChannelPane({
}
showTopBorder={false}
/>
<div className="h-6 bg-background">
{hasTypingActivity ? (
<TypingIndicatorRow
channel={activeChannel}
className="px-4 pb-1 pt-0 sm:px-6"
currentPubkey={currentPubkey}
profiles={profiles}
typingPubkeys={typingPubkeys}
/>
) : null}
</div>
</div>
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions desktop/src/features/messages/ui/MessageComposer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -544,7 +544,7 @@ export function MessageComposer({
return (
<footer
className={cn(
"relative shrink-0 bg-transparent px-4 pb-4 pt-0",
"relative shrink-0 bg-transparent px-4 pb-2 pt-0",
showTopBorder ? "border-t border-border/40 pt-3" : "",
)}
>
Expand All @@ -554,7 +554,7 @@ export function MessageComposer({
/>
<div className="relative mx-auto flex w-full max-w-4xl flex-col gap-3">
<form
className="relative isolate rounded-2xl border border-border/50 bg-background/70 px-3 py-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"
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"
onDragOver={media.handleDragOver}
onDrop={(e) => {
Expand Down
21 changes: 13 additions & 8 deletions desktop/src/features/messages/ui/MessageThreadPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export function MessageThreadPanel({
onScroll={syncScrollState}
ref={threadBodyRef}
>
<div className="pb-8" ref={contentRef}>
<div className="pb-10" ref={contentRef}>
<div className="px-3 pb-1 pt-0" data-testid="message-thread-head">
<div className="rounded-2xl">
<MessageRow
Expand Down Expand Up @@ -273,7 +273,7 @@ export function MessageThreadPanel({
</div>

{!isAtBottom ? (
<div className="pointer-events-none absolute inset-x-0 bottom-32 z-20 flex justify-center px-4">
<div className="pointer-events-none absolute inset-x-0 bottom-36 z-20 flex justify-center px-4">
<Button
className="pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-border/50 bg-background/85 px-2.5 text-[11px] font-medium text-muted-foreground shadow-sm backdrop-blur-sm hover:bg-muted/70 hover:text-foreground [&_svg]:size-3.5"
data-testid="thread-scroll-to-latest"
Expand All @@ -292,12 +292,6 @@ export function MessageThreadPanel({

<div className="pointer-events-none absolute inset-x-0 bottom-0 z-10">
<div className="pointer-events-auto">
<TypingIndicatorRow
channel={channel}
currentPubkey={currentPubkey}
profiles={profiles}
typingPubkeys={threadTypingPubkeys}
/>
<MessageComposer
channelId={channelId}
channelName={channelName}
Expand All @@ -315,6 +309,17 @@ export function MessageThreadPanel({
typingParentEventId={threadHead.id}
typingRootEventId={threadHead.rootId}
/>
<div className="h-6 bg-background">
{threadTypingPubkeys.length > 0 ? (
<TypingIndicatorRow
channel={channel}
className="px-4 pb-1 pt-0 sm:px-6"
currentPubkey={currentPubkey}
profiles={profiles}
typingPubkeys={threadTypingPubkeys}
/>
) : null}
</div>
</div>
</div>
</aside>
Expand Down
4 changes: 2 additions & 2 deletions desktop/src/features/messages/ui/MessageTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,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-8 pt-14"
className="mx-auto flex w-full max-w-4xl flex-col gap-2 pb-10 pt-14"
ref={contentRef}
>
<div ref={topSentinelRef} aria-hidden className="h-px" />
Expand Down Expand Up @@ -197,7 +197,7 @@ export const MessageTimeline = React.memo(function MessageTimeline({
</div>

{!isAtBottom ? (
<div className="pointer-events-none absolute inset-x-0 bottom-32 z-20 flex justify-center px-4">
<div className="pointer-events-none absolute inset-x-0 bottom-36 z-20 flex justify-center px-4">
<Button
className="pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-border/50 bg-background/85 px-2.5 text-[11px] font-medium text-muted-foreground shadow-sm backdrop-blur-sm hover:bg-muted/70 hover:text-foreground [&_svg]:size-3.5"
data-testid="message-scroll-to-latest"
Expand Down
5 changes: 4 additions & 1 deletion desktop/src/features/messages/ui/TypingIndicatorRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import {
} from "@/features/profile/lib/identity";
import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
import type { Channel } from "@/shared/api/types";
import { cn } from "@/shared/lib/cn";

type TypingIndicatorRowProps = {
channel: Channel | null;
className?: string;
currentPubkey?: string;
profiles?: UserProfileLookup;
typingPubkeys: string[];
Expand Down Expand Up @@ -48,6 +50,7 @@ function formatTypingLabel(names: string[]) {

export function TypingIndicatorRow({
channel,
className,
currentPubkey,
profiles,
typingPubkeys,
Expand All @@ -69,7 +72,7 @@ export function TypingIndicatorRow({
return (
<div
aria-live="polite"
className="shrink-0 bg-transparent px-4 py-2 sm:px-6"
className={cn("shrink-0 bg-transparent px-4 py-2 sm:px-6", className)}
{...(labels.length > 0
? { "data-testid": "message-typing-indicator" }
: {})}
Expand Down
Loading