Skip to content

Conversation

@ericokuma
Copy link
Contributor

@ericokuma ericokuma commented Jan 16, 2026

Fixes APP-683

The Bookmarks Modal in Canvas appeared broken due to CanvasFilterChipsReadOnly.svelte not properly wrapping filter chips when displayed horizontally (col={false}). This was caused by a missing flex-wrap class and an unnecessary wrapper div around TimeRangeReadOnly.

This PR adds flex-wrap for horizontal layouts, items-center for alignment, removes flex-none, and removes the redundant TimeRangeReadOnly wrapper, aligning its behavior with FilterChipsReadOnly.svelte.

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

Linear Issue: APP-683

Open in Cursor Open in Web


Note

Improves layout of read-only filter chips in Canvas.

  • Adds class:flex-wrap={!col} and switches container classes to flex ... items-center (removes flex-none) to enable wrapping/alignment in horizontal mode
  • Removes unnecessary wrapper around TimeRangeReadOnly, inlining its conditional block

Written by Cursor Bugbot for commit 9e9b5ed. This will update automatically on new commits. Configure here.

- Add flex-wrap when col=false to allow filter chips to wrap properly
- Remove unnecessary wrapper div around TimeRangeReadOnly
- Add items-center for proper vertical alignment
- Aligns with FilterChipsReadOnly layout behavior

Fixes APP-683

Co-authored-by: eric.okuma <[email protected]>
@cursor
Copy link

cursor bot commented Jan 16, 2026

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
Learn more about Cursor Agents

@ericokuma ericokuma marked this pull request as ready for review January 16, 2026 01:26
Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on February 25

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

comparisonTimeRange={comparisonRange
? { expression: comparisonRange }
: undefined}
/>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrapper removal breaks column layout for time chips

Medium Severity

Removing the wrapper div around TimeRangeReadOnly changes layout behavior when col=true. The TimeRangeReadOnly component renders two sibling Chip elements (time range and comparison). Previously, the flex gap-x-2 wrapper kept these chips side-by-side regardless of parent layout. Now they become direct children of the flex-col container and stack vertically when there's a comparison range. This affects DefaultFilterDisplay.svelte which uses the default col=true and passes comparisonRange.

Fix in Cursor Fix in Web

…e-by-side

The wrapper ensures time range and comparison chips stay side-by-side
regardless of whether the parent is in column (col=true) or row mode.
This preserves correct layout for DefaultFilterDisplay which uses col=true.

Co-authored-by: eric.okuma <[email protected]>
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.

3 participants