diff --git a/playwright/e2e/settings/general-user-settings-tab.spec.ts b/playwright/e2e/settings/general-user-settings-tab.spec.ts index d6d138db5b..625f1d6bd5 100644 --- a/playwright/e2e/settings/general-user-settings-tab.spec.ts +++ b/playwright/e2e/settings/general-user-settings-tab.spec.ts @@ -125,6 +125,11 @@ test.describe("General user settings tab", () => { ); }); + test("should respond to small screen sizes", async ({ page, uut }) => { + await page.setViewportSize({ width: 700, height: 600 }); + await expect(uut).toMatchScreenshot("general-smallscreen.png"); + }); + test("should support adding and removing a profile picture", async ({ uut }) => { const profileSettings = uut.locator(".mx_ProfileSettings"); // Upload a picture diff --git a/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png new file mode 100644 index 0000000000..75febc97d7 Binary files /dev/null and b/playwright/snapshots/settings/general-user-settings-tab.spec.ts/general-smallscreen-linux.png differ diff --git a/res/css/structures/_TabbedView.pcss b/res/css/structures/_TabbedView.pcss index 756f6ab864..34a1766c19 100644 --- a/res/css/structures/_TabbedView.pcss +++ b/res/css/structures/_TabbedView.pcss @@ -129,6 +129,7 @@ limitations under the License. padding-inline: var(--cpd-space-3x) var(--cpd-space-4x); box-sizing: border-box; min-block-size: 40px; + min-inline-size: 40px; border-radius: 24px; font: var(--cpd-font-body-md-medium); position: relative; @@ -164,3 +165,25 @@ limitations under the License. overflow: auto; min-height: 0; /* firefox */ } + +/* Hide the labels on tabs, showing only the icons, on narrow viewports. */ +@media (max-width: 768px) { + .mx_TabbedView_tabsOnLeft.mx_TabbedView_responsive { + .mx_TabbedView_tabLabel_text { + display: none; + } + .mx_TabbedView_tabPanel { + margin-left: 72px; /* 40px sidebar + 32px padding */ + } + .mx_TabbedView_maskedIcon { + margin-right: auto; + margin-left: auto; + } + .mx_TabbedView_tabLabels { + width: auto; + } + .mx_TabbedView_tabLabel { + padding-inline: 0 0; + } + } +} diff --git a/src/components/structures/TabbedView.tsx b/src/components/structures/TabbedView.tsx index fa717126e5..c745d9cf5d 100644 --- a/src/components/structures/TabbedView.tsx +++ b/src/components/structures/TabbedView.tsx @@ -132,6 +132,13 @@ interface IProps { onChange: (tabId: T) => void; // The screen name to report to Posthog. screenName?: ScreenName; + /** + * If true, the layout of the tabbed view will be responsive to the viewport size (eg, just showing icons + * instead of names of tabs). + * Only applies if `tabLocation === TabLocation.LEFT`. + * Default: false. + */ + responsive?: boolean; } /** @@ -160,6 +167,7 @@ export default function TabbedView(props: IProps): JSX.Elem mx_TabbedView: true, mx_TabbedView_tabsOnLeft: tabLocation == TabLocation.LEFT, mx_TabbedView_tabsOnTop: tabLocation == TabLocation.TOP, + mx_TabbedView_responsive: props.responsive, }); const screenName = tab?.screenName ?? props.screenName; diff --git a/src/components/views/dialogs/UserSettingsDialog.tsx b/src/components/views/dialogs/UserSettingsDialog.tsx index f5d45bca95..bb97b36fc9 100644 --- a/src/components/views/dialogs/UserSettingsDialog.tsx +++ b/src/components/views/dialogs/UserSettingsDialog.tsx @@ -224,6 +224,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element { activeTabId={activeTabId} screenName="UserSettings" onChange={setActiveTabId} + responsive={true} />