chore(web): Polish task board layout and animation - #168
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
WalkthroughAdds a new KanbanTaskCard component, replaces TaskItem usages with KanbanTaskCard across kanban/draggable/mobile views, applies flex-based layout/classname changes (flex-1, flex-col, cn), switches AnimatePresence to mode="wait", and consolidates tooltip-wrapped buttons into single Buttons. Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/app/`(protected)/schedule/components/new-event-button.tsx:
- Around line 13-21: The Button currently hides its text on small screens (the
<span className="hidden sm:inline">Add Event</span>) leaving only the <Plus />
icon without an accessible name; update the Button component (the <Button ...>
element that renders <Plus />) to include an accessible label for the icon-only
state by adding an aria-label (e.g., aria-label="Add Event") or using
aria-labelledby tied to the visible text span so screen readers always announce
"Add Event" while preserving the visual hide-on-small behavior; ensure the aria
attribute is set on the Button that receives onClick and disabled props.
In `@apps/web/app/`(protected)/task/components/kanban-task-card.tsx:
- Around line 173-179: The action button is hidden by CSS (opacity-0 +
group-hover:opacity-100), which breaks touch and keyboard access; in the
DropdownMenuTrigger/Button in kanban-task-card.tsx remove the hover-only
visibility classes (e.g., delete "opacity-0" and "group-hover:opacity-100") and
instead ensure the Button has a visible default state (e.g., keep
transition-opacity or set "opacity-100") and retain accessible attributes
(aria-label) and focus styles so keyboard users can tab to and see the control;
update the Button className accordingly where DropdownMenuTrigger and Button are
used.
- Around line 126-137: The card container div that uses onClick should be made
keyboard-accessible: when onClick is present, add role="button" and tabIndex={0}
(so it can be focused) and wire a keyDown handler that calls handleCardClick
when Enter or Space is pressed (preventDefault for Space to avoid page
scrolling); also ensure any visual disabled state (task.isCompleted) is
reflected via aria-disabled when appropriate. Update the same outer element that
currently has onClick, onTouchStart/onTouchEnd handlers and className checks for
task.isCompleted to include these accessibility attributes and the key handling
logic.
In `@apps/web/app/`(protected)/task/components/new-task-button.tsx:
- Around line 8-17: The icon-only button becomes inaccessible on small screens
because the visible label (<span className="hidden sm:inline">Add Task</span>)
is hidden; update the Button (the component rendering the Plus icon and the
span) to include an accessible name by adding either an aria-label="Add Task" on
the Button or inserting a visually-hidden label (e.g., <span
className="sr-only">Add Task</span>) alongside the existing span so screen
readers always get the label; ensure the Plus icon remains decorative (no alt)
and that the onClick dispatch logic (window.dispatchEvent(new
CustomEvent("task:new"))) is unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 447a0646-8e43-444a-b4e0-5019fa810734
📒 Files selected for processing (6)
apps/web/app/(protected)/schedule/components/new-event-button.tsxapps/web/app/(protected)/task/components/draggable-task-card.tsxapps/web/app/(protected)/task/components/kanban-board.tsxapps/web/app/(protected)/task/components/kanban-task-card.tsxapps/web/app/(protected)/task/components/mobile-kanban-view.tsxapps/web/app/(protected)/task/components/new-task-button.tsx
Comment on lines
+173
to
+179
| <DropdownMenuTrigger asChild> | ||
| <Button | ||
| variant="ghost" | ||
| size="icon" | ||
| className="size-6 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" | ||
| aria-label="Task actions" | ||
| > |
There was a problem hiding this comment.
Keep the actions trigger visible outside hover-only paths.
The menu button stays at opacity-0 until hover. In apps/web/app/(protected)/task/components/mobile-kanban-view.tsx, this card is now used on touch devices too, so delete/actions become effectively hidden there, and keyboard users can tab to an invisible control.
Suggested fix
<Button
variant="ghost"
size="icon"
- className="size-6 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+ className="size-6 shrink-0 opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100 sm:group-focus-within:opacity-100 focus:opacity-100"
aria-label="Task actions"
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/web/app/`(protected)/task/components/kanban-task-card.tsx around lines
173 - 179, The action button is hidden by CSS (opacity-0 +
group-hover:opacity-100), which breaks touch and keyboard access; in the
DropdownMenuTrigger/Button in kanban-task-card.tsx remove the hover-only
visibility classes (e.g., delete "opacity-0" and "group-hover:opacity-100") and
instead ensure the Button has a visible default state (e.g., keep
transition-opacity or set "opacity-100") and retain accessible attributes
(aria-label) and focus styles so keyboard users can tab to and see the control;
update the Button className accordingly where DropdownMenuTrigger and Button are
used.
…for accessibility
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
flex-1/flex-colthrough the container chain so the board fills the remaining viewport height and the horizontal scrollbar sits at the bottom of the screen instead of floating mid-page.mode="wait"toAnimatePresencein the inline task creation form so the "Add task" button waits for the form's exit animation to complete before appearing, eliminating the layout jump.Files changed
task/page.tsxflex flex-1 flex-colto page containertask-list.tsxflex-1 flex-colwhen board view is activekanban-board.tsxflex-1to scrollable containeradd-task-inline.tsxmode="wait"toAnimatePresenceTest plan
Summary by CodeRabbit