Open showpage on workflow creation (#9714)

- Created an new component state
`isRecordEditableNameRenamingComponentState`
- Updated `useCreateNewTableRecord` to open the ShowPage on workflow
creation
- Refactored `RecordEditableName` and its components to remove the
useEffect (This was causing the recordName state to be updated after the
focus on `NavigationDrawerInput`, but we want the text so be selected
after the update).
- Introduced a new component `EditableBreadcrumbItem`
- Created an autosizing text input: This is done by a hack using a span
inside a div and the input position is set to absolute and takes the
size of the div. There are two problems that I didn't manage to fix:
If the text is too long, the title overflows, and the letter spacing is
different between the span and the input creating a small offset.


https://github.com/user-attachments/assets/4aa1e177-7458-4691-b0c8-96567b482206


New text input component:


https://github.com/user-attachments/assets/94565546-fe2b-457d-a1d8-907007e0e2ce

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

@@ -34,9 +34,9 @@ const StyledTopBarContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(2)};
   padding-left: 0;
   padding-right: ${({ theme }) => theme.spacing(3)};
+  gap: ${({ theme }) => theme.spacing(2)};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
-    width: 100%;
     box-sizing: border-box;
     padding: ${({ theme }) => theme.spacing(3)};
   }
@@ -48,7 +48,7 @@ const StyledLeftContainer = styled.div`
   flex-direction: row;
   gap: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(1)};
-  width: 100%;
+  overflow-x: hidden;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     padding-left: ${({ theme }) => theme.spacing(1)};
@@ -60,21 +60,19 @@ const StyledTitleContainer = styled.div`
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-left: ${({ theme }) => theme.spacing(1)};
-  width: 100%;
 `;
 
 const StyledTopBarIconStyledTitleContainer = styled.div`
   align-items: center;
   display: flex;
-  flex: 1 0 auto;
   gap: ${({ theme }) => theme.spacing(1)};
   flex-direction: row;
-  width: 100%;
 `;
 
 const StyledPageActionContainer = styled.div`
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(2)};
+  flex: 1 0 1;
 `;
 
 const StyledTopBarButtonContainer = styled.div`
@@ -82,6 +80,13 @@ const StyledTopBarButtonContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
+const StyledIconContainer = styled.div`
+  flex: 1 0 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
 type PageHeaderProps = {
   title?: ReactNode;
   hasClosePageButton?: boolean;
@@ -149,7 +154,9 @@ export const PageHeader = ({
               />
             </>
           )}
-          {Icon && <Icon size={theme.icon.size.md} />}
+          <StyledIconContainer>
+            {Icon && <Icon size={theme.icon.size.md} />}
+          </StyledIconContainer>
           {title && (
             <StyledTitleContainer data-testid="top-bar-title">
               {typeof title === 'string' ? (