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 <1389908+richvdh@users.noreply.github.com>

* Comment the media query

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

---------

Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>

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>