Implement Card Resize + Scroll Rework#403
Open
PauloMFJ wants to merge 2 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Code Review
This pull request introduces manual resizing capabilities for cards on the canvas. It refactors the card components to use a new CardContent component that manages a titled scroll region, and updates useCardAutoHeight to stop auto-syncing height once a card is manually resized. The review feedback identifies a critical bug where the ResizeObserver in useCardAutoHeight observes the outer container instead of the inner content. Because the container now has a fixed height, the observer will fail to trigger when the content size changes, breaking the auto-height functionality.
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
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.
Overview
Cards can now be manually resized on the canvas, and their content scrolls internally under a pinned title instead of resizing the whole card.
Changes
onResizeviaresizeBox) with aCARD_SIZE_MINof 300×220. Added anisManuallyResizedprop that, once set, tellsuseCardAutoHeightto stop syncing height so the user's chosen size sticks.Card.Contentcomponent — A titled scroll region that fills the card: the title/header is pinned to the top and the body scrolls beneath it, with a divider that appears on scroll (data-has-scrolled). Wheel-capture logic moved here so cards scroll from anywhere over the card, not just the scroll area.useCardAutoHeightnow measures container + content refs (accounting for fixed chrome like title/padding) instead ofscrollHeight.ResponsiveContainer(width fills the resizable card; height stays fixed), dropping the hardcodedCHART_WIDTH.CARD_VARIANT_MAX→CARD_VARIANT_SIZE_DEFAULTto reflect that it's now a default (resizable) footprint rather than a hard max; updated all references.CardBasenow takes achildrenContainerRefprop; removed auto-height/scroll wiring from it.:not(:first-child)top-margins. Ensures that we don't add margin bottom or top on first / last elements.Screenshots:
New card with scroll:
