feat: Enhance project display with hoverable overflow for additional projects

src/app/calendar/page.js

@@ -226,8 +226,27 @@ export default function ProjectCalendarPage() {
 											</Link>
 										))}
 										{dayProjects.length > 3 && (
-											<div className="text-xs text-gray-500 p-1">
-												+{dayProjects.length - 3} więcej
+											<div className="relative group">
+												<div className="text-xs text-gray-500 p-1 cursor-pointer">
+													+{dayProjects.length - 3} więcej
+												</div>
+												<div className="absolute left-0 top-full mt-1 bg-white border border-gray-200 rounded shadow-lg p-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none group-hover:pointer-events-auto max-w-xs">
+													<div className="space-y-1">
+														{dayProjects.slice(3).map(project => (
+															<Link
+																key={project.project_id}
+																href={`/projects/${project.project_id}`}
+																className="block"
+															>
+																<div className={`text-xs p-1 rounded truncate ${
+																	statusColors[project.project_status] || statusColors.registered
+																} hover:opacity-80 transition-opacity`}>
+																	{project.project_name}
+																</div>
+															</Link>
+														))}
+													</div>
+												</div>
 											</div>
 										)}
 									</div>