Desktop: Resolves #9998: Fixed text wrapping in Spellcheck button (#10005)

packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.tsx

@@ -69,6 +69,7 @@ function styles_(props: Props) {
 			},
 			toolbarStyle: {
 				marginBottom: 0,
+				minWidth: 0,
 			},
 		};
 	});

packages/app-desktop/gui/ToolbarBase.tsx

@@ -28,6 +28,7 @@ class ToolbarBaseComponent extends React.Component<Props, any> {
 			display: 'flex',
 			flexDirection: 'row',
 			boxSizing: 'border-box',
+			minWidth: 0,
 		};
 
 		const leftItemComps: any[] = [];

packages/app-desktop/gui/ToolbarButton/ToolbarButton.tsx

@@ -43,7 +43,10 @@ export default function ToolbarButton(props: Props) {
 	if (!isEnabled) classes.push('disabled');
 
 	const onClick = getProp(props, 'onClick');
-
+	const style: React.CSSProperties = {
+		whiteSpace: 'nowrap',
+		overflow: 'hidden',
+		textOverflow: 'ellipsis' };
 	return (
 		<StyledRoot
 			className={classes.join(' ')}
@@ -56,7 +59,7 @@ export default function ToolbarButton(props: Props) {
 			}}
 		>
 			{icon}
-			{title}
+			<span style={style}>{title}</span>
 		</StyledRoot>
 	);
 }

packages/app-desktop/gui/ToolbarButton/styles/index.ts

@@ -23,6 +23,9 @@ export const StyledRoot = styled.a<RootProps>`
 	font-size: ${(props: RootProps) => props.theme.toolbarIconSize * 0.8}px;
 	padding-left: 5px;
 	padding-right: 5px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 
 	&:hover {
 		background-color: ${(props: RootProps) => props.disabled ? 'none' : props.theme.backgroundColorHover3};