Stabilize embedded database layout and view switching

[appflowy]

Summary

• Embedded database blocks render in a fixed 300px viewport; switching between Grid and Board tabs no longer reflows the document or scrolls the page to top.
• Grid rows scroll inside the bounded panel; Board card lists scroll within each Kanban column (no more giant empty space below a single card).
• Block-selection highlight now paints the entire database block uniformly instead of striping just the tab bar and header row.

Root causes addressed

1. @tanstack/react-virtual's Grid virtualizer was resolving its scroll element to the outer page scroller via .closest('.appflowy-scroll-container'). On view switch it called scrollTo(0) on the document, kicking the user to the top.
2. Several flex-col wrappers (GridProvider, .database-grid, grid scroller) were missing min-h-0, so children with flex-1 grew to content size and overflowed the 300px panel (clipped by overflow-hidden).
3. CardList had a hard-coded height: 2000px that ignored the column's available height.
4. The block-selection SCSS rule only targeted .database-tabs, .grid-row-filed-cell, .column, producing a partial stripe.

Test plan

• Open a document containing an embedded grid database (Grid + Board views).
• Switch Grid ↔ Board several times — page scroll position stays put; no document height jump.
• Add rows beyond 300px height — verify Grid scrolls internally.
• Switch to Board — verify cards fill the column and scroll within when overflowing.
• Select the database block (Cmd+A or click) — entire block is uniformly tinted.
• Open a non-embedded (full-page) database — verify Grid still scrolls with the page as before.

🤖 Generated with Claude Code

Summary by Sourcery

Stabilize embedded database layout and scrolling behavior for grid and board views to prevent page jumps and ensure consistent block highlighting.

New Features:

• Introduce a fixed default viewport height for embedded database blocks so their content scrolls within a bounded panel rather than resizing the document.

Bug Fixes:

• Ensure embedded grid views use their own scroll container so view switching no longer scrolls the main document to the top.
• Allow board card lists to respect column height and scroll internally instead of relying on a hard-coded large height.
• Apply block selection highlighting to the entire embedded database block instead of only specific sub-elements.

Enhancements:

• Tighten layout constraints in grid-related containers using flex and min-height utilities so grid content fits correctly within the embedded viewport.

[sourcery-ai]

Reviewer's Guide

Stabilizes embedded database blocks to use a fixed-height (300px) internal scroll viewport, ensures Grid/Board views share consistent flexbox/min-height behavior, corrects the virtualizer scroll element for embedded vs full-page databases, and simplifies block-selection styling so the entire database block is highlighted uniformly.

Sequence diagram for selecting scroll element in useGridVirtualizer

sequenceDiagram
  participant GridVirtualizer
  participant useGridVirtualizer
  participant parentRef
  participant ScrollContainer

  GridVirtualizer->>useGridVirtualizer: useGridVirtualizer({ data, columns })
  useGridVirtualizer->>parentRef: getScrollElement()
  alt [isDocumentBlock]
    useGridVirtualizer->>ScrollContainer: return parentRef.current
  else [not isDocumentBlock]
    useGridVirtualizer->>ScrollContainer: parentRef.current.closest(appflowy-scroll-container)
    Note over useGridVirtualizer,ScrollContainer: Fallback to getScrollParent(parentRef.current) if no closest()
  end

Loading

Flow diagram for embedded database fixed-height layout

flowchart TD
  DatabaseContent[DatabaseContent\nfixedHeight = 300]
  GridProvider[GridProvider\nclass: flex min-h-0 flex-1 flex-col]
  Grid[Grid\n.database-grid min-h-0 flex-1 flex-col]
  GridVirtualizer[GridVirtualizer\nappflowy-custom-scroller\nmin-h-0 flex-1 when embedded]
  CardList[CardList\nappflowy-custom-scroller\nmin-h-0 flex-1\nmaxHeight = 2000]

  DatabaseContent --> GridProvider
  GridProvider --> Grid
  Grid --> GridVirtualizer
  GridVirtualizer --> CardList

Loading

File-Level Changes

Change	Details	Files
Make board CardList respect column height and scroll internally instead of using a fixed large height.	Introduce a reusable CARD_LIST_STYLE object with maxHeight and overflowY auto based on existing CARD_LIST_MAX_HEIGHT. Change CardList container classes to include min-h-0 and flex-1 so it can shrink/grow within the column. Replace inline style object on the CardList container with the shared CARD_LIST_STYLE while keeping the custom scroller class.	src/components/database/components/board/column/CardList.tsx
Fix grid virtualizer scroll behavior so embedded databases scroll within their own viewport instead of the outer page.	Update getScrollElement to return parentRef directly for document-block (embedded) databases, avoiding closest('.appflowy-scroll-container'). Keep existing scroll parent resolution for non-embedded databases using closest scroll container or getScrollParent fallback. Add isDocumentBlock to the getScrollElement dependency array to ensure correct behavior when context changes.	src/components/database/components/grid/grid-table/useGridVirtualizer.ts
Ensure the grid table uses flexbox with proper min-height constraints so it stays within the fixed embedded panel and scrolls internally.	Add min-h-0 to the database-grid wrapper so its flex children can shrink within the embedded height constraints while still using flex-1. Preserve existing flex layout, view-specific class name, and full width behavior for the grid container.	src/components/database/grid/Grid.tsx
Adjust GridProvider layout so grid content respects the parent’s fixed height and can scroll without overflowing.	Change GridProvider root div to use flex, flex-col, min-h-0, and flex-1 instead of only flex-1. Ensure children (e.g., GridVirtualizer) can use flex-1 without forcing the container to grow beyond its allotted space.	src/components/database/grid/GridProvider.tsx
Make the grid virtualizer container participate correctly in the embedded flex layout while keeping scroll behavior.	Wrap GridVirtualizer root classes in cn() and conditionally add min-h-0 flex-1 when rendering in a document block. Retain vertical and horizontal auto overflow plus custom scrollbar/hide-horizontal-scrollbar behavior for all contexts.	src/components/database/components/grid/grid-table/GridVirtualizer.tsx
Stabilize embedded database block height by defaulting to a fixed 300px viewport.	Introduce EMBEDDED_DATABASE_FIXED_HEIGHT constant set to 300. Default the DatabaseContent fixedHeight prop to the constant so embedded database blocks use a 300px viewport unless a different fixedHeight is explicitly provided.	src/components/editor/components/blocks/database/components/DatabaseContent.tsx
Simplify and broaden block selection styling so selecting a database block tints the entire block instead of just inner elements.	Replace the targeted .database-tabs, .grid-row-filed-cell, .column selector under database block types with a single @apply bg-fill-theme-select on the whole block element for grid, board, and calendar. Leave simple_table and other block types’ selection styles unchanged.	src/components/editor/editor.scss

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The CARD_LIST_MAX_HEIGHT magic value is still baked into CardList as both a constant and a maxHeight cap; consider either deriving it from layout context or centralizing it with other layout constants so changing embedded sizing doesn’t require hunting down multiple hard-coded values.
• The default EMBEDDED_DATABASE_FIXED_HEIGHT = 300 is now applied any time fixedHeight is omitted; if some embedded usages relied on the previous 'auto' behavior, you may want to make this default opt-in via the caller or a feature flag instead of enforcing it at the component level.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `CARD_LIST_MAX_HEIGHT` magic value is still baked into `CardList` as both a constant and a maxHeight cap; consider either deriving it from layout context or centralizing it with other layout constants so changing embedded sizing doesn’t require hunting down multiple hard-coded values.
- The default `EMBEDDED_DATABASE_FIXED_HEIGHT = 300` is now applied any time `fixedHeight` is omitted; if some embedded usages relied on the previous 'auto' behavior, you may want to make this default opt-in via the caller or a feature flag instead of enforcing it at the component level.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}