Collapse UserSettings tabs to just icons on narrow screens (#12505)

* Collapse UserSettings tabs to just icons on narrow screens

* Add screenshot test

* Better comment formatting.

Co-authored-by: Richard van der Hoff <[email protected]>

* Comment the media query

Co-authored-by: Richard van der Hoff <[email protected]>

---------

Co-authored-by: Richard van der Hoff <[email protected]>

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

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;
+        }
+    }
+}

src/components/structures/TabbedView.tsx

@@ -132,6 +132,13 @@ interface IProps<T extends string> {
     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<T extends string>(props: IProps<T>): 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;

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}
                     />
                 </div>
             </BaseDialog>