From c4ececd03a2a2798193e73f875a5c70e42a687ea Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 30 Aug 2024 15:29:40 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20collapse=20tabs?=
 =?UTF-8?q?=20when=20modal=20is=20not=20wide?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inspired by Gmeet UX. Styling of the icon-only tabs should be
enhanced.

Heavily rely on JS, which is quite sad for this simple
responsive layout.
---
 .../components/SettingsDialogExtended.tsx     | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
index 262b8a43..546f4048 100644
--- a/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
+++ b/src/frontend/src/features/settings/components/SettingsDialogExtended.tsx
@@ -12,6 +12,8 @@ import {
 import { AccountTab } from './tabs/AccountTab'
 import { GeneralTab } from '@/features/settings/components/tabs/GeneralTab.tsx'
 import { AudioTab } from '@/features/settings/components/tabs/AudioTab.tsx'
+import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
+import { useRef } from 'react'
 
 const tabsStyle = css({
   maxHeight: '40.625rem', // fixme size copied from meet settings modal
@@ -28,7 +30,6 @@ const tabListContainerStyle = css({
   borderRight: '1px solid lightGray', // fixme poor color management
   paddingY: '1rem',
   paddingRight: '1.5rem',
-  flex: '0 0 16rem', // fixme size copied from meet settings modal
 })
 
 const tabPanelContainerStyle = css({
@@ -45,25 +46,39 @@ export type SettingsDialogExtended = Pick<
 export const SettingsDialogExtended = (props: SettingsDialogExtended) => {
   // display only icon on small screen
   const { t } = useTranslation('settings')
+
+  const dialogEl = useRef<HTMLDivElement>(null)
+  const { width } = useSize(dialogEl)
+  const isWideScreen = !width || width >= 800 // fixme - hardcoded 50rem in pixel
+
   return (
-    <Dialog {...props} role="dialog" type="flex">
+    <Dialog innerRef={dialogEl} {...props} role="dialog" type="flex">
       <Tabs orientation="vertical" className={tabsStyle}>
-        <div className={tabListContainerStyle}>
-          <Heading slot="title" level={1} className={text({ variant: 'h1' })}>
-            {t('dialog.heading')}
-          </Heading>
+        <div
+          className={tabListContainerStyle}
+          style={{
+            flex: isWideScreen ? '0 0 16rem' : undefined,
+            paddingTop: !isWideScreen ? '64px' : undefined,
+            paddingRight: !isWideScreen ? '1rem' : undefined,
+          }}
+        >
+          {isWideScreen && (
+            <Heading slot="title" level={1} className={text({ variant: 'h1' })}>
+              {t('dialog.heading')}
+            </Heading>
+          )}
           <TabList border={false} aria-label="Chat log orientation example">
             <Tab icon highlight id="1">
               <RiAccountCircleLine />
-              {t('tabs.account')}
+              {isWideScreen && t('tabs.account')}
             </Tab>
             <Tab icon highlight id="2">
               <RiSpeakerLine />
-              {t('tabs.audio')}
+              {isWideScreen && t('tabs.audio')}
             </Tab>
             <Tab icon highlight id="3">
               <RiSettings3Line />
-              {t('tabs.general')}
+              {isWideScreen && t('tabs.general')}
             </Tab>
           </TabList>
         </div>