fix: adjust word break behavior for project tooltip and popup (#502)

Not sure why I went with `break-all` when initially implementing, but
`break-word` seems more appropriate and is consistent with what we do
elsewhere.

Author: achou11

src/renderer/src/components/error-dialog.tsx

@@ -88,7 +88,7 @@ export function ErrorDialog({ errorMessage, onClose, open }: Props) {
 										variant="body2"
 										fontFamily="monospace"
 										whiteSpace="pre-wrap"
-										sx={{ wordBreak: 'break-word' }}
+										sx={{ overflowWrap: 'break-word' }}
 									>
 										{errorMessage}
 									</Typography>

src/renderer/src/components/generic-route-error-component.tsx

@@ -48,7 +48,7 @@ export function GenericRouteErrorComponent({ error }: ErrorComponentProps) {
 						variant="body2"
 						fontFamily="monospace"
 						whiteSpace="pre-wrap"
-						sx={{ wordBreak: 'break-word' }}
+						sx={{ overflowWrap: 'break-word' }}
 					>
 						{error.toString()}
 					</Typography>
@@ -70,7 +70,7 @@ export function GenericRouteErrorComponent({ error }: ErrorComponentProps) {
 						variant="body2"
 						fontFamily="monospace"
 						whiteSpace="pre-wrap"
-						sx={{ wordBreak: 'break-word' }}
+						sx={{ overflowWrap: 'break-word' }}
 					>
 						{error.stack}
 					</Typography>

src/renderer/src/components/generic-route-not-found-component.tsx

@@ -41,7 +41,7 @@ export function GenericRouteNotFoundComponent({
 					fontWeight={500}
 					textAlign="center"
 					whiteSpace="pre-wrap"
-					sx={{ wordBreak: 'break-word' }}
+					sx={{ overflowWrap: 'break-word' }}
 				>
 					{t(m.title)}
 				</Typography>
@@ -50,7 +50,7 @@ export function GenericRouteNotFoundComponent({
 					<Typography
 						textAlign="center"
 						whiteSpace="pre-wrap"
-						sx={{ wordBreak: 'break-word' }}
+						sx={{ overflowWrap: 'break-word' }}
 					>
 						{data.data.message}
 					</Typography>

src/renderer/src/routes/app/projects/$projectId/index.tsx

@@ -176,7 +176,7 @@ function ProjectInfoSection({ projectId }: { projectId: string }) {
 								},
 							}}
 						>
-							<Typography variant="button" sx={{ wordBreak: 'break-all' }}>
+							<Typography variant="button" sx={{ overflowWrap: 'break-word' }}>
 								{displayedName}
 							</Typography>
 						</ButtonBase>
@@ -210,13 +210,13 @@ function ProjectInfoSection({ projectId }: { projectId: string }) {
 										<Typography
 											variant="h1"
 											fontWeight={500}
-											sx={{ wordBreak: 'break-all' }}
+											sx={{ overflowWrap: 'break-word' }}
 										>
 											{displayedName}
 										</Typography>
 
 										{projectSettings.projectDescription ? (
-											<Typography sx={{ wordBreak: 'break-all' }}>
+											<Typography sx={{ overflowWrap: 'break-word' }}>
 												{projectSettings.projectDescription}
 											</Typography>
 										) : null}

src/renderer/src/routes/app/projects/$projectId_/team/$deviceId.tsx

@@ -301,13 +301,9 @@ function CollaboratorInfoContent({
 				padding={10}
 				justifyContent="center"
 				gap={20}
+				sx={{ overflowWrap: 'break-word' }}
 			>
-				<Stack
-					direction="column"
-					gap={4}
-					alignItems="center"
-					sx={{ overflowWrap: 'anywhere' }}
-				>
+				<Stack direction="column" gap={4} alignItems="center">
 					<DeviceIcon deviceType={member.deviceType} size="60px" />
 
 					<Typography variant="h1" fontWeight={500} textAlign="center">
@@ -331,7 +327,11 @@ function CollaboratorInfoContent({
 				</Stack>
 
 				<Stack direction="column" gap={4} alignItems="center">
-					<Typography color="textSecondary" textAlign="center">
+					<Typography
+						color="textSecondary"
+						textAlign="center"
+						sx={{ overflowWrap: 'anywhere' }}
+					>
 						{truncatedDeviceId}
 					</Typography>