@flamingo-stack/openframe-frontend-core 0.0.846 → 0.0.847

package/dist/components/ui/file-manager/file-manager-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-manager-table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/file-manager/file-manager-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAQrD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,aAAa,EACb,cAAqB,EACrB,OAAO,EAAE,WAAmB,EAC5B,cAAsB,EACtB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,EAAE,qBAAqB,+BA+HvB"}
+{"version":3,"file":"file-manager-table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/file-manager/file-manager-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAQrD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,aAAa,EACb,cAAqB,EACrB,OAAO,EAAE,WAAmB,EAC5B,cAAsB,EACtB,YAAY,EACZ,WAAW,EACX,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,GACV,EAAE,qBAAqB,+BAuFvB"}

package/dist/components/ui/file-manager/file-manager-table.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useMemo } from "react";
 import { cn } from "../../../utils/cn.js";
 import { Checkbox } from "../checkbox.js";
 import { LoadingItems, useLoadingScope } from "../loading-scope.js";
@@ -36,99 +36,68 @@ function FileManagerTable({
   const someSelected = useMemo(() => {
     return selectedFiles.length > 0 && selectedFiles.length < files.length;
   }, [files.length, selectedFiles.length]);
-  const containerRef = useRef(null);
-  const [measuredHeight, setTableHeight] = useState(null);
-  const tableHeight = loading || files.length === 0 ? null : measuredHeight;
-  useLayoutEffect(() => {
-    if (loading || files.length === 0) return void 0;
-    const handleResize = () => {
-      const node = containerRef.current;
-      if (!node) return;
-      const rect = node.getBoundingClientRect();
-      const availableHeight = window.innerHeight - rect.top;
-      setTableHeight(availableHeight > 0 ? availableHeight : null);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize, true);
-    const resizeObserver = new ResizeObserver(handleResize);
-    const parent = containerRef.current?.parentElement;
-    if (parent) {
-      resizeObserver.observe(parent);
-    } else if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize, true);
-      resizeObserver.disconnect();
-    };
-  }, [loading, files.length]);
   const handleSelectAll = (checked) => {
     onSelectAll?.(checked);
   };
   if (!loading && files.length === 0) {
     return /* @__PURE__ */ jsx(FileManagerEmpty, {});
   }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: cn("flex flex-col rounded-lg border border-ods-border bg-ods-bg", className),
