Skip to content

Implement Card Resize + Scroll Rework#403

Open
PauloMFJ wants to merge 2 commits into
datacommonsorg:mainfrom
madebypxlp:paulo/card-resize
Open

Implement Card Resize + Scroll Rework#403
PauloMFJ wants to merge 2 commits into
datacommonsorg:mainfrom
madebypxlp:paulo/card-resize

Conversation

@PauloMFJ

@PauloMFJ PauloMFJ commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

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

  • Manual card resizing — Enabled tldraw resizing on the card shape (onResize via resizeBox) with a CARD_SIZE_MIN of 300×220. Added an isManuallyResized prop that, once set, tells useCardAutoHeight to stop syncing height so the user's chosen size sticks.
  • Cursor-only resize UI — Reworked the selection foreground overlay to keep hit-testing/resize-cursors active while rendering no handles or selection frame.
  • New Card.Content component — 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.
  • Auto-height reworkuseCardAutoHeight now measures container + content refs (accounting for fixed chrome like title/padding) instead of scrollHeight.
  • Responsive charts — Line chart now uses recharts ResponsiveContainer (width fills the resizable card; height stays fixed), dropping the hardcoded CHART_WIDTH.
  • Config renameCARD_VARIANT_MAXCARD_VARIANT_SIZE_DEFAULT to reflect that it's now a default (resizable) footprint rather than a hard max; updated all references.
  • Base card cleanupCardBase now takes a childrenContainerRef prop; removed auto-height/scroll wiring from it.
  • Text card styles — Migrated markdown spacing to :not(:first-child) top-margins. Ensures that we don't add margin bottom or top on first / last elements.

Screenshots:

New card with scroll:
image

@PauloMFJ PauloMFJ self-assigned this Jul 7, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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.

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