update icon event preview modal

src/components/Dialog/ResponsiveDialog.tsx

@@ -116,6 +116,7 @@ function ResponsiveDialog({
 }: ResponsiveDialogProps) {
   const baseSx: SxProps<Theme> = {
     "& .MuiBackdrop-root": {
+      backgroundColor: "rgba(0, 0, 0, 0.1)",
       opacity: isExpanded ? "0 !important" : undefined,
       transition: isExpanded ? "none !important" : undefined,
       pointerEvents: isExpanded ? "none" : undefined,

src/components/Event/InfoRow.tsx

@@ -8,6 +8,7 @@ type InfoRowProps = {
   data?: string; // optional link target
   content?: React.ReactNode; // if provided, overrides text rendering
   style?: React.CSSProperties;
+  alignItems?: React.CSSProperties["alignItems"];
 };
 
 function detectUrls(text: string) {
@@ -62,12 +63,13 @@ export function InfoRow({
   data,
   content,
   style,
+  alignItems = "center",
 }: InfoRowProps) {
   return (
     <Box
       style={{
         display: "flex",
-        alignItems: "center",
+        alignItems,
         gap: 1,
         marginBottom: 1,
       }}

src/components/Event/utils/eventUtils.tsx

@@ -13,6 +13,13 @@ import { Avatar, Badge, Box, Typography } from "@linagora/twake-mui";
 import CancelIcon from "@mui/icons-material/Cancel";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 
+const EMAIL_DISPLAY_MAX_LENGTH = 50;
+
+function truncateDisplayText(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return `${text.slice(0, maxLength)}...`;
+}
+
 export function renderAttendeeBadge(
   a: userAttendee,
   key: string,
@@ -65,15 +72,11 @@ export function renderAttendeeBadge(
           <Avatar {...stringAvatar(a.cn || a.cal_address)} />
         </Badge>
         <Box style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
-          <Typography
-            noWrap
-            style={{
-              maxWidth: "180px",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            }}
-          >
-            {a.cn || a.cal_address}
+          <Typography noWrap>
+            {truncateDisplayText(
+              a.cn || a.cal_address,
+              EMAIL_DISPLAY_MAX_LENGTH
+            )}
           </Typography>
           {isOrganizer && (
             <Typography variant="caption" color="text.secondary">