From 2355ee877164e0b0c43083ecd29c828a7c47584f Mon Sep 17 00:00:00 2001
From: lenhanphung <44486647+lenhanphung@users.noreply.github.com>
Date: Mon, 27 Oct 2025 17:53:01 +0700
Subject: [PATCH] fix #253: trim long text without space (#256)

---
 src/components/Calendar/CalendarSelection.tsx | 33 ++++++++++++++-----
 src/features/Events/EventDisplayPreview.tsx   |  4 ++-
 src/utils/textUtils.ts                        | 22 +++++++++++++
 3 files changed, 50 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/textUtils.ts

diff --git a/src/components/Calendar/CalendarSelection.tsx b/src/components/Calendar/CalendarSelection.tsx
index 272f4aa..908c9f2 100644
--- a/src/components/Calendar/CalendarSelection.tsx
+++ b/src/components/Calendar/CalendarSelection.tsx
@@ -4,7 +4,7 @@ import AccordionSummary from "@mui/material/AccordionSummary";
 import Typography from "@mui/material/Typography";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import AddIcon from "@mui/icons-material/Add";
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import CalendarPopover from "./CalendarModal";
 import { Calendars } from "../../features/Calendars/CalendarTypes";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
@@ -15,6 +15,7 @@ import CalendarSearch from "./CalendarSearch";
 import { Divider, ListItem, Menu, MenuItem } from "@mui/material";
 import { removeCalendarAsync } from "../../features/Calendars/CalendarSlice";
 import { DeleteCalendarDialog } from "./DeleteCalendarDialog";
+import { trimLongTextWithoutSpace } from "../../utils/textUtils";
 
 function CalendarAccordion({
   title,
@@ -223,6 +224,11 @@ function CalendarSelector({
     setDeletePopupOpen(false);
     handleClose();
   };
+
+  const trimmedName = useMemo(
+    () => trimLongTextWithoutSpace(calendars[id].name),
+    [calendars, id]
+  );
   return (
     <>
       <ListItem
@@ -243,7 +249,14 @@ function CalendarSelector({
           },
         }}
       >
-        <label>
+        <label
+          style={{
+            display: "flex",
+            alignItems: "center",
+            maxWidth: "calc(100% - 40px)",
+            overflow: "hidden",
+          }}
+        >
           <Checkbox
             sx={{
               color: calendars[id].color?.light,
@@ -253,13 +266,17 @@ function CalendarSelector({
             checked={selectedCalendars.includes(id)}
             onChange={() => handleCalendarToggle(id)}
           />
-          {calendars[id].name}
+          <span
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              wordBreak: "break-word",
+            }}
+          >
+            {trimmedName}
+          </span>
         </label>
-        <IconButton
-          className="MoreBtn"
-          onClick={handleClick}
-          style={{ alignSelf: "end" }}
-        >
+        <IconButton className="MoreBtn" onClick={handleClick}>
           <MoreVertIcon />
         </IconButton>
       </ListItem>
diff --git a/src/features/Events/EventDisplayPreview.tsx b/src/features/Events/EventDisplayPreview.tsx
index 8031614..764986d 100644
--- a/src/features/Events/EventDisplayPreview.tsx
+++ b/src/features/Events/EventDisplayPreview.tsx
@@ -655,7 +655,9 @@ export default function EventPreviewModal({
               height: 12,
             }}
           />
-          <Typography>{calendar.name}</Typography>
+          <Typography sx={{ wordBreak: "break-word" }}>
+            {calendar.name}
+          </Typography>
         </Box>
       </ResponsiveDialog>
       <EditModeDialog
diff --git a/src/utils/textUtils.ts b/src/utils/textUtils.ts
new file mode 100644
index 0000000..0f8d71b
--- /dev/null
+++ b/src/utils/textUtils.ts
@@ -0,0 +1,22 @@
+export function trimLongTextWithoutSpace(text: string): string {
+  const words = text.split(/\s+/);
+
+  const hasLongWord = words.some((word) => word.length > 25);
+
+  if (!hasLongWord) {
+    return text;
+  }
+
+  let result = "";
+  for (const word of words) {
+    if (word.length > 25) {
+      const remaining = 20 - result.length;
+      result += word.substring(0, Math.max(remaining - 3, 5)) + "...";
+      break;
+    } else {
+      result += (result ? " " : "") + word;
+    }
+  }
+
+  return result;
+}