Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
florianduros merged 5 commits into from
Feb 18, 2026
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b24cffc
fix(sc): make room list item scale with large font
florianduros Feb 16, 2026
6f9a507
fix: align room avatar view when using large font
florianduros Feb 16, 2026
aa74ca7
test(sc): add story for large font
florianduros Feb 16, 2026
78e0be2
test(sc): update snapshots
florianduros Feb 16, 2026
85c35b5
test(sc): add story with zoom
florianduros Feb 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added ...oom-list/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 1 addition & 2 deletions packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
/* Needed to position the selected marker */
position: relative;
cursor: pointer;
height: 44px;
min-height: 44px;
width: 100%;
/* Gap between items, accounted for in ROOM_LIST_ITEM_HEIGHT */
margin-bottom: var(--cpd-space-2x);
Expand Down Expand Up @@ -60,7 +60,6 @@

.container {
flex: 1;
height: 100%;
margin: 0 var(--cpd-space-3x);
padding: 0 var(--cpd-space-2x);
border-radius: 8px;
Expand Down
16 changes: 15 additions & 1 deletion packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/

import React, { type JSX } from "react";
import React, { type JSX, useEffect } from "react";
import { fn } from "storybook/test";

import type { Meta, StoryObj } from "@storybook/react-vite";
Expand Down Expand Up @@ -218,3 +218,17 @@ export const WithoutHoverMenu: Story = {
showMoreOptionsMenu: false,
},
};

export const WithLargeFont: Story = {
args: {
isSelected: true,
},
decorators: [
(Story) => {
useEffect(() => {
document.documentElement.style.setProperty("font-size", "36px");
}, []);
return <Story />;
},
],
};
Comment on lines +226 to +234
Copy link
Copy Markdown
Member

@t3chguy t3chguy Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it also handle browser scaling up to 200% (iirc that is the threshold for a11y). Should be able to force scaling via globals

Copy link
Copy Markdown
Member Author

@florianduros florianduros Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can add story for that use case too yeah

Copy link
Copy Markdown
Member Author

@florianduros florianduros Feb 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems the only way to simulate this behaviour is to play with the zoom or translate 85c35b5

2 changes: 1 addition & 1 deletion packages/shared-components/src/room-list/RoomListItemView/RoomListItemView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export const RoomListItemView = memo(function RoomListItemView({
mx_RoomListItemView_selected: isSelected,
})}
gap="var(--cpd-space-3x)"
align="center"
align="stretch"
type="button"
role="option"
aria-posinset={roomIndex + 1}
Expand Down
18 changes: 9 additions & 9 deletions ...ed-components/src/room-list/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
class="flex roomListItem mx_RoomListItemView bold"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -153,7 +153,7 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
class="flex roomListItem mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -288,7 +288,7 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
class="flex roomListItem mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -441,7 +441,7 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
class="flex roomListItem mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -570,7 +570,7 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
class="flex roomListItem mx_RoomListItemView selected mx_RoomListItemView_selected"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -705,7 +705,7 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
class="flex roomListItem mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -858,7 +858,7 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
class="flex roomListItem mx_RoomListItemView"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -993,7 +993,7 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
class="flex roomListItem mx_RoomListItemView bold"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
type="button"
>
Expand Down Expand Up @@ -1151,7 +1151,7 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
class="flex roomListItem mx_RoomListItemView bold"
data-state="closed"
role="option"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
tabindex="-1"
type="button"
>
Expand Down
Loading
Loading