fix #253: trim long text without space (#256)

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
+        <IconButton className="MoreBtn" onClick={handleClick}>
-          className="MoreBtn"
-          onClick={handleClick}
-          style={{ alignSelf: "end" }}
-        >
           <MoreVertIcon />
         </IconButton>
       </ListItem>

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

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;
+}