Room list: center focus outline of room list item (#32637)

Browse Source

* fix: in room list item, replace bottom padding by top and bottom

Outline focus is not aligned when only using a padding bottom. Replace
by a padding-top and a padding-bottom.

The padding top is not added on the first item and the padding bottom
neither on the last item

* test: update snapshot

* test: update storybook screenshot

* test: update screenshot

* chore: use css var instead of duplicating the logic

* chore: add new stories for first and last item case

* test: add new screenshots following the new stories

...

This commit is contained in:

Florian Duros

2026-02-25 19:45:22 +00:00

committed by GitHub

parent 9e802ebca6

commit dd1db8c14b

40 changed files with 57 additions and 27 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-dm-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.8 KiB After Width:  |  Height:  |  Size: 2.8 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-activity-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.4 KiB After Width:  |  Height:  |  Size: 2.4 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.7 KiB After Width:  |  Height:  |  Size: 2.7 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-hover-silent-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.9 KiB After Width:  |  Height:  |  Size: 2.9 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-invited-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.6 KiB After Width:  |  Height:  |  Size: 2.5 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.7 KiB After Width:  |  Height:  |  Size: 2.7 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mark-as-unread-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.3 KiB After Width:  |  Height:  |  Size: 3.2 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-mention-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.3 KiB After Width:  |  Height:  |  Size: 3.3 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-message-preview-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 5.2 KiB After Width:  |  Height:  |  Size: 5.2 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-notification-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.5 KiB After Width:  |  Height:  |  Size: 3.5 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 75 KiB After Width:  |  Height:  |  Size: 75 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 70 KiB After Width:  |  Height:  |  Size: 70 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 90 KiB After Width:  |  Height:  |  Size: 90 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-public-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.8 KiB After Width:  |  Height:  |  Size: 2.7 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-silent-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.9 KiB After Width:  |  Height:  |  Size: 2.8 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-video-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.0 KiB After Width:  |  Height:  |  Size: 3.0 KiB

apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-scrolled-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 18 KiB After Width:  |  Height:  |  Size: 18 KiB

apps/web/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-no-avatar-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 2.8 KiB After Width:  |  Height:  |  Size: 2.7 KiB

apps/web/playwright/snapshots/timeline/media-preview-settings.spec.ts/invite-room-tree-with-avatar-linux.png

BIN

Binary file not shown.

Side by Side Swipe Overlay Before Width:  |  Height:  |  Size: 3.8 KiB After Width:  |  Height:  |  Size: 3.8 KiB