[juliajforesti]

Proposed changes (including videos or screenshots)

ARCH-2592
Stacked on #43160 (account screens).

The room side panels under views/room/contextualBar stop laying themselves out with raw Box, div and section elements. The raw layout count drops from 1113 to 1013, and the CI limit drops with it.

• New shared containers in client/components. Teams and omnichannel panels already repeat all of them, so they skip the layout/ stage. Only the room panels switch here:
  • ContextualbarList/ContextualbarListStatus: the loading indicator or error shown in place of a list, inset to line up with its rows (spaced adds the 12px block padding, as ContextualbarContent names it). Used by threads, discussions, members, banned users, pinned/starred/mentions and calls.
  • ContextualbarList/ContextualbarListFilter: the 144px select after a section's search input (threads, files, members).
  • ContextualbarList/ContextualbarListSummary: the "Showing x of y" line above the members list.
  • ContextualbarList/ContextualbarListArea: the clipped area a virtualized list fills (threads, discussions, members, banned users).
  • ModalCalloutContent: a callout that is a modal's whole content, set 16px below the header. Edit room's ABAC warning uses it; admin/rooms/EditRoom repeats it.
• Shared within the room: contextualBar/layout/ContextualbarInset (24px all round: files loading, search-provider error, thread skeleton), contextualBar/layout/MessageListSection (the message list section of pinned/starred/mentions and search), and room/layout/MessageListLoadMore (the load-more row; the room's MessageList repeats it).
• Local containers in layout/ folders for the thread view (surface, docked slot, chat section, composer option, list frame, row surface, divider item, unread badge slot), the call history (item, list area, empty/error state), the ABAC sections in room info and the ABAC panel, invite link, members group header, discussions row and viewport, files list area, message search form and results, auto-translate, user info and report-user modal, and the conference config modal.
• Spacing between siblings now comes from Stack gaps instead of margins, including ChannelToTeamSelection's Margins wrapper. Text uses Text; the UiKit contextual bar's form is a plain <form>; the report-user modal's form is a ModalForm; plain ul/li replace unstyled Box is='ul'/'li'.
• An empty <Box display='flex'></Box> in the call history row is removed.

No visual change expected. Each replacement keeps the same box model: same paddings, margins (as Stack gaps where siblings had them) and flex behavior, and the same Margins inheritance inside ContextualbarScrollableContent. Two equivalences reviewers may want to check:

• Notification preferences: the device name in each accordion title lost its trailing 16px inline margin (the leading one is now the row's gap). It sat at the end of a full-width row, so nothing moves unless the label overflows.
• ABAC attributes panel: the heading, description and attribute sections are now spaced by Stack gaps of 24px and 40px. The old margins added up to the same sizes, because the scrollable content is a flex column, so its margins don't collapse.

Visual check: before/after screenshots of the running app, identical for Room info, Edit room, Members (list, no match, a user's info), Threads (list, empty, an open thread), Discussions, Files (empty), Pinned, Starred, Mentions, Search, Notification preferences, Banned users and Calls. Not captured: states that need data or setup the local workspace lacks (files with uploads, ABAC, auto-translate, UiKit bars, the modals).

Issue(s)

Part of the screen layout migration (#43056).

Steps to test or reproduce

• node scripts/scan-raw-layout.mjs --max 1013
• In a channel, open each panel from the room toolbar: Room info and Edit, Members (list, a user's info, Add users, Invite link and Edit invite), Threads (list and an open thread, docked and expanded), Discussions, Files, Pinned, Starred, Mentions, Search messages (encrypted room too), Notification preferences, Auto-translate, Calls, Banned users, ABAC attributes (enterprise), and a UiKit contextual bar from an app.
• Modals: Report user, Move to team, Edit a private room that has ABAC attributes → switch it to public → Save, conference config, blocked call popup, Matrix add-users and banned-user unban.
• Storybook: views/room/contextualBar/**.

Further comments

The other layout migration pull requests each lower the same --max line in ci-code-check.yml and prune scripts/spacing-scale/baseline.json. Whichever merges second rebases and takes the lower count.

Three Virtuoso slot components stay as they are and still count: RoomMembersListWrapper and RoomFilesListWrapper (div role='list' with keyboard navigation) and RoomFileItemWrapper (div role='listitem'). Each is already a named component that only renders the list element Virtuoso asks for.

Margins reaches more than Box: it also adds a class to its direct children, so a Text or a plain element placed directly inside ContextualbarScrollableContent still gets the 16px block-end margin. This PR relies on that for the UiKit form and the ABAC heading, the same as before.

🤖 Generated with Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9ba1039

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is still a draft
• This PR is missing the 'stat: QA assured' label

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

❌ Patch coverage is 96.17391% with 22 lines in your changes missing coverage. Please review.
✅ Project coverage is 72.15%. Comparing base (3eda81a) to head (9ba1039).

Additional details and impacted files

@@                     Coverage Diff                     @@
##           refactor/layout-account   #43274      +/-   ##
===========================================================
+ Coverage                    72.13%   72.15%   +0.01%     
===========================================================
  Files                         5383     5417      +34     
  Lines                       231062   231250     +188     
  Branches                     43859    43918      +59     
===========================================================
+ Hits                        166688   166861     +173     
+ Misses                       59103    59086      -17     
- Partials                      5271     5303      +32     

Flag	Coverage Δ
e2e	61.20% <69.84%> (+0.09%)	⬆️
e2e-api	48.95% <ø> (-0.01%)	⬇️
unit	72.19% <98.52%> (+0.02%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.