[#104] added css to make long title prettier (#111)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/components/Calendar/Calendar.css

@@ -54,6 +54,14 @@ main {
   height: 100%;
 }
 
+.fc-event-main span,
+.fc-daygrid-event div {
+  display: block !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
 [data-theme="dark"] .fc-timegrid-slot::after {
   border-top: 1px dotted rgba(255, 255, 255, 0.2);
 }

src/features/Events/EventDisplayPreview.tsx

@@ -182,7 +182,14 @@ export default function EventPreviewModal({
 
           <CardContent sx={{ pt: 1.5 }}>
             {event.title && (
-              <Typography variant="h6" fontWeight="bold" gutterBottom>
+              <Typography
+                variant="h6"
+                fontWeight="bold"
+                sx={{
+                  wordBreak: "break-word",
+                }}
+                gutterBottom
+              >
                 {event.title}
               </Typography>
             )}