fix: event title overflow in data table

[Copilot]

📋 Description

Long event titles were overflowing their table cell and covering adjacent columns (Startdatum, Enddatum, etc.).

Added truncate class to the title cell to properly constrain text with ellipsis:

// frontend/components/events/use-event-columns.tsx
<div className="font-medium text-sm leading-tight truncate">
  {row.original.title_de}
</div>

The truncate utility applies overflow: hidden, text-overflow: ellipsis, and white-space: nowrap to keep long titles within column boundaries.

✅ Checklist

• I've tested my changes on the backend
• I've tested my changes on the frontend
• I've updated the documentation (if needed)
• I've reviewed the related issues, if any

🗒️ Additional Notes

Single-line change following existing truncation patterns in the codebase (e.g., events-calendar.tsx).

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Events List Display Problem</issue_title>
<issue_description>If the event title is very long, it covers other parts of the event properties.

</issue_description>

<agent_instructions>Fix the overflow of elements in the (events) data table </agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Events List Display Problem #11

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Summary by CodeRabbit

• Style
  • Applied text truncation to event titles in the events table to enhance table layout and improve visual presentation when titles exceed available space.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Added text truncation styling to the title column in the events table component to prevent long event titles from overflowing and covering adjacent properties.

Changes

Cohort / File(s)	Change Summary
Title truncation styling frontend/components/events/use-event-columns.tsx	Applied truncate CSS class to the title_de cell renderer to constrain text overflow; no logic or control flow changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Verify the truncate class is correctly applied to the target element
• Confirm the CSS utility class exists and provides expected text truncation behavior
• Validate the change resolves the title overflow issue without unintended side effects on other cells

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'fix: event title overflow in data table' directly and clearly summarizes the main change, which is adding text truncation to prevent title overflow.
Linked Issues check	✅ Passed	The code change successfully addresses issue #11 by adding the truncate CSS utility to constrain long event titles within their column boundaries.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the event title overflow problem; only the title cell presentation was modified without unrelated alterations.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch copilot/fix-events-list-display

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Robert27]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[Copilot]

Pull request overview

This PR fixes the overflow issue where long event titles were covering adjacent columns (Startdatum, Enddatum) in the events data table by applying proper text truncation.

• Added truncate utility class to event title cells to constrain overflowing text with ellipsis

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/components/events/use-event-columns.tsx (1)

32-42: Consider adding a tooltip to show full titles on hover.

When event titles are truncated with ellipsis, users have no way to view the complete text. Adding a Tooltip wrapper (already imported and used in the visibility column) would improve accessibility and user experience.

Apply this diff to add a tooltip:

 cell: ({ row }) => (
 	<div className="max-w-[380px] space-y-1">
-		<div className="font-medium text-sm leading-tight truncate">
-			{row.original.title_de}
-		</div>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<div className="font-medium text-sm leading-tight truncate">
+					{row.original.title_de}
+				</div>
+			</TooltipTrigger>
+			<TooltipContent>
+				{row.original.title_de}
+			</TooltipContent>
+		</Tooltip>
 		{row.original.description_de && (
 			<div className="text-xs text-muted-foreground line-clamp-1">
 				{row.original.description_de}
 			</div>
 		)}
 	</div>
 ),

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 43a0817 and 0f789c3.

📒 Files selected for processing (1)

• frontend/components/events/use-event-columns.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Analyze (rust)
• GitHub Check: Analyze (rust)

🔇 Additional comments (1)

frontend/components/events/use-event-columns.tsx (1)

34-36: Fix correctly prevents title overflow.

The addition of the truncate class properly constrains long event titles and prevents them from covering adjacent columns.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Note: Potential width constraint mismatch.

The parent div specifies max-w-[380px] while the column size is set to 300. This might allow the cell to exceed the intended column width in certain table layouts. If this is unintentional, consider aligning these values.

Also applies to: 44-44

🤖 Prompt for AI Agents

In frontend/components/events/use-event-columns.tsx around lines 33 and 44, the
parent div uses className "max-w-[380px]" while the column size is set to 300,
risking layout mismatch where the cell can exceed the intended column width;
make the values consistent by either changing the div class to a fixed width
matching the column (e.g., w-[300px] or max-w-[300px]) or updating the column
size to 380, or alternatively use a responsive CSS approach
(flex/shrink/overflow-hidden) so the rendered cell cannot exceed the column
width.