added flexibility to add non-ascii letter or spaces in username

src/Components/Sidebar/index.jsx

@@ -628,10 +628,19 @@ function Sidebar() {
 				) : (
 					<>
 						<Avatar small={true} />
-						<Box ml={theme.spacing(2)}>
+						<Box
+							ml={theme.spacing(2)}
+							sx={{ maxWidth: "150px", overflow: "hidden" }}
+						>
 							<Typography
 								component="span"
 								fontWeight={500}
+								sx={{
+									display: "block",
+									whiteSpace: "nowrap",
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+								}}
 							>
 								{authState.user?.firstName} {authState.user?.lastName}
 							</Typography>
@@ -707,11 +716,20 @@ function Sidebar() {
 				>
 					{collapsed && (
 						<MenuItem sx={{ cursor: "default", minWidth: "150px" }}>
-							<Box mb={theme.spacing(2)}>
+							<Box
+								mb={theme.spacing(2)}
+								sx={{ maxWidth: "150px", overflow: "hidden" }}
+							>
 								<Typography
 									component="span"
 									fontWeight={500}
 									fontSize={13}
+									sx={{
+										display: "block",
+										whiteSpace: "nowrap",
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+									}}
 								>
 									{authState.user?.firstName} {authState.user?.lastName}
 								</Typography>