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/modules/activities/components/CommentThreadComments.tsx

@@ -4,6 +4,7 @@ import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { currentUserState } from '@/auth/states/currentUserState';
+import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { AutosizeTextInput } from '@/ui/input/components/AutosizeTextInput';
 import { CommentThread, useCreateCommentMutation } from '~/generated/graphql';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
@@ -38,7 +39,10 @@ const StyledCommentActionBar = styled.div`
   border-top: 1px solid ${({ theme }) => theme.border.color.light};
   display: flex;
   padding: 16px 24px 16px 48px;
-  width: calc(${({ theme }) => theme.rightDrawerWidth} - 48px - 24px);
+  width: calc(
+    ${({ theme }) => (useIsMobile() ? '100%' : theme.rightDrawerWidth)} - 48px -
+      24px
+  );
 `;
 
 const StyledThreadCommentTitle = styled.div`

front/src/modules/activities/components/CommentThreadRelationPicker.tsx

@@ -12,7 +12,7 @@ import { CompanyChip } from '@/companies/components/CompanyChip';
 import { useFilteredSearchCompanyQuery } from '@/companies/queries';
 import { PersonChip } from '@/people/components/PersonChip';
 import { useFilteredSearchPeopleQuery } from '@/people/queries';
-import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
+import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside';
 import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
@@ -194,7 +194,7 @@ export function CommentThreadRelationPicker({ commentThread }: OwnProps) {
     placement: 'bottom-start',
   });
 
-  useListenClickOutsideArrayOfRef({
+  useListenClickOutside({
     refs: [refs.floating, refs.domReference],
     callback: () => {
       exitEditMode();

front/src/modules/activities/right-drawer/components/CommentThread.tsx

@@ -9,6 +9,7 @@ import { CommentThreadTypeDropdown } from '@/activities/components/CommentThread
 import { GET_COMMENT_THREAD } from '@/activities/queries';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
 import { PropertyBoxItem } from '@/ui/editable-field/property-box/components/PropertyBoxItem';
+import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { IconArrowUpRight } from '@/ui/icon/index';
 import {
   useGetCommentThreadQuery,
@@ -43,7 +44,8 @@ const StyledTopContainer = styled.div`
   align-items: flex-start;
   align-self: stretch;
   background: ${({ theme }) => theme.background.secondary};
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-bottom: ${({ theme }) =>
+    useIsMobile() ? 'none' : `1px solid ${theme.border.color.medium}`};
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -187,7 +189,6 @@ export function CommentThread({
           onChange={updateTitleFromBody}
         />
       </StyledUpperPartContainer>
-
       {showComment && (
         <CommentThreadComments
           commentThread={{

front/src/modules/activities/timeline/components/Timeline.tsx

@@ -7,6 +7,7 @@ import { useOpenCommentThreadRightDrawer } from '@/activities/hooks/useOpenComme
 import { useOpenCreateCommentThreadDrawer } from '@/activities/hooks/useOpenCreateCommentThreadDrawer';
 import { CommentableEntity } from '@/activities/types/CommentableEntity';
 import { CommentThreadForDrawer } from '@/activities/types/CommentThreadForDrawer';
+import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { IconNotes } from '@/ui/icon/index';
 import {
   ActivityType,
@@ -23,21 +24,26 @@ import { OverflowingTextWithTooltip } from '../../../ui/tooltip/OverflowingTextW
 const StyledMainContainer = styled.div`
   align-items: flex-start;
   align-self: stretch;
+  border-top: ${({ theme }) =>
+    useIsMobile() ? `1px solid ${theme.border.color.medium}` : 'none'};
   display: flex;
   flex: 1 0 0;
   flex-direction: column;
+
   justify-content: center;
 `;
 
 const StyledTimelineContainer = styled.div`
   align-items: center;
   align-self: stretch;
+
   display: flex;
   flex: 1 0 0;
   flex-direction: column;
   gap: 4px;
   justify-content: flex-start;
   overflow-y: auto;
+
   padding: 12px 16px 12px 16px;
 `;
 
@@ -175,9 +181,13 @@ const StyledTooltip = styled(Tooltip)`
 const StyledTopActionBar = styled.div`
   align-items: flex-start;
   align-self: stretch;
-  backdrop-filter: blur(5px);
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
-  border-top-right-radius: 8px;
+  backdrop-filter: ${() => (useIsMobile() ? 'none' : `blur(5px)`)};
+
+  border-bottom: ${({ theme }) =>
+    useIsMobile() ? 'none' : `1px solid ${theme.border.color.medium}`};
+
+  border-top-right-radius: ${() => (useIsMobile() ? 'none' : `8px`)};
+
   display: flex;
   flex-direction: column;
   left: 0px;