diff options
| author | Oliver <oliver@mohlin.dev> | 2025-01-30 13:41:15 +0100 |
|---|---|---|
| committer | Markus Pettersson <markus.pettersson@mullvad.net> | 2025-02-03 08:47:11 +0100 |
| commit | 3ca1e18460d091e40e8d8906147a93bd61069b77 (patch) | |
| tree | 96f37e5a2a4a3d0bb683ddce2ea721b331c208cf | |
| parent | 5eda68fd1545ddeb68739a6249d088cc9a81201a (diff) | |
| download | mullvadvpn-3ca1e18460d091e40e8d8906147a93bd61069b77.tar.xz mullvadvpn-3ca1e18460d091e40e8d8906147a93bd61069b77.zip | |
Fix NavigationHeader text overflow
2 files changed, 4 insertions, 0 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/navigation-header/NavigationHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/navigation-header/NavigationHeader.tsx index 9b73e18f85..c3025c1459 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/navigation-header/NavigationHeader.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/navigation-header/NavigationHeader.tsx @@ -24,6 +24,7 @@ export const StyledContent = styled.div({ placeContent: 'center', minHeight: '32px', height: '32px', + gap: Spacings.spacing1, }); const NavigationHeader = ({ titleVisible, children, ...props }: NavigationHeaderProps) => { diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/navigation-header/components/NavigationHeaderTitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/navigation-header/components/NavigationHeaderTitle.tsx index 31164ffdea..be4b31b9d0 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/navigation-header/components/NavigationHeaderTitle.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/navigation-header/components/NavigationHeaderTitle.tsx @@ -10,6 +10,9 @@ export interface NavigationHeaderTitleProps { export const StyledText = styled(TitleMedium)<{ $visible?: boolean }>(({ $visible = true }) => ({ opacity: $visible ? 1 : 0, transition: 'opacity 250ms ease-in-out', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', })); export const NavigationHeaderTitle = ({ children }: NavigationHeaderTitleProps) => { |