Blocknote editor fix (#11823)

After reading the blocknote documentation :

- we decided to increase to 100% the lines width
- we decided to reduce as much as possible inner padding
- we decided it's on the parent to decide the padding of the richtext
The two last points are recommended in a discussion on the project
blocknote. This way clicking on padding won't trigger weird behaviour on
Chrome.

Fixes
twentyhq/core-team-issues#827 (comment)

Author: guillim

packages/twenty-front/src/modules/command-menu/pages/rich-text-page/components/CommandMenuEditRichTextPage.tsx

@@ -5,7 +5,10 @@ import { useRecoilValue } from 'recoil';
 import { viewableRichTextComponentState } from '../states/viewableRichTextComponentState';
 
 const StyledContainer = styled.div`
+  box-sizing: border-box;
   margin: ${({ theme }) => theme.spacing(4)} ${({ theme }) => theme.spacing(-2)};
+  padding-inline: 44px 0px;
+  width: 100%;
 `;
 
 export const CommandMenuEditRichTextPage = () => {

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RichTextFieldInput.tsx

@@ -23,9 +23,12 @@ export type RichTextFieldInputProps = {
 const StyledContainer = styled.div`
   background-color: ${({ theme }) => theme.background.primary};
   width: 480px;
-  padding: ${({ theme }) => theme.spacing(2)};
-  margin: 0 0 0 ${({ theme }) => theme.spacing(-6)};
+  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(2)}
+    ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(12)};
+  margin: 0 0 0 ${({ theme }) => theme.spacing(-5)};
   display: flex;
+  box-sizing: border-box;
+  position: relative;
 `;
 
 const StyledCollapseButton = styled.div`

packages/twenty-front/src/modules/ui/input/editor/components/BlockEditor.tsx

@@ -44,9 +44,6 @@ const StyledEditor = styled.div`
     width: 20px;
     background: transparent;
   }
-  & .bn-editor {
-    padding-inline: 44px;
-  }
   & .bn-container .bn-drag-handle {
     width: 20px;
     height: 20px;
@@ -69,6 +66,14 @@ const StyledEditor = styled.div`
     left: 26px;
   }
 
+  & .bn-editor {
+    padding-inline: 0px;
+  }
+
+  & .bn-inline-content {
+    width: 100%;
+  }
+
   & .bn-container .bn-suggestion-menu-item:hover {
     background-color: blue;
   }

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx

@@ -19,6 +19,8 @@ const ActivityRichTextEditor = lazy(() =>
 const StyledShowPageActivityContainer = styled.div`
   margin-top: ${({ theme }) => theme.spacing(6)};
   width: 100%;
+  padding-inline: 44px;
+  box-sizing: border-box;
 `;
 
 const StyledSkeletonContainer = styled.div`