Stabilize embedded database layout and view switching

src/components/database/components/board/column/CardList.tsx

@@ -18,6 +18,11 @@ export interface RenderCard {
 
 const CARD_LIST_MAX_HEIGHT = 2000;
 
+const CARD_LIST_STYLE = {
+  maxHeight: CARD_LIST_MAX_HEIGHT,
+  overflowY: 'auto',
+} as const;
+
 function CardList({
   data,
   fieldId,
@@ -91,12 +96,8 @@ function CardList({
   return (
     <div
       ref={parentRef}
-      className='appflowy-custom-scroller w-full shrink-0'
-      style={{
-        height: CARD_LIST_MAX_HEIGHT,
-        maxHeight: CARD_LIST_MAX_HEIGHT,
-        overflowY: 'auto',
-      }}
+      className='appflowy-custom-scroller w-full min-h-0 flex-1'
+      style={CARD_LIST_STYLE}
     >
       <div
         style={{

src/components/database/components/grid/grid-table/GridVirtualizer.tsx

@@ -14,6 +14,7 @@ import DatabaseStickyBottomOverlay from '@/components/database/components/sticky
 import DatabaseStickyHorizontalScrollbar from '@/components/database/components/sticky-overlay/DatabaseStickyHorizontalScrollbar';
 import DatabaseStickyTopOverlay from '@/components/database/components/sticky-overlay/DatabaseStickyTopOverlay';
 import { useGridContext } from '@/components/database/grid/useGridContext';
+import { cn } from '@/lib/utils';
 
 import { useColumnResize } from '../grid-column/useColumnResize';
 
@@ -175,7 +176,10 @@ function GridVirtualizer({ columns }: { columns: RenderColumn[] }) {
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         ref={parentRef}
-        className={'appflowy-custom-scroller appflowy-hidden-horizontal-scrollbar'}
+        className={cn(
+          'appflowy-custom-scroller appflowy-hidden-horizontal-scrollbar',
+          isDocumentBlock && 'min-h-0 flex-1'
+        )}
         style={{
           overflowY: 'auto',
           overflowX: 'auto',

src/components/database/components/grid/grid-table/useGridVirtualizer.ts

@@ -29,8 +29,12 @@ export function useGridVirtualizer({ data, columns }: { columns: RenderColumn[];
 
   const getScrollElement = useCallback(() => {
     if (!parentRef.current) return null;
+    // Embedded databases have their own bounded scroll viewport (parentRef itself).
+    // Using the outer page scroll container would let @tanstack/react-virtual call
+    // scrollTo(0) on the document, jumping the user away on view switches.
+    if (isDocumentBlock) return parentRef.current;
     return parentRef.current.closest('.appflowy-scroll-container') || getScrollParent(parentRef.current);
-  }, [parentRef]);
+  }, [parentRef, isDocumentBlock]);
 
   const measureParentOffset = useCallback(() => {
     const scrollElement = getScrollElement();

src/components/database/grid/Grid.tsx

@@ -22,7 +22,7 @@ export function Grid() {
     <GridProvider rowOrders={rowOrders}>
       <div
         data-testid='database-grid'
-        className={`database-grid relative grid-table-${viewId} flex w-full flex-1 flex-col`}
+        className={`database-grid relative grid-table-${viewId} flex w-full min-h-0 flex-1 flex-col`}
       >
         <GridVirtualizer columns={fields} />
       </div>

src/components/database/grid/GridProvider.tsx

@@ -128,7 +128,7 @@ export const GridProvider = ({ children, rowOrders }: { children: React.ReactNod
 
   return (
     <GridContext.Provider value={contextValue}>
-      <div ref={ref} className={'flex-1'}>
+      <div ref={ref} className={'flex min-h-0 flex-1 flex-col'}>
         {children}
       </div>
     </GridContext.Provider>

src/components/editor/components/blocks/database/components/DatabaseContent.tsx

@@ -6,6 +6,8 @@ import { getPublishedDatabaseRenderRowMap } from '@/application/publish-snapshot
 import { LoadView, LoadViewMeta, UIVariant, YDoc } from '@/application/types';
 import { Database } from '@/components/database';
 
+const EMBEDDED_DATABASE_FIXED_HEIGHT = 300;
+
 interface DatabaseContentProps {
   /**
    * The base/primary view ID for the embedded database.
@@ -62,7 +64,7 @@ export const DatabaseContent = ({
   onViewAdded,
   onViewIdsChanged,
   context,
-  fixedHeight,
+  fixedHeight = EMBEDDED_DATABASE_FIXED_HEIGHT,
   onRendered,
 }: DatabaseContentProps) => {
   const { t } = useTranslation();

src/components/editor/editor.scss

@@ -76,9 +76,7 @@
   }
 
   &.block-element[data-block-type="grid"], &.block-element[data-block-type="board"], &.block-element[data-block-type="calendar"] {
-    .database-tabs, .grid-row-filed-cell, .column {
-      @apply bg-fill-theme-select;
-    }
+    @apply bg-fill-theme-select;
   }
 
   &.block-element[data-block-type="simple_table"] {