feat: show event description in metadata chip#3840
Conversation
Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
apps/desktop/src/components/main/body/sessions/outer-header/metadata/index.tsx
Show resolved
Hide resolved
Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
| {event.description && ( | ||
| <> | ||
| <div className="h-px bg-neutral-200" /> | ||
| <div className="text-sm text-neutral-700 whitespace-pre-wrap break-words"> | ||
| {event.description} | ||
| </div> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
🟡 Calendar view popover lacks max-height/overflow for newly rendered long descriptions
The EventDisplay component now renders the description field (lines 216-223), but it is also used in the calendar view's EventPopoverContent at apps/desktop/src/components/main/body/calendar/calendar-view.tsx:587. That popover's container (PopoverContent at line 552-554) has no max-h or overflow constraints:
<PopoverContent
align="start"
className="w-[280px] shadow-lg p-0 rounded-lg"
onClick={(e) => e.stopPropagation()}
>Impact and root cause
The metadata popover in the session view was correctly updated with overflow-y-auto on the inner div and already had max-h-[80vh] on the PopoverContent. However, the calendar view's event popover was not updated. When a calendar event has a long description (e.g. 10+ lines of meeting details, LinkedIn URLs, etc.), the popover will grow unbounded and can overflow the viewport, making the "Open note" button inaccessible.
Expected: The calendar event popover should also constrain its height and allow scrolling for long descriptions.
Actual: The popover grows without bounds, potentially extending beyond the viewport.
Prompt for agents
In apps/desktop/src/components/main/body/calendar/calendar-view.tsx, add max-height and overflow constraints to the calendar event PopoverContent (around line 552-554) similar to the metadata popover. For example, add max-h-[80vh] to the PopoverContent className and overflow-y-auto to the inner div in EventPopoverContent (line 586). This ensures long event descriptions don't cause the popover to overflow the viewport.
Was this helpful? React with 👍 or 👎 to provide feedback.
ComputelessComputer
deleted the
devin/1770735753-show-event-description
branch
1 participant
Summary
Renders the calendar event
descriptionfield in the metadata popover. Thedescriptionwas already available in theEventDisplayprops but was not being displayed. Now it appears below the date/time, separated by a divider line.Also adds
overflow-y-autoto the popover's inner content container so that long descriptions (or any tall content) remain scrollable within themax-h-[80vh]constraint.Review & Testing Checklist for Human
overflow-y-autoon the content wrapper should be invisible when content fits.Suggested test plan: Open a session linked to a calendar event that has a description (like the "Emil Chen wants to learn about Hyprnote" example from the screenshots). Click the metadata chip and verify the description appears below the date/time. Then try an event with a very long description and confirm the popover scrolls. Also check an event with no description to confirm no visual regression.
Notes