Feat/improve mobile display (#843)

* Ok 1

* Finished

* Fix PR

* Fix PR

* Fix desktop

* Fix

* Fix absolute listen click outside

* console.log

* Fix according to code review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/pages/companies/CompanyShow.tsx

@@ -18,6 +18,7 @@ import { CommentableType } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
 import { CompanyNameEditableField } from '../../modules/companies/editable-field/components/CompanyNameEditableField';
+import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageContainer';
 
 export function CompanyShow() {
   const companyId = useParams().companyId ?? '';
@@ -35,29 +36,31 @@ export function CompanyShow() {
       hasBackButton
       icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
     >
-      <ShowPageLeftContainer>
-        <ShowPageSummaryCard
-          id={company?.id}
-          logoOrAvatar={getLogoUrlFromDomainName(company?.domainName ?? '')}
-          title={company?.name ?? 'No name'}
-          date={company?.createdAt ?? ''}
-          renderTitleEditComponent={() => (
-            <CompanyNameEditableField company={company} />
-          )}
-        />
-        <PropertyBox extraPadding={true}>
-          <CompanyDomainNameEditableField company={company} />
-          <CompanyAccountOwnerEditableField company={company} />
-          <CompanyEmployeesEditableField company={company} />
-          <CompanyAddressEditableField company={company} />
-          <CompanyCreatedAtEditableField company={company} />
-        </PropertyBox>
-      </ShowPageLeftContainer>
-      <ShowPageRightContainer>
-        <Timeline
-          entity={{ id: company?.id ?? '', type: CommentableType.Company }}
-        />
-      </ShowPageRightContainer>
+      <ShowPageContainer>
+        <ShowPageLeftContainer>
+          <ShowPageSummaryCard
+            id={company?.id}
+            logoOrAvatar={getLogoUrlFromDomainName(company?.domainName ?? '')}
+            title={company?.name ?? 'No name'}
+            date={company?.createdAt ?? ''}
+            renderTitleEditComponent={() => (
+              <CompanyNameEditableField company={company} />
+            )}
+          />
+          <PropertyBox extraPadding={true}>
+            <CompanyDomainNameEditableField company={company} />
+            <CompanyAccountOwnerEditableField company={company} />
+            <CompanyEmployeesEditableField company={company} />
+            <CompanyAddressEditableField company={company} />
+            <CompanyCreatedAtEditableField company={company} />
+          </PropertyBox>
+        </ShowPageLeftContainer>
+        <ShowPageRightContainer>
+          <Timeline
+            entity={{ id: company?.id ?? '', type: CommentableType.Company }}
+          />
+        </ShowPageRightContainer>
+      </ShowPageContainer>
     </WithTopBarContainer>
   );
 }

front/src/pages/people/PersonShow.tsx

@@ -12,6 +12,7 @@ import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSu
 import { CommentableType } from '~/generated/graphql';
 
 import { PeopleFullNameEditableField } from '../../modules/people/editable-field/components/PeopleFullNameEditableField';
+import { ShowPageContainer } from '../../modules/ui/layout/components/ShowPageContainer';
 
 export function PersonShow() {
   const personId = useParams().personId ?? '';
@@ -27,7 +28,7 @@ export function PersonShow() {
       icon={<IconUser size={theme.icon.size.md} />}
       hasBackButton
     >
-      <>
+      <ShowPageContainer>
         <ShowPageLeftContainer>
           <ShowPageSummaryCard
             id={person?.id}
@@ -44,7 +45,7 @@ export function PersonShow() {
             entity={{ id: person?.id ?? '', type: CommentableType.Person }}
           />
         </ShowPageRightContainer>
-      </>
+      </ShowPageContainer>
     </WithTopBarContainer>
   );
 }

front/src/pages/settings/SettingsExperience.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
 import { ColorSchemePicker } from '@/ui/color-scheme/components/ColorSchemePicker';
-import { NoTopBarContainer } from '@/ui/layout/components/NoTopBarContainer';
+import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
 import { useColorScheme } from '@/ui/themes/hooks/useColorScheme';
 import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
 import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
@@ -27,7 +27,7 @@ export function SettingsExperience() {
   const { colorScheme, setColorScheme } = useColorScheme();
 
   return (
-    <NoTopBarContainer>
+    <SubMenuTopBarContainer>
       <div>
         <StyledContainer>
           <MainSectionTitle>Experience</MainSectionTitle>
@@ -37,6 +37,6 @@ export function SettingsExperience() {
           </StyledSectionContainer>
         </StyledContainer>
       </div>
-    </NoTopBarContainer>
+    </SubMenuTopBarContainer>
   );
 }

front/src/pages/settings/SettingsProfile.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { EmailField } from '@/settings/profile/components/EmailField';
 import { NameFields } from '@/settings/profile/components/NameFields';
 import { ProfilePictureUploader } from '@/settings/profile/components/ProfilePictureUploader';
-import { NoTopBarContainer } from '@/ui/layout/components/NoTopBarContainer';
+import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
 import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
 import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
 
@@ -26,7 +26,7 @@ const StyledSectionContainer = styled.div`
 
 export function SettingsProfile() {
   return (
-    <NoTopBarContainer>
+    <SubMenuTopBarContainer>
       <div>
         <StyledContainer>
           <MainSectionTitle>Profile</MainSectionTitle>
@@ -50,6 +50,6 @@ export function SettingsProfile() {
           </StyledSectionContainer>
         </StyledContainer>
       </div>
-    </NoTopBarContainer>
+    </SubMenuTopBarContainer>
   );
 }

front/src/pages/settings/SettingsWorkspace.tsx

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 import { NameField } from '@/settings/workspace/components/NameField';
 import { WorkspaceLogoUploader } from '@/settings/workspace/components/WorkspaceLogoUploader';
-import { NoTopBarContainer } from '@/ui/layout/components/NoTopBarContainer';
+import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
 import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
 import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
 
@@ -24,7 +24,7 @@ const StyledSectionContainer = styled.div`
 
 export function SettingsWorksapce() {
   return (
-    <NoTopBarContainer>
+    <SubMenuTopBarContainer>
       <div>
         <StyledContainer>
           <MainSectionTitle>General</MainSectionTitle>
@@ -41,6 +41,6 @@ export function SettingsWorksapce() {
           </StyledSectionContainer>
         </StyledContainer>
       </div>
-    </NoTopBarContainer>
+    </SubMenuTopBarContainer>
   );
 }

front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -5,7 +5,7 @@ import { useRecoilState } from 'recoil';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { Button } from '@/ui/button/components/Button';
 import { IconTrash } from '@/ui/icon';
-import { NoTopBarContainer } from '@/ui/layout/components/NoTopBarContainer';
+import { SubMenuTopBarContainer } from '@/ui/layout/components/SubMenuTopBarContainer';
 import { MainSectionTitle } from '@/ui/title/components/MainSectionTitle';
 import { SubSectionTitle } from '@/ui/title/components/SubSectionTitle';
 import { WorkspaceInviteLink } from '@/workspace/components/WorkspaceInviteLink';
@@ -75,7 +75,7 @@ export function SettingsWorkspaceMembers() {
   };
 
   return (
-    <NoTopBarContainer>
+    <SubMenuTopBarContainer>
       <StyledContainer>
         <MainSectionTitle>Members</MainSectionTitle>
         {workspace?.inviteHash && (
@@ -112,6 +112,6 @@ export function SettingsWorkspaceMembers() {
           />
         ))}
       </StyledContainer>
-    </NoTopBarContainer>
+    </SubMenuTopBarContainer>
   );
 }