Skip to content

feat: Implement hover-to-expand for overflowing todo text - #4

Open
SwapnilChand wants to merge 1 commit into
zaidmukaddam:mainfrom
SwapnilChand:main
Open

feat: Implement hover-to-expand for overflowing todo text#4
SwapnilChand wants to merge 1 commit into
zaidmukaddam:mainfrom
SwapnilChand:main

Conversation

@SwapnilChand

Copy link
Copy Markdown
  • Detects when a todo item's text content exceeds the available width using scrollWidth and clientWidth.
  • Conditionally renders a CaretDown icon next to overflowing todo items. This icon respects the existing visibility logic (only appears on row hover on desktop, always visible on mobile).
  • Adds onMouseEnter and onMouseLeave handlers to the CaretDown icon.
  • When the CaretDown icon is hovered, the corresponding todo text container dynamically changes its CSS (whitespace-normal, overflow-visible, h-auto) to reveal the full text content.
  • Includes CSS transitions for a smooth expansion effect.
  • Adjusts flex alignment (items-start) in the todo row for better layout when text expands vertically.

This allows users to easily view long todo descriptions without needing to enter edit mode.

@vercel

vercel Bot commented Apr 12, 2025

Copy link
Copy Markdown
Contributor

@SwapnilChand is attempting to deploy a commit to the Zaid Mukaddam's Team Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant