Room list: make room list item scales with large font size (#32523)

* fix(sc): make room list item scale with large font

* fix: align room avatar view when using large font

* test(sc): add story for large font

* test(sc): update snapshots

* test(sc): add story with zoom
This commit is contained in:
Florian Duros
2026-02-18 18:14:43 +00:00
committed by GitHub
parent 6c0d131652
commit e8d97a9b5a
11 changed files with 151 additions and 116 deletions
@@ -27,7 +27,8 @@ exports[`<RoomAvatarView /> should not render a decoration 1`] = `
exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
<DocumentFragment>
<div
class="mx_RoomAvatarView"
class="_flex_4dswl_9 mx_RoomAvatarView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
aria-label="Avatar"
@@ -70,7 +71,8 @@ exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
<DocumentFragment>
<div
class="mx_RoomAvatarView"
class="_flex_4dswl_9 mx_RoomAvatarView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
aria-label="Avatar"
@@ -113,7 +115,8 @@ exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
<DocumentFragment>
<div
class="mx_RoomAvatarView"
class="_flex_4dswl_9 mx_RoomAvatarView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
aria-label="Avatar"
@@ -156,7 +159,8 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
<DocumentFragment>
<div
class="mx_RoomAvatarView"
class="_flex_4dswl_9 mx_RoomAvatarView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
aria-label="Avatar"
@@ -212,7 +216,8 @@ exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
<DocumentFragment>
<div
class="mx_RoomAvatarView"
class="_flex_4dswl_9 mx_RoomAvatarView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
aria-label="Avatar"
@@ -270,7 +275,8 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
<DocumentFragment>
<div
class="mx_RoomAvatarView"
class="_flex_4dswl_9 mx_RoomAvatarView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
aria-label="Avatar"
@@ -328,7 +334,8 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
<DocumentFragment>
<div
class="mx_RoomAvatarView"
class="_flex_4dswl_9 mx_RoomAvatarView"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
>
<span
aria-label="Avatar"