Problem
On desktop, the composer skeleton is 8 px shorter than the composer that replaces it. When the composer loads, its top edge rises 8 px, and the feed above it loses 8 px of height.
On 14ab7f9c1. Paths are under apps/webapp/src/components/chatroom/components/.
| Part |
Skeleton (skeleton/ChatroomComposerSkeleton.tsx) |
Loaded composer |
| Input row |
gap-1.5 px-2.5 py-1.5 (:28) |
gap-1.5 px-3 py-2 (MessageComposer/components/layouts/ComposerBar.tsx:102) |
| Buttons |
28 px button placeholders, size-7 (:31, :40, :43) |
32 px buttons, size-8 (MessageComposer/components/Actions/ActionButtons/ComposerInsertMenu.tsx:121, MessageComposer/components/Actions/ActionButtons/EmojiButton.tsx:79, MessageComposer/components/Actions/ActionButtons/ComposerPrimaryAction.tsx:21) |
| Field |
h-7 (:36) |
min-h-8 (MessageComposer/components/Input/Input.tsx:9) |
| Row height |
40 px |
48 px |
The phone skeleton already matches the row height: min-h-11 gap-1 px-3 py-2 on the row, and size-11 on each button placeholder.
Steps to reproduce
- On desktop, open a pad.
- In DevTools, add a network throttling profile with 10,000 ms latency, and select it.
- Open a heading chat as a channel member.
- When the composer skeleton turns into the composer, see the composer's top edge move up.
Acceptance criteria
Agent Brief
Category: bug
Summary: Size the desktop composer skeleton row like the loaded composer row.
Current behavior:
The desktop skeleton row uses smaller padding and 28 px button placeholders, so it is 40 px tall. The loaded row is 48 px tall.
Desired behavior:
The desktop skeleton uses the loaded row's padding and gap, 32 px button placeholders, and a 32 px field placeholder. The composer's top edge does not move at the swap.
Key interfaces:
ChatroomComposerSkeleton({ variant }).
ComposerBar — the loaded composer bar. Its input row is the reference.
Out of scope
Notes
The evidence is a class comparison on 14ab7f9c1. The heights follow Tailwind's scale and were not measured in a browser.
Problem
On desktop, the composer skeleton is 8 px shorter than the composer that replaces it. When the composer loads, its top edge rises 8 px, and the feed above it loses 8 px of height.
On
14ab7f9c1. Paths are underapps/webapp/src/components/chatroom/components/.skeleton/ChatroomComposerSkeleton.tsx)gap-1.5 px-2.5 py-1.5(:28)gap-1.5 px-3 py-2(MessageComposer/components/layouts/ComposerBar.tsx:102)size-7(:31,:40,:43)size-8(MessageComposer/components/Actions/ActionButtons/ComposerInsertMenu.tsx:121,MessageComposer/components/Actions/ActionButtons/EmojiButton.tsx:79,MessageComposer/components/Actions/ActionButtons/ComposerPrimaryAction.tsx:21)h-7(:36)min-h-8(MessageComposer/components/Input/Input.tsx:9)The phone skeleton already matches the row height:
min-h-11 gap-1 px-3 py-2on the row, andsize-11on each button placeholder.Steps to reproduce
Acceptance criteria
getBoundingClientRect().topjust before and just after the swap.Agent Brief
Category: bug
Summary: Size the desktop composer skeleton row like the loaded composer row.
Current behavior:
The desktop skeleton row uses smaller padding and 28 px button placeholders, so it is 40 px tall. The loaded row is 48 px tall.
Desired behavior:
The desktop skeleton uses the loaded row's padding and gap, 32 px button placeholders, and a 32 px field placeholder. The composer's top edge does not move at the swap.
Key interfaces:
ChatroomComposerSkeleton({ variant }).ComposerBar— the loaded composer bar. Its input row is the reference.Out of scope
Notes
The evidence is a class comparison on
14ab7f9c1. The heights follow Tailwind's scale and were not measured in a browser.