Skip to content

Match the desktop composer skeleton to the loaded composer #275

Description

@HMarzban

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

  1. On desktop, open a pad.
  2. In DevTools, add a network throttling profile with 10,000 ms latency, and select it.
  3. Open a heading chat as a channel member.
  4. When the composer skeleton turns into the composer, see the composer's top edge move up.

Acceptance criteria

  • On desktop, test the idle state: an empty draft, no reply, edit, or comment bar, no attachments, and the format toolbar closed. In that state, the skeleton and the loaded composer have the same outer height, button positions, and field height.
  • The composer's top edge has the same getBoundingClientRect().top just before and just after the swap.
  • The phone skeleton does not change.

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.

Activity

  1. added a commit that references this issue on Sep 22, 2026
    1091f99
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    ChatRelated to chat featuresDesktopUIbugSomething isn't workinggood first issueGood for newcomers

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions