Aktueller Stand

components/CalendarBoard.tsx

@@ -527,6 +527,27 @@ export default function CalendarBoard() {
     setFormOpen(true);
   };
 
+  const applyTruncatedTitles = (root: HTMLElement) => {
+    const elements = Array.from(
+      root.querySelectorAll<HTMLElement>(".event-shell .truncate")
+    );
+    elements.forEach((element) => {
+      const text = element.textContent?.trim();
+      if (!text) {
+        element.removeAttribute("title");
+        return;
+      }
+      const isTruncated =
+        element.scrollWidth > element.clientWidth ||
+        element.scrollHeight > element.clientHeight;
+      if (isTruncated) {
+        element.setAttribute("title", text);
+      } else {
+        element.removeAttribute("title");
+      }
+    });
+  };
+
   const calendarEvents = useMemo(
     () =>
       events.map((event) => ({
@@ -1061,6 +1082,10 @@ export default function CalendarBoard() {
                       </div>
                     );
                   }}
+                  eventDidMount={(info) => {
+                    if (!info.el) return;
+                    requestAnimationFrame(() => applyTruncatedTitles(info.el));
+                  }}
                   height="auto"
                   datesSet={(arg) => {
                     setActiveRange({
@@ -1467,7 +1492,10 @@ export default function CalendarBoard() {
                   </td>
                 </tr>
               ) : (
-                displayedEvents.map((event) => (
+                displayedEvents.map((event) => {
+                  const categoryName = event.category?.name || "Ohne Kategorie";
+                  const locationLabel = formatLocation(event.location);
+                  return (
                     <tr
                       key={event.id}
                       data-bucket={getDateBucket(event.startAt)}
@@ -1497,13 +1525,30 @@ export default function CalendarBoard() {
                           timeStyle: "short"
                         })}
                       </td>
-                    <td className="py-3 pr-3 font-medium">{event.title}</td>
+                      <td className="py-3 pr-3 font-medium">
+                        <span
+                          className="block max-w-[200px] truncate sm:max-w-[280px] lg:max-w-[420px] xl:max-w-[520px] 2xl:max-w-[640px]"
+                          title={event.title}
+                        >
+                          {event.title}
+                        </span>
+                      </td>
                       <td className="py-3 pr-3">
-                      {event.category?.name || "Ohne Kategorie"}
+                        <span
+                          className="block max-w-[160px] truncate sm:max-w-[220px] lg:max-w-[280px] xl:max-w-[320px]"
+                          title={categoryName}
+                        >
+                          {categoryName}
+                        </span>
                       </td>
                       <td className="py-3 pr-3">
                         <div className="flex items-center justify-between gap-2">
-                        <span className="flex-1">{formatLocation(event.location)}</span>
+                          <span
+                            className="min-w-0 flex-1 truncate"
+                            title={locationLabel}
+                          >
+                            {locationLabel}
+                          </span>
                           {event.locationLat && event.locationLng && (
                             <a
                               className="inline-flex items-center justify-center rounded-full border border-slate-200 p-1 text-slate-600 hover:bg-slate-100"
@@ -1578,7 +1623,8 @@ export default function CalendarBoard() {
                       </div>
                     </td>
                     </tr>
-                ))
+                  );
+                })
               )}
             </tbody>
           </table>