-      style: tableHeight ? { height: `${tableHeight}px` } : void 0,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4", children: [
-          showCheckboxes && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: FILE_MANAGER_CHECKBOX_CELL_CLASS,
-              inert: loading || void 0,
-              "aria-hidden": loading || void 0,
-              children: /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  checked: allSelected || someSelected,
-                  onCheckedChange: handleSelectAll,
-                  boxClassName: FILE_MANAGER_CHECKBOX_BOX_CLASS
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: cn(FILE_MANAGER_NAME_CELL_CLASS, HEADER_LABEL_CLASS), children: "NAME" }),
-          /* @__PURE__ */ jsx("div", { className: cn(FILE_MANAGER_SIZE_CELL_BOX_CLASS, HEADER_LABEL_CLASS), children: "SIZE" }),
-          /* @__PURE__ */ jsx("div", { className: cn(FILE_MANAGER_MODIFIED_CELL_BOX_CLASS, HEADER_LABEL_CLASS), children: "EDITED" }),
-          /* @__PURE__ */ jsx("div", { className: FILE_MANAGER_ACTIONS_CELL_BOX_CLASS })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 divide-y divide-ods-border overflow-auto rounded-b-lg", children: loading ? (
-          // A folder listing has no page size: a typical folder's rows, each the row's own loading form.
-          /* @__PURE__ */ jsx(LoadingItems, { count: FILE_MANAGER_SKELETON_ROWS, children: () => /* @__PURE__ */ jsx(FileManagerTableRow, { loading: true, showCheckbox: showCheckboxes, showPath: isSearchResult, "data-loading-item": true }) })
-        ) : files.map((file) => /* @__PURE__ */ jsx(
-          FileManagerTableRow,
+  return (
+    // The height its parent gives it, both forms: the rows scroll inside, under the header. Not
+    // the window's: whatever is below the parent (a docked composer, a page's padding) would
+    // hide the last rows under it. A parent of no definite height lets the table grow with its rows.
+    /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col rounded-lg border border-ods-border bg-ods-bg", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4", children: [
+        showCheckboxes && /* @__PURE__ */ jsx(
+          "div",
           {
-            file,
-            isSelected: selectedFiles.includes(file.id),
-            showCheckbox: showCheckboxes,
-            showPath: isSearchResult,
-            onSelect: (selected) => onSelectFile?.(file.id, selected),
-            onClick: () => {
-              if (isSearchResult) {
-                onFileClick?.(file);
-              } else if (file.type === "folder") {
-                onFolderOpen?.(file);
-              }
-            },
-            onDoubleClick: () => {
-              if (file.type === "folder" && !isSearchResult) {
-                onFolderOpen?.(file);
+            className: FILE_MANAGER_CHECKBOX_CELL_CLASS,
+            inert: loading || void 0,
+            "aria-hidden": loading || void 0,
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: allSelected || someSelected,
+                onCheckedChange: handleSelectAll,
+                boxClassName: FILE_MANAGER_CHECKBOX_BOX_CLASS
               }
-            },
-            onActionClick: (action) => onFileAction?.(action, file.id),
-            "data-loading-item": true
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn(FILE_MANAGER_NAME_CELL_CLASS, HEADER_LABEL_CLASS), children: "NAME" }),
+        /* @__PURE__ */ jsx("div", { className: cn(FILE_MANAGER_SIZE_CELL_BOX_CLASS, HEADER_LABEL_CLASS), children: "SIZE" }),
+        /* @__PURE__ */ jsx("div", { className: cn(FILE_MANAGER_MODIFIED_CELL_BOX_CLASS, HEADER_LABEL_CLASS), children: "EDITED" }),
+        /* @__PURE__ */ jsx("div", { className: FILE_MANAGER_ACTIONS_CELL_BOX_CLASS })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 divide-y divide-ods-border overflow-auto rounded-b-lg", children: loading ? (
+        // A folder listing has no page size: a typical folder's rows, each the row's own loading form.
+        /* @__PURE__ */ jsx(LoadingItems, { count: FILE_MANAGER_SKELETON_ROWS, children: () => /* @__PURE__ */ jsx(FileManagerTableRow, { loading: true, showCheckbox: showCheckboxes, showPath: isSearchResult, "data-loading-item": true }) })
+      ) : files.map((file) => /* @__PURE__ */ jsx(
+        FileManagerTableRow,
+        {
+          file,
+          isSelected: selectedFiles.includes(file.id),
+          showCheckbox: showCheckboxes,
+          showPath: isSearchResult,
+          onSelect: (selected) => onSelectFile?.(file.id, selected),
+          onClick: () => {
+            if (isSearchResult) {
+              onFileClick?.(file);
+            } else if (file.type === "folder") {
+              onFolderOpen?.(file);
+            }
+          },
+          onDoubleClick: () => {
+            if (file.type === "folder" && !isSearchResult) {
+              onFolderOpen?.(file);
+            }
           },
-          file.id
-        )) })
-      ]
-    }
+          onActionClick: (action) => onFileAction?.(action, file.id),
+          "data-loading-item": true
+        },
+        file.id
+      )) })
+    ] })
   );
 }
 export {

package/dist/components/ui/file-manager/index.cjs

@@ -423,99 +423,68 @@ function FileManagerTable({
   const someSelected = _react.useMemo.call(void 0, () => {
     return selectedFiles.length > 0 && selectedFiles.length < files.length;
   }, [files.length, selectedFiles.length]);
-  const containerRef = _react.useRef.call(void 0, null);
-  const [measuredHeight, setTableHeight] = _react.useState.call(void 0, null);
-  const tableHeight = loading || files.length === 0 ? null : measuredHeight;
-  _react.useLayoutEffect.call(void 0, () => {
-    if (loading || files.length === 0) return void 0;
-    const handleResize = () => {
-      const node = containerRef.current;
-      if (!node) return;
-      const rect = node.getBoundingClientRect();
-      const availableHeight = window.innerHeight - rect.top;
-      setTableHeight(availableHeight > 0 ? availableHeight : null);
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("scroll", handleResize, true);
-    const resizeObserver = new ResizeObserver(handleResize);
-    const parent = _optionalChain([containerRef, 'access', _7 => _7.current, 'optionalAccess', _8 => _8.parentElement]);
-    if (parent) {
-      resizeObserver.observe(parent);
-    } else if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("scroll", handleResize, true);
-      resizeObserver.disconnect();
-    };
-  }, [loading, files.length]);
   const handleSelectAll = (checked) => {
-    _optionalChain([onSelectAll, 'optionalCall', _9 => _9(checked)]);
+    _optionalChain([onSelectAll, 'optionalCall', _7 => _7(checked)]);
   };
   if (!loading && files.length === 0) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileManagerEmpty, {});
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "div",
-    {
-      ref: containerRef,
-      className: _chunk63A4GZMBcjs.cn.call(void 0, "flex flex-col rounded-lg border border-ods-border bg-ods-bg", className),
-      style: tableHeight ? { height: `${tableHeight}px` } : void 0,
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4", children: [
-          showCheckboxes && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "div",
-            {
-              className: FILE_MANAGER_CHECKBOX_CELL_CLASS,
-              inert: loading || void 0,
-              "aria-hidden": loading || void 0,
-              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunk5SZ4ILU3cjs.Checkbox,
-                {
-                  checked: allSelected || someSelected,
-                  onCheckedChange: handleSelectAll,
-                  boxClassName: FILE_MANAGER_CHECKBOX_BOX_CLASS
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk63A4GZMBcjs.cn.call(void 0, FILE_MANAGER_NAME_CELL_CLASS, HEADER_LABEL_CLASS), children: "NAME" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk63A4GZMBcjs.cn.call(void 0, FILE_MANAGER_SIZE_CELL_BOX_CLASS, HEADER_LABEL_CLASS), children: "SIZE" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk63A4GZMBcjs.cn.call(void 0, FILE_MANAGER_MODIFIED_CELL_BOX_CLASS, HEADER_LABEL_CLASS), children: "EDITED" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: FILE_MANAGER_ACTIONS_CELL_BOX_CLASS })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 divide-y divide-ods-border overflow-auto rounded-b-lg", children: loading ? (
-          // A folder listing has no page size: a typical folder's rows, each the row's own loading form.
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63A4GZMBcjs.LoadingItems, { count: FILE_MANAGER_SKELETON_ROWS, children: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileManagerTableRow, { loading: true, showCheckbox: showCheckboxes, showPath: isSearchResult, "data-loading-item": true }) })
-        ) : files.map((file) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          FileManagerTableRow,
+  return (
+    // The height its parent gives it, both forms: the rows scroll inside, under the header. Not
+    // the window's: whatever is below the parent (a docked composer, a page's padding) would
+    // hide the last rows under it. A parent of no definite height lets the table grow with its rows.
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk63A4GZMBcjs.cn.call(void 0, "flex h-full flex-col rounded-lg border border-ods-border bg-ods-bg", className), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4", children: [
+        showCheckboxes && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
           {
-            file,
-            isSelected: selectedFiles.includes(file.id),
-            showCheckbox: showCheckboxes,
-            showPath: isSearchResult,
-            onSelect: (selected) => _optionalChain([onSelectFile, 'optionalCall', _10 => _10(file.id, selected)]),
-            onClick: () => {
-              if (isSearchResult) {
-                _optionalChain([onFileClick, 'optionalCall', _11 => _11(file)]);
-              } else if (file.type === "folder") {
-                _optionalChain([onFolderOpen, 'optionalCall', _12 => _12(file)]);
-              }
-            },
-            onDoubleClick: () => {
-              if (file.type === "folder" && !isSearchResult) {
-                _optionalChain([onFolderOpen, 'optionalCall', _13 => _13(file)]);
+            className: FILE_MANAGER_CHECKBOX_CELL_CLASS,
+            inert: loading || void 0,
+            "aria-hidden": loading || void 0,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunk5SZ4ILU3cjs.Checkbox,
+              {
+                checked: allSelected || someSelected,
+                onCheckedChange: handleSelectAll,
+                boxClassName: FILE_MANAGER_CHECKBOX_BOX_CLASS
               }
-            },
-            onActionClick: (action) => _optionalChain([onFileAction, 'optionalCall', _14 => _14(action, file.id)]),
-            "data-loading-item": true
+            )
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk63A4GZMBcjs.cn.call(void 0, FILE_MANAGER_NAME_CELL_CLASS, HEADER_LABEL_CLASS), children: "NAME" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk63A4GZMBcjs.cn.call(void 0, FILE_MANAGER_SIZE_CELL_BOX_CLASS, HEADER_LABEL_CLASS), children: "SIZE" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk63A4GZMBcjs.cn.call(void 0, FILE_MANAGER_MODIFIED_CELL_BOX_CLASS, HEADER_LABEL_CLASS), children: "EDITED" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: FILE_MANAGER_ACTIONS_CELL_BOX_CLASS })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 divide-y divide-ods-border overflow-auto rounded-b-lg", children: loading ? (
+        // A folder listing has no page size: a typical folder's rows, each the row's own loading form.
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63A4GZMBcjs.LoadingItems, { count: FILE_MANAGER_SKELETON_ROWS, children: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FileManagerTableRow, { loading: true, showCheckbox: showCheckboxes, showPath: isSearchResult, "data-loading-item": true }) })
+      ) : files.map((file) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        FileManagerTableRow,
+        {
+          file,
+          isSelected: selectedFiles.includes(file.id),
+          showCheckbox: showCheckboxes,
+          showPath: isSearchResult,
+          onSelect: (selected) => _optionalChain([onSelectFile, 'optionalCall', _8 => _8(file.id, selected)]),
+          onClick: () => {
+            if (isSearchResult) {
+              _optionalChain([onFileClick, 'optionalCall', _9 => _9(file)]);
+            } else if (file.type === "folder") {
+              _optionalChain([onFolderOpen, 'optionalCall', _10 => _10(file)]);
+            }
           },
-          file.id
-        )) })
-      ]
-    }
+          onDoubleClick: () => {
+            if (file.type === "folder" && !isSearchResult) {
+              _optionalChain([onFolderOpen, 'optionalCall', _11 => _11(file)]);
+            }
+          },
+          onActionClick: (action) => _optionalChain([onFileAction, 'optionalCall', _12 => _12(action, file.id)]),
+          "data-loading-item": true
+        },
+        file.id
+      )) })
+    ] })
   );
 }
 
@@ -591,8 +560,8 @@ function FileManager({
     return items;
   }, [currentPath]);
   const handleBreadcrumbClick = (path) => {
-    _optionalChain([onBreadcrumbClick, 'optionalCall', _15 => _15(path)]);
-    _optionalChain([onNavigate, 'optionalCall', _16 => _16(path)]);
+    _optionalChain([onBreadcrumbClick, 'optionalCall', _13 => _13(path)]);
+    _optionalChain([onNavigate, 'optionalCall', _14 => _14(path)]);
   };
   const handleFolderOpen = (file) => {
     let newPath;
@@ -612,14 +581,14 @@ function FileManager({
         newPath = currentPath + separator + file.name;
       }
     }
-    _optionalChain([onFolderOpen, 'optionalCall', _17 => _17(file)]);
-    _optionalChain([onNavigate, 'optionalCall', _18 => _18(newPath)]);
+    _optionalChain([onFolderOpen, 'optionalCall', _15 => _15(file)]);
+    _optionalChain([onNavigate, 'optionalCall', _16 => _16(newPath)]);
   };
   const handleSelectAll = (selected) => {
-    _optionalChain([onSelectAll, 'optionalCall', _19 => _19(selected)]);
+    _optionalChain([onSelectAll, 'optionalCall', _17 => _17(selected)]);
   };
   const handleSelectFile = (fileId, selected) => {
-    _optionalChain([onSelectFile, 'optionalCall', _20 => _20(fileId, selected)]);
+    _optionalChain([onSelectFile, 'optionalCall', _18 => _18(fileId, selected)]);
   };
   return (
     // One tree in both forms (nothing remounts when the folder answers); the region says it is loading, once.
@@ -637,11 +606,11 @@ function FileManager({
               {
                 canPaste,
                 hasSelection: selectedFiles.length > 0,
-                onNewFolder: () => _optionalChain([onFileAction, 'optionalCall', _21 => _21("new-folder")]),
-                onPaste: () => _optionalChain([onFileAction, 'optionalCall', _22 => _22("paste")]),
-                onCopy: () => _optionalChain([onFileAction, 'optionalCall', _23 => _23("copy")]),
-                onCut: () => _optionalChain([onFileAction, 'optionalCall', _24 => _24("cut")]),
-                onUpload: () => _optionalChain([onFileAction, 'optionalCall', _25 => _25("upload")]),
+                onNewFolder: () => _optionalChain([onFileAction, 'optionalCall', _19 => _19("new-folder")]),
+                onPaste: () => _optionalChain([onFileAction, 'optionalCall', _20 => _20("paste")]),
+                onCopy: () => _optionalChain([onFileAction, 'optionalCall', _21 => _21("copy")]),
+                onCut: () => _optionalChain([onFileAction, 'optionalCall', _22 => _22("cut")]),
+                onUpload: () => _optionalChain([onFileAction, 'optionalCall', _23 => _23("upload")]),
                 onSelectAll: () => handleSelectAll(true)
               }
             )
@@ -651,7 +620,7 @@ function FileManager({
             {
               userValue: true,
               value: searchQuery,
-              onChange: (e) => _optionalChain([onSearch, 'optionalCall', _26 => _26(e.target.value)]),
+              onChange: (e) => _optionalChain([onSearch, 'optionalCall', _24 => _24(e.target.value)]),
               placeholder: "Search...",
               disabled: disableSearch,
               startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZ74QE57Tcjs.SearchIcon, {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.846",
+  "version": "0.0.847",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/ui/file-manager/file-manager-table.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useMemo } from 'react';
 import { cn } from '../../../utils/cn';
 import { Checkbox } from '../checkbox';
 import { LoadingItems, useLoadingScope } from '../loading-scope';
@@ -45,45 +45,6 @@ export function FileManagerTable({
     return selectedFiles.length > 0 && selectedFiles.length < files.length;
   }, [files.length, selectedFiles.length]);
 
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [measuredHeight, setTableHeight] = useState<number | null>(null);
-  // There is nothing to size while the skeleton or the empty state is showing,
-  // and that is knowable during render — masking it here means the effect no
-  // longer has to write `null` back into state (a second render pass) every
-  // time a fetch starts or a filter empties the list.
-  const tableHeight = loading || files.length === 0 ? null : measuredHeight;
-
-  useLayoutEffect(() => {
-    if (loading || files.length === 0) return undefined;
-
-    const handleResize = () => {
-      const node = containerRef.current;
-      if (!node) return;
-      const rect = node.getBoundingClientRect();
-      const availableHeight = window.innerHeight - rect.top;
-      setTableHeight(availableHeight > 0 ? availableHeight : null);
-    };
-
-    handleResize();
-
-    window.addEventListener('resize', handleResize);
-    window.addEventListener('scroll', handleResize, true);
-
-    const resizeObserver = new ResizeObserver(handleResize);
-    const parent = containerRef.current?.parentElement;
-    if (parent) {
-      resizeObserver.observe(parent);
-    } else if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      window.removeEventListener('scroll', handleResize, true);
-      resizeObserver.disconnect();
-    };
-  }, [loading, files.length]);
-
   const handleSelectAll = (checked: boolean) => {
     onSelectAll?.(checked);
   };
@@ -93,11 +54,10 @@ export function FileManagerTable({
   }
 
   return (
-    <div
-      ref={containerRef}
-      className={cn('flex flex-col rounded-lg border border-ods-border bg-ods-bg', className)}
-      style={tableHeight ? { height: `${tableHeight}px` } : undefined}
-    >
+    // The height its parent gives it, both forms: the rows scroll inside, under the header. Not
+    // the window's: whatever is below the parent (a docked composer, a page's padding) would
+    // hide the last rows under it. A parent of no definite height lets the table grow with its rows.
+    <div className={cn('flex h-full flex-col rounded-lg border border-ods-border bg-ods-bg', className)}>
       {/* ONE header in both forms: the column labels are copy, and while the folder is read the select-all box is the
           real checkbox, inert. */}
       <div className="flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4">