From e2c85b5af00ca56622899b24b0f8f7f804bbd538 Mon Sep 17 00:00:00 2001 From: Thomas des Francs Date: Mon, 23 Mar 2026 21:06:14 +0100 Subject: [PATCH] Fix workspace dropdown truncation and center auth titles (#18869) # Before CleanShot 2026-03-23 at 18 37 17 # After CleanShot 2026-03-23 at 18 38 06 + 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 --- .../src/modules/auth/components/Title.tsx | 1 + .../MultiWorkspaceDropdownButton.tsx | 3 ++- ...ltiWorkspaceDropdownClickableComponent.tsx | 10 +++++++--- .../MultiWorkspacesDropdownStyles.tsx | 19 ++++++++++++------- .../components/NavigationDrawerHeader.tsx | 4 +++- 5 files changed, 25 insertions(+), 12 deletions(-) diff --git a/packages/twenty-front/src/modules/auth/components/Title.tsx b/packages/twenty-front/src/modules/auth/components/Title.tsx index 67983cd0f9..ec822356d8 100644 --- a/packages/twenty-front/src/modules/auth/components/Title.tsx +++ b/packages/twenty-front/src/modules/auth/components/Title.tsx @@ -15,6 +15,7 @@ const StyledTitle = styled.div>` margin-bottom: ${themeCssVariables.spacing[4]}; margin-top: ${({ noMarginTop }) => !noMarginTop ? themeCssVariables.spacing[4] : '0'}; + text-align: center; `; export const Title = ({ diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx index fc8ae775cb..6480a90bf2 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/MultiWorkspaceDropdownButton.tsx @@ -27,8 +27,9 @@ export const MultiWorkspaceDropdownButton = () => { return ( } + clickableComponentWidth="100%" dropdownComponents={} onClose={() => { setMultiWorkspaceDropdown('default'); diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx index b23b5c80e7..7a9983fbf1 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx +++ b/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} /> - - {currentWorkspace?.displayName ?? ''} - + + + {currentWorkspace?.displayName ?? ''} + + - 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 }>` diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx index 4aa8aef9b4..1ae5ff81b7 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerHeader.tsx +++ b/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 = {