Fix workspace dropdown truncation and center auth titles (#18869)

# Before

<img width="543" height="315" alt="CleanShot 2026-03-23 at 18 37 17"
src="https://github.com/user-attachments/assets/3a8233f8-507d-40e3-b4f0-0aae325bc4a8"
/>


# After

<img width="230" height="167" alt="CleanShot 2026-03-23 at 18 38 06"
src="https://github.com/user-attachments/assets/dda637d8-766a-4dc4-9909-78edef866c88"
/>

+ video: (long & short title)


https://github.com/user-attachments/assets/5373d168-6ffc-495b-909c-27fc1e68e712


also fixed text not centered in onboarding

---------

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

packages/twenty-front/src/modules/auth/components/Title.tsx

@@ -15,6 +15,7 @@ const StyledTitle = styled.div<Pick<TitleProps, 'noMarginTop'>>`
   margin-bottom: ${themeCssVariables.spacing[4]};
   margin-top: ${({ noMarginTop }) =>
     !noMarginTop ? themeCssVariables.spacing[4] : '0'};
+  text-align: center;
 `;
 
 export const Title = ({

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx

@@ -27,8 +27,9 @@ export const MultiWorkspaceDropdownButton = () => {
   return (
     <Dropdown
       dropdownId={MULTI_WORKSPACE_DROPDOWN_ID}
-      dropdownOffset={{ y: -30, x: -5 }}
+      dropdownOffset={{ y: -29, x: -5 }}
       clickableComponent={<MultiWorkspaceDropdownClickableComponent />}
+      clickableComponentWidth="100%"
       dropdownComponents={<DropdownComponents />}
       onClose={() => {
         setMultiWorkspaceDropdown('default');

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx

@@ -4,6 +4,7 @@ import {
   StyledContainer,
   StyledIconChevronDown,
   StyledLabel,
+  StyledLabelWrapper,
 } from '@/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
@@ -11,6 +12,7 @@ import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNaviga
 import { useContext } from 'react';
 import { Avatar } from 'twenty-ui/display';
 import { ThemeContext } from 'twenty-ui/theme-constants';
+
 export const MultiWorkspaceDropdownClickableComponent = () => {
   const { theme } = useContext(ThemeContext);
   const currentWorkspace = useAtomStateValue(currentWorkspaceState);
@@ -27,9 +29,11 @@ export const MultiWorkspaceDropdownClickableComponent = () => {
         placeholder={currentWorkspace?.displayName || ''}
         avatarUrl={currentWorkspace?.logo ?? DEFAULT_WORKSPACE_LOGO}
       />
-      <NavigationDrawerAnimatedCollapseWrapper>
-        <StyledLabel>{currentWorkspace?.displayName ?? ''}</StyledLabel>
-      </NavigationDrawerAnimatedCollapseWrapper>
+      <StyledLabelWrapper>
+        <NavigationDrawerAnimatedCollapseWrapper>
+          <StyledLabel>{currentWorkspace?.displayName ?? ''}</StyledLabel>
+        </NavigationDrawerAnimatedCollapseWrapper>
+      </StyledLabelWrapper>
       <NavigationDrawerAnimatedCollapseWrapper>
         <StyledIconChevronDown
           size={theme.icon.size.md}

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx

@@ -12,22 +12,27 @@ export const StyledContainer = styled.div<{
   cursor: pointer;
   display: flex;
   gap: ${({ isNavigationDrawerExpanded }) =>
-    isNavigationDrawerExpanded ? themeCssVariables.spacing[1] : '0'};
-  height: ${themeCssVariables.spacing[5]};
-  justify-content: space-between;
+    isNavigationDrawerExpanded ? themeCssVariables.spacing[2] : '0'};
+  max-width: 100%;
+  min-width: 0;
   padding: calc(${themeCssVariables.spacing[1]} - 1px);
-  width: ${({ isNavigationDrawerExpanded }) =>
-    isNavigationDrawerExpanded ? '100%' : 'auto'};
   &:hover {
     background-color: ${themeCssVariables.background.transparent.lighter};
     border: 1px solid ${themeCssVariables.border.color.medium};
   }
 `;
 
+export const StyledLabelWrapper = styled.div`
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+`;
+
 export const StyledLabel = styled.div`
-  align-items: center;
-  display: flex;
   font-weight: ${themeCssVariables.font.weight.medium};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledIconChevronDownContainer = styled.div<{ disabled?: boolean }>`

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx

@@ -28,6 +28,7 @@ const StyledRightActions = styled.div<{ isExpanded: boolean }>`
   align-self: ${({ isExpanded }) => (isExpanded ? 'auto' : 'flex-end')};
   display: flex;
   flex-direction: ${({ isExpanded }) => (isExpanded ? 'row' : 'column')};
+  flex-shrink: 0;
   gap: ${({ isExpanded }) => (isExpanded ? '0' : themeCssVariables.spacing[1])};
   margin-left: ${({ isExpanded }) => (isExpanded ? 'auto' : '0')};
   transition: gap calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
@@ -44,8 +45,9 @@ const StyledNavigationDrawerCollapseButtonContainer = styled.div`
 const StyledWorkspaceDropdownContainer = styled.div`
   align-items: center;
   display: flex;
-  justify-content: center;
+  flex: 1 1 auto;
   min-height: ${themeCssVariables.spacing[8]};
+  min-width: 0;
 `;
 
 type NavigationDrawerHeaderProps = {