Room list: update the visuals in order to have better contrast by florianduros · Pull Request #32421 · element-hq/element-web

florianduros · 2026-02-09T14:44:40Z

Closes #31682
Figma: new design of room list item in room list

89 changed files but:

12 are actual source code and 1 test file
4 are jest snapshots
1 to fix sliding sync test (notification popup over the people filer)
Rest are screenshots

Before	After

gaelledel

@florianduros Please see my comments for change in Figma here https://www.figma.com/design/vlmt46QDdE4dgXDiyBJXqp/ER-33-Left-Panel?node-id=3300-52489&t=lyGY1PIPMfNVPchh-4

florianduros · 2026-02-13T14:23:41Z

playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png

1 px diff at the bottom right (room list in background)

t3chguy

Breaks with large font size in Settings > Appearance

...is__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-list-auto.png

t3chguy · 2026-02-16T12:40:08Z

packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx


-/** Height of a single room list item in pixels */
-const ROOM_LIST_ITEM_HEIGHT = 48;
+/** Height of a single room list item in pixels (44px item + 8px gap) */


this math doesn't math, a gap wouldn't be halved given it is on both sides, improved comment would be good

Fixed the comment in 1793de8

florianduros · 2026-02-16T13:27:11Z

Breaks with large font size in Settings > Appearance

Which is an issue already present on the current room list:

I opened to track it down #32520 and wip #32523 on top of this PR

This PR contains the following updates: | Package | Update | Change | |---|---|---| | [vectorim/element-web](https://github.com/element-hq/element-web) | patch | `v1.12.10` → `v1.12.11` | --- ### Release Notes <details> <summary>element-hq/element-web (vectorim/element-web)</summary> ### [`v1.12.11`](https://github.com/element-hq/element-web/releases/tag/v1.12.11) [Compare Source](element-hq/element-web@v1.12.10...v1.12.11) #### 🦖 Deprecations - Remove UIFeature.BulkUnverifiedSessionsReminder setting ([#31943](element-hq/element-web#31943)). Contributed by [@andybalaam](https://github.com/andybalaam). - Remove unused function to auto-rageshake when key backup is not set up ([#31942](element-hq/element-web#31942)). Contributed by [@andybalaam](https://github.com/andybalaam). #### ✨ Features - Room list: update the visuals in order to have better contrast ([#32421](element-hq/element-web#32421)). Contributed by [@florianduros](https://github.com/florianduros). - Set history visibility to "invited" for DMs and new non-public rooms when creating a room ([#31974](element-hq/element-web#31974)). Contributed by [@langleyd](https://github.com/langleyd). - Remove server acl status/summaries from timeline ([#32461](element-hq/element-web#32461)). Contributed by [@langleyd](https://github.com/langleyd). - Update `globalBlacklistUnverifiedDevices` on setting change ([#31983](element-hq/element-web#31983)). Contributed by [@kaylendog](https://github.com/kaylendog). - Add badge for history visibiltity to room info panel ([#31927](element-hq/element-web#31927)). Contributed by [@richvdh](https://github.com/richvdh). #### 🐛 Bug Fixes - Default useOnlyCurrentProfiles to true ([#32524](element-hq/element-web#32524)). Contributed by [@dbkr](https://github.com/dbkr). - Keep custom theme active after reload ([#32506](element-hq/element-web#32506)). Contributed by [@florianduros](https://github.com/florianduros). - Update font format from 'ttf' to 'truetype' ([#32493](element-hq/element-web#32493)). Contributed by [@all-yall](https://github.com/all-yall). - Fix videos on Firefox ([#32497](element-hq/element-web#32497)). Contributed by [@p1gp1g](https://github.com/p1gp1g). - Use a dedicated FAQ/help entry for key storage. ([#32480](element-hq/element-web#32480)). Contributed by [@mxandreas](https://github.com/mxandreas). - Avoid showing two chat timelines side by side after a call ([#32484](element-hq/element-web#32484)). Contributed by [@robintown](https://github.com/robintown). - Update screenshot for reactive display name disambiguation ([#32431](element-hq/element-web#32431)). Contributed by [@aditya-cherukuru](https://github.com/aditya-cherukuru). - Fix Status Bar being unreadable when the user overrides the default OS light/dark theme. ([#32442](element-hq/element-web#32442)). Contributed by [@Half-Shot](https://github.com/Half-Shot). - fix: Remove state\_key: null from Seshat search results ([#31524](element-hq/element-web#31524)). Contributed by [@shinaoka](https://github.com/shinaoka). - Fix user pill deserialisation ([#31947](element-hq/element-web#31947)). Contributed by [@t3chguy](https://github.com/t3chguy). </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/4209 Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net> Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>

…213) This PR contains the following updates: | Package | Update | Change | |---|---|---| | [element-hq/element-web](https://github.com/element-hq/element-web) | patch | `v1.12.10` → `v1.12.11` | --- ### Release Notes <details> <summary>element-hq/element-web (element-hq/element-web)</summary> ### [`v1.12.11`](https://github.com/element-hq/element-web/releases/tag/v1.12.11) [Compare Source](element-hq/element-web@v1.12.10...v1.12.11) #### 🦖 Deprecations - Remove UIFeature.BulkUnverifiedSessionsReminder setting ([#31943](element-hq/element-web#31943)). Contributed by [@andybalaam](https://github.com/andybalaam). - Remove unused function to auto-rageshake when key backup is not set up ([#31942](element-hq/element-web#31942)). Contributed by [@andybalaam](https://github.com/andybalaam). #### ✨ Features - Room list: update the visuals in order to have better contrast ([#32421](element-hq/element-web#32421)). Contributed by [@florianduros](https://github.com/florianduros). - Set history visibility to "invited" for DMs and new non-public rooms when creating a room ([#31974](element-hq/element-web#31974)). Contributed by [@langleyd](https://github.com/langleyd). - Remove server acl status/summaries from timeline ([#32461](element-hq/element-web#32461)). Contributed by [@langleyd](https://github.com/langleyd). - Update `globalBlacklistUnverifiedDevices` on setting change ([#31983](element-hq/element-web#31983)). Contributed by [@kaylendog](https://github.com/kaylendog). - Add badge for history visibiltity to room info panel ([#31927](element-hq/element-web#31927)). Contributed by [@richvdh](https://github.com/richvdh). #### 🐛 Bug Fixes - Default useOnlyCurrentProfiles to true ([#32524](element-hq/element-web#32524)). Contributed by [@dbkr](https://github.com/dbkr). - Keep custom theme active after reload ([#32506](element-hq/element-web#32506)). Contributed by [@florianduros](https://github.com/florianduros). - Update font format from 'ttf' to 'truetype' ([#32493](element-hq/element-web#32493)). Contributed by [@all-yall](https://github.com/all-yall). - Fix videos on Firefox ([#32497](element-hq/element-web#32497)). Contributed by [@p1gp1g](https://github.com/p1gp1g). - Use a dedicated FAQ/help entry for key storage. ([#32480](element-hq/element-web#32480)). Contributed by [@mxandreas](https://github.com/mxandreas). - Avoid showing two chat timelines side by side after a call ([#32484](element-hq/element-web#32484)). Contributed by [@robintown](https://github.com/robintown). - Update screenshot for reactive display name disambiguation ([#32431](element-hq/element-web#32431)). Contributed by [@aditya-cherukuru](https://github.com/aditya-cherukuru). - Fix Status Bar being unreadable when the user overrides the default OS light/dark theme. ([#32442](element-hq/element-web#32442)). Contributed by [@Half-Shot](https://github.com/Half-Shot). - fix: Remove state\_key: null from Seshat search results ([#31524](element-hq/element-web#31524)). Contributed by [@shinaoka](https://github.com/shinaoka). - Fix user pill deserialisation ([#31947](element-hq/element-web#31947)). Contributed by [@t3chguy](https://github.com/t3chguy). </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/4213 Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net> Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>

Regression due to #32421

* fix(room list): make ellipsis works on room list title Regression due to #32421 * test(room list): add non regression test

florianduros added the T-Enhancement label Feb 9, 2026

github-actions bot deployed to SharedComponentDiffs February 9, 2026 14:46 View deployment

github-actions bot deployed to Netlify February 9, 2026 14:48 View deployment

daniellekirkwood requested a review from gaelledel February 9, 2026 15:10

github-actions bot deployed to EndToEndTests February 9, 2026 15:14 View deployment

florianduros force-pushed the florianduros/selection-hover-room-list branch from 7b78f54 to b3fc9e3 Compare February 9, 2026 16:39

github-actions bot requested a deployment to Netlify February 9, 2026 16:46 In progress

github-actions bot deployed to SharedComponentDiffs February 9, 2026 17:08 View deployment

github-actions bot deployed to Netlify February 9, 2026 17:10 View deployment

florianduros force-pushed the florianduros/selection-hover-room-list branch from 58ecd79 to e219c05 Compare February 9, 2026 17:20

github-actions bot deployed to SharedComponentDiffs February 9, 2026 17:22 View deployment

github-actions bot deployed to Netlify February 9, 2026 17:24 View deployment

github-actions bot deployed to EndToEndTests February 9, 2026 17:53 View deployment

florianduros force-pushed the florianduros/selection-hover-room-list branch from 1b02912 to 258002d Compare February 10, 2026 09:57

github-actions bot deployed to Netlify February 10, 2026 10:00 View deployment

github-actions bot deployed to EndToEndTests February 10, 2026 10:15 View deployment

florianduros force-pushed the florianduros/selection-hover-room-list branch from 258002d to f8949e9 Compare February 10, 2026 10:15

github-actions bot deployed to Netlify February 10, 2026 10:19 View deployment

github-actions bot deployed to EndToEndTests February 10, 2026 10:33 View deployment

github-actions bot deployed to EndToEndTests February 10, 2026 10:51 View deployment

florianduros force-pushed the florianduros/selection-hover-room-list branch from f8949e9 to a38d88a Compare February 10, 2026 10:58

github-actions bot deployed to Netlify February 10, 2026 11:01 View deployment

github-actions bot deployed to EndToEndTests February 10, 2026 11:15 View deployment

gaelledel suggested changes Feb 10, 2026

View reviewed changes

florianduros force-pushed the florianduros/selection-hover-room-list branch from a38d88a to 03c4f22 Compare February 12, 2026 13:19

github-actions bot deployed to SharedComponentDiffs February 12, 2026 13:21 View deployment

github-actions bot deployed to Netlify February 12, 2026 13:21 View deployment

github-actions bot deployed to EndToEndTests February 12, 2026 13:41 View deployment

florianduros changed the title ~~Room list: update the visuals of select and hover to be better contrast~~ Room list: update the visuals in order to have better contrast Feb 12, 2026

florianduros requested a review from gaelledel February 12, 2026 14:45

florianduros commented Feb 13, 2026

View reviewed changes

Merge branch 'develop' into florianduros/selection-hover-room-list

28ea96f

github-actions bot deployed to Netlify February 16, 2026 10:13 View deployment

github-actions bot deployed to EndToEndTests February 16, 2026 10:24 View deployment

t3chguy requested changes Feb 16, 2026

View reviewed changes

chore: fix VirtuaalizedRoomListView comment

1793de8

github-actions bot deployed to Netlify February 16, 2026 13:20 View deployment

florianduros requested a review from t3chguy February 16, 2026 13:31

github-actions bot deployed to EndToEndTests February 16, 2026 13:31 View deployment

florianduros added 2 commits February 16, 2026 14:37

Merge branch 'develop' into florianduros/selection-hover-room-list

0b0a0d1

test: update playwright screenshot

3cac07c

github-actions bot deployed to Netlify February 16, 2026 13:41 View deployment

github-actions bot deployed to EndToEndTests February 16, 2026 13:52 View deployment

fix(sc): add ellipsis on room name

3e502c4

github-actions bot deployed to Netlify February 16, 2026 13:57 View deployment

github-actions bot deployed to EndToEndTests February 16, 2026 14:08 View deployment

t3chguy approved these changes Feb 17, 2026

View reviewed changes

florianduros added this pull request to the merge queue Feb 17, 2026

Merged via the queue into develop with commit 55cc7ba Feb 17, 2026
37 checks passed

florianduros deleted the florianduros/selection-hover-room-list branch February 17, 2026 10:14

twassman mentioned this pull request Feb 17, 2026

Room list entries have poor colour contrast #32554

Open

florianduros mentioned this pull request Feb 18, 2026

New Room List: Highlighting, focus and selection very ambiguous #14498

Closed

florianduros mentioned this pull request Feb 26, 2026

Long space name can push buttons into the margin #32642

Closed

florianduros added a commit that referenced this pull request Feb 26, 2026

fix(room list): make ellipsis works on room list title

e0c453b

Regression due to #32421

florianduros mentioned this pull request Feb 26, 2026

Room list: avoid header overflowing when too long #32645

Merged

github-merge-queue bot pushed a commit that referenced this pull request Feb 26, 2026

Room list: avoid header overflowing when too long (#32645)

62c5702

* fix(room list): make ellipsis works on room list title Regression due to #32421 * test(room list): add non regression test

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Room list: update the visuals in order to have better contrast#32421

Room list: update the visuals in order to have better contrast#32421
florianduros merged 17 commits intodevelopfrom
florianduros/selection-hover-room-list

florianduros commented Feb 9, 2026 •

edited

Loading

Uh oh!

gaelledel left a comment

Uh oh!

florianduros Feb 13, 2026

Uh oh!

t3chguy left a comment

Uh oh!

Uh oh!

t3chguy Feb 16, 2026

Uh oh!

florianduros Feb 16, 2026

Uh oh!

florianduros commented Feb 16, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

florianduros commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gaelledel left a comment

Choose a reason for hiding this comment

Uh oh!

florianduros Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

t3chguy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

t3chguy Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

florianduros Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

florianduros commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

florianduros commented Feb 9, 2026 •

edited

Loading

florianduros commented Feb 16, 2026 •

edited

Loading