fix: The sticky header was being rendered via a portal to the top of the page (#235)

layout for all databases. For inline databases embedded in documents,
   this caused a duplicate header - one at the top of the page and one
   inside the grid.

Author: appflowy

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

@@ -194,27 +194,29 @@ function GridVirtualizer({ columns }: { columns: RenderColumn[] }) {
             );
           })}
         </div>
-        <DatabaseStickyTopOverlay>
-          <GridStickyHeader
-            // eslint-disable-next-line
-            // @ts-ignore
-            row={{
-              index: 0,
-            }}
-            ref={stickyHeaderRef}
-            columns={columns}
-            data={data}
-            totalSize={totalSize}
-            columnItems={columnItems}
-            onScrollLeft={(scrollLeft) => {
-              parentRef.current?.scrollTo({
-                left: scrollLeft,
-                behavior: 'auto',
-              });
-            }}
-            onResizeColumnStart={handleResizeStart}
-          />
-        </DatabaseStickyTopOverlay>
+        {!isDocumentBlock && (
+          <DatabaseStickyTopOverlay>
+            <GridStickyHeader
+              // eslint-disable-next-line
+              // @ts-ignore
+              row={{
+                index: 0,
+              }}
+              ref={stickyHeaderRef}
+              columns={columns}
+              data={data}
+              totalSize={totalSize}
+              columnItems={columnItems}
+              onScrollLeft={(scrollLeft) => {
+                parentRef.current?.scrollTo({
+                  left: scrollLeft,
+                  behavior: 'auto',
+                });
+              }}
+              onResizeColumnStart={handleResizeStart}
+            />
+          </DatabaseStickyTopOverlay>
+        )}
 
         <DatabaseStickyBottomOverlay scrollElement={virtualizer.scrollElement}>
           <DatabaseStickyHorizontalScrollbar