Fix: scrollable sidebar project list keeps Add Project in view#10
Conversation
When projects exceed the visible area, the list now scrolls within a capped height (max-h-[35vh]) so the Add Project button stays in view instead of being pushed down. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Visit the preview URL for this PR (updated for commit 1778111): https://my-productivity-hub-5a3ba--pr10-fix-sidebar-project-ehtnpzwp.web.app (expires Sun, 07 Jun 2026 19:05:23 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 4ef75aef15076a8cc05555b91f31935d9a13db8e |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a bounded scroll area for the standalone projects list in the sidebar to keep the "Add Project" button visible when there are many projects, and adds an empty state message when there are no projects. The reviewer suggested replacing the truncate class on the flex container button with min-w-0 to ensure proper text truncation on the inner span, and recommended using text-gray-500 instead of text-gray-600 for the empty state text to improve color contrast and accessibility.
| <button | ||
| key={p.id} | ||
| onClick={() => handleNavigate('project', p.id)} | ||
| className="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-gray-300 hover:bg-gray-700/50 transition-colors truncate" |
There was a problem hiding this comment.
The truncate class is applied to the <button> which is a flex container (flex items-center). In CSS, text-overflow: ellipsis (applied by truncate) does not work directly on flex containers. Since you have already wrapped the project name in <span className="truncate">, you should replace truncate on the button with min-w-0 to allow the flex items to shrink and truncate correctly.
| className="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-gray-300 hover:bg-gray-700/50 transition-colors truncate" | |
| className="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-gray-300 hover:bg-gray-700/50 transition-colors min-w-0" |
| </button> | ||
| ))} | ||
| {standaloneProjects.length === 0 && ( | ||
| <p className="px-3 py-1.5 text-xs text-gray-600">No standalone projects yet.</p> |
There was a problem hiding this comment.
The text color text-gray-600 on a dark sidebar background (bg-gray-900/50) has very low contrast, making it hard to read. Please use text-gray-500 to improve accessibility and maintain consistency with the other empty state message defined in GoalDropdown (line 313).
| <p className="px-3 py-1.5 text-xs text-gray-600">No standalone projects yet.</p> | |
| <p className="px-3 py-1.5 text-xs text-gray-500">No standalone projects yet.</p> |
1 participant
When the number of projects exceeds the visible sidebar height, the Add Project button was pushed off-screen. The standalone project list now lives in a bounded, scrollable area (
max-h-[35vh]), so the list scrolls internally and the Add Project button stays visible. Also truncates long project names cleanly and adds an empty-state line.🤖 Generated with Claude Code