@rebasepro/admin 0.3.0 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/admin",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Rebase CMS — content management views, forms, and routing",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -80,17 +80,16 @@
     "prosemirror-tables": "^1.8.5",
     "prosemirror-transform": "^1.12.0",
     "prosemirror-view": "^1.41.8",
-    "react-compiler-runtime": "1.0.0",
+    "zod": "^3.25.76",
     "react-dropzone": "^14.4.1",
     "react-use-measure": "^2.1.7",
-    "zod": "^3.25.76",
-    "@rebasepro/common": "0.3.0",
-    "@rebasepro/formex": "0.3.0",
-    "@rebasepro/core": "0.3.0",
-    "@rebasepro/schema-inference": "0.3.0",
-    "@rebasepro/types": "0.3.0",
-    "@rebasepro/utils": "0.3.0",
-    "@rebasepro/ui": "0.3.0"
+    "@rebasepro/common": "0.5.0",
+    "@rebasepro/formex": "0.5.0",
+    "@rebasepro/core": "0.5.0",
+    "@rebasepro/schema-inference": "0.5.0",
+    "@rebasepro/utils": "0.5.0",
+    "@rebasepro/types": "0.5.0",
+    "@rebasepro/ui": "0.5.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/collection_editor/pgColumnToProperty.ts

@@ -158,12 +158,29 @@ label: prettifyIdentifier(v) })),
             };
 
         case "array":
-        case "ARRAY":
+        case "ARRAY": {
+            let innerType = "string";
+            let colType: ArrayProperty["columnType"] = undefined;
+            if (udt_name === "_text" || udt_name === "_varchar") {
+                innerType = "string";
+                colType = "text[]";
+            } else if (udt_name === "_int4" || udt_name === "_int2" || udt_name === "_int8") {
+                innerType = "number";
+                colType = "integer[]";
+            } else if (udt_name === "_bool") {
+                innerType = "boolean";
+                colType = "boolean[]";
+            } else if (udt_name === "_numeric") {
+                innerType = "number";
+                colType = "numeric[]";
+            }
             return {
                 type: "array",
                 name: prettifiedName,
-                of: { type: "string" }
+                columnType: colType,
+                of: { type: innerType }
             } as ArrayProperty;
+        }
 
         default:
             // Fallback: treat unknown types as string

package/src/collection_editor/ui/collection_editor/CollectionRelationsTab.tsx

@@ -85,7 +85,7 @@ export function CollectionRelationsTab() {
                     <Button variant="filled" color="neutral" onClick={() => {
                         setEditingRelationIndex(-1);
                         setEditingRelationState({ relationName: "",
-target: "" as unknown as Relation["target"],
+target: "",
 cardinality: "many",
 direction: "owning" });
                     }}>
@@ -134,7 +134,7 @@ direction: "owning" });
                         <Button variant="text" onClick={() => {
                             setEditingRelationIndex(-1);
                             setEditingRelationState({ relationName: "",
-target: "" as unknown as Relation["target"],
+target: "",
 cardinality: "many",
 direction: "owning" });
                         }}>Create your first relation</Button>

package/src/collection_editor/ui/collection_editor/PropertyEditView.tsx

@@ -50,7 +50,8 @@ import { MarkdownPropertyField } from "./properties/MarkdownPropertyField";
 import { isValidRegExp, mergeDeep } from "@rebasepro/utils";
 
 export type PropertyWithId = Property & {
-    id?: string
+    id?: string;
+    conditions?: import('@rebasepro/types').PropertyConditions;
 };
 
 export type OnPropertyChangedParams = {

package/src/collection_editor/ui/collection_editor/PropertyFieldPreview.tsx

@@ -76,7 +76,7 @@ export function PropertyFieldPreview({
 
             <ErrorBoundary>
                 <Typography variant="caption" component="span" className="ml-auto shrink-0 text-text-disabled dark:text-text-disabled-dark font-mono bg-surface-100 dark:bg-surface-900 px-1.5 py-0.5 rounded mr-8">
-                    {("columnType" in property ? (property as Property & { columnType?: string }).columnType : undefined) || property.type}
+                    {"columnType" in property ? (property as { columnType?: string }).columnType ?? property.type : property.type}
                 </Typography>
             </ErrorBoundary>
 
@@ -146,7 +146,7 @@ export function NonEditablePropertyPreview({
 
             {property && !isPropertyBuilder(property) && <ErrorBoundary>
                 <Typography variant="caption" component="span" className="ml-auto shrink-0 text-text-disabled dark:text-text-disabled-dark font-mono bg-surface-100 dark:bg-surface-900 px-1.5 py-0.5 rounded mr-8">
-                    {("columnType" in property ? (property as Property & { columnType?: string }).columnType : undefined) || property.type}
+                    {"columnType" in property ? (property as { columnType?: string }).columnType ?? property.type : property.type}
                 </Typography>
             </ErrorBoundary>}
         </Paper>

package/src/collection_editor/ui/collection_editor/properties/conditions/ConditionsEditor.tsx

@@ -18,6 +18,7 @@ import {
 } from "@rebasepro/ui";
 import { getFieldConfig, DEFAULT_FIELD_CONFIGS } from "../../../../_cms_internals";
 import { Properties, Property, EnumValueConfig } from "@rebasepro/types";
+import type { PropertyConditions } from "@rebasepro/types";
 import { isPropertyBuilder } from "@rebasepro/common";
 import { PropertyWithId } from "../../PropertyEditView";
 import { getPropertyPaths } from "./property_paths";
@@ -817,7 +818,7 @@ export function ConditionsEditor({ disabled, collectionProperties }: ConditionsE
         : [];
 
     // Get current conditions from form values
-    const conditions: Record<string, unknown> = (values as PropertyWithId & { conditions?: Record<string, unknown> }).conditions ?? {};
+    const conditions: PropertyConditions = values.conditions ?? {};
 
     const activeConditions: { type: ConditionType; group: ConditionGroup }[] = [];
 

package/src/collection_editor/ui/collection_editor/properties/conditions/EnumConditionsEditor.tsx

@@ -528,7 +528,7 @@ export function EnumConditionsEditor({ disabled, collectionProperties }: EnumCon
     const allEnumIds = propertyEnumValues.map(ev => String(ev.id));
 
     // Get conditions from the correct path: values.conditions
-    const conditions = (values as PropertyWithId & { conditions?: Record<string, unknown> }).conditions ?? {};
+    const conditions = values.conditions ?? {};
 
     // Parse existing enum conditions
     const activeConditions: { type: EnumConditionType; config: EnumConditionConfig }[] = [];

package/src/collection_editor/ui/collection_editor/templates/blog_template.ts

@@ -1,4 +1,4 @@
-import { EntityCollection } from "@rebasepro/types";
+import type { EntityCollection } from "@rebasepro/types";
 
 export const blogCollectionTemplate = {
     slug: "blog",

package/src/collection_editor/ui/collection_editor/templates/pages_template.ts

@@ -1,4 +1,4 @@
-import { EntityCollection } from "@rebasepro/types";
+import type { EntityCollection } from "@rebasepro/types";
 
 export const pagesCollectionTemplate = {
     slug: "pages",

package/src/collection_editor/ui/collection_editor/templates/products_template.ts

@@ -1,4 +1,4 @@
-import { EntityCollection } from "@rebasepro/types";
+import type { EntityCollection } from "@rebasepro/types";
 
 export const productsCollectionTemplate = {
     slug: "products",

package/src/collection_editor/ui/collection_editor/templates/users_template.ts

@@ -1,4 +1,4 @@
-import { EntityCollection } from "@rebasepro/types";
+import type { EntityCollection } from "@rebasepro/types";
 
 export const usersCollectionTemplate = {
     slug: "users",

package/src/collection_editor/validateCollectionJson.ts

@@ -52,16 +52,16 @@ function validateProperty(
         return;
     }
 
-    // Check dataType
-    if (!property.dataType) {
+    // Check type
+    if (!property.type) {
         errors.push({
-            path: `${path}.dataType`,
+            path: `${path}.type`,
             message: "Required field is missing"
         });
-    } else if (!VALID_DATA_TYPES.includes(property.dataType as DataType)) {
+    } else if (!VALID_DATA_TYPES.includes(property.type as DataType)) {
         errors.push({
-            path: `${path}.dataType`,
-            message: `Invalid value "${property.dataType}", expected one of: ${VALID_DATA_TYPES.join(", ")}`
+            path: `${path}.type`,
+            message: `Invalid value "${property.type}", expected one of: ${VALID_DATA_TYPES.join(", ")}`
         });
     }
 
@@ -74,7 +74,7 @@ function validateProperty(
     }
 
     // Validate array "of" property
-    if (property.dataType === "array") {
+    if (property.type === "array") {
         if (property.of) {
             if (Array.isArray(property.of)) {
                 property.of.forEach((ofProp: Record<string, unknown>, index: number) => {
@@ -98,12 +98,12 @@ function validateProperty(
     }
 
     // Validate map properties
-    if (property.dataType === "map" && property.properties) {
+    if (property.type === "map" && property.properties) {
         validateProperties(property.properties as Record<string, unknown>, `${path}.properties`, errors);
     }
 
     // Validate reference path
-    if (property.dataType === "reference") {
+    if (property.type === "reference") {
         if (property.path !== undefined && typeof property.path !== "string") {
             errors.push({
                 path: `${path}.path`,
@@ -113,7 +113,7 @@ function validateProperty(
     }
 
     // Validate relation property
-    if (property.dataType === "relation") {
+    if (property.type === "relation") {
         if (property.target !== undefined && typeof property.target !== "string" && typeof property.target !== "function") {
             errors.push({
                 path: `${path}.target`,
@@ -187,7 +187,7 @@ function validateProperty(
     }
 
     // Validate vector property
-    if (property.dataType === "vector") {
+    if (property.type === "vector") {
         if (property.dimensions !== undefined && (typeof property.dimensions !== "number" || isNaN(property.dimensions) || property.dimensions <= 0)) {
             errors.push({
                 path: `${path}.dimensions`,
@@ -197,7 +197,7 @@ function validateProperty(
     }
 
     // Validate storage config for string
-    if (property.dataType === "string" && property.storage) {
+    if (property.type === "string" && property.storage) {
         if (typeof property.storage !== "object") {
             errors.push({
                 path: `${path}.storage`,

package/src/components/CollectionPanel.tsx

@@ -0,0 +1,155 @@
+import type { EntityCollection, ViewMode } from "@rebasepro/types";
+import React, { useMemo } from "react";
+import { EntityCollectionView } from "./EntityCollectionView/EntityCollectionView";
+import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
+import { Typography } from "@rebasepro/ui";
+
+/**
+ * Props for the {@link CollectionPanel} component.
+ *
+ * This is a high-level, consumer-friendly wrapper around {@link EntityCollectionView}
+ * designed for embedding collection views inside custom pages (home pages,
+ * dashboards, entity detail views, etc.).
+ *
+ * At minimum, provide the `path` (collection slug). All other props are optional
+ * overrides that take precedence over the collection's default configuration.
+ *
+ * @group Components
+ */
+export type CollectionPanelProps = {
+    /**
+     * The collection slug / path to display (e.g. "tasks", "clients").
+     * The collection must be registered in the Rebase context.
+     */
+    path: string;
+
+    /**
+     * Optional title displayed above the collection.
+     * Set to `false` to hide the title entirely.
+     * Defaults to the collection's `name`.
+     */
+    title?: string | false;
+
+    /**
+     * Force a specific view mode, overriding the collection's default.
+     */
+    viewMode?: ViewMode;
+
+    /**
+     * Override the sort field.
+     */
+    sort?: [string, "asc" | "desc"];
+
+    /**
+     * Maximum number of entities to display.
+     */
+    limit?: number;
+
+    /**
+     * Whether to sync filter/sort state with URL query params.
+     * Defaults to `false` (embedded panels shouldn't hijack the URL).
+     */
+    updateUrl?: boolean;
+
+    /**
+     * Override the entity open mode when clicking an entity.
+     */
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
+
+    /**
+     * Additional CSS class name for the container.
+     */
+    className?: string;
+
+    /**
+     * Any additional collection-level overrides (e.g. `previewProperties`,
+     * `enabledViews`, `entityActions`, `defaultFilter`, etc.).
+     */
+    collectionOverrides?: Partial<EntityCollection>;
+};
+
+/**
+ * A high-level, reusable wrapper for embedding a Rebase collection view
+ * inside custom pages (dashboards, home pages, entity detail views, etc.).
+ *
+ * Usage:
+ * ```tsx
+ * import { CollectionPanel } from "@rebasepro/admin";
+ *
+ * function MyDashboard() {
+ *     return (
+ *         <div>
+ *             <CollectionPanel path="tasks" title="Pending Tasks" />
+ *             <CollectionPanel
+ *                 path="clients"
+ *                 viewMode="table"
+ *                 collectionOverrides={{
+ *                     defaultFilter: { status: ["!=", "completed"] }
+ *                 }}
+ *             />
+ *         </div>
+ *     );
+ * }
+ * ```
+ *
+ * @group Components
+ */
+export function CollectionPanel({
+    path,
+    title,
+    viewMode,
+    sort,
+    limit,
+    updateUrl = false,
+    openEntityMode,
+    className,
+    collectionOverrides
+}: CollectionPanelProps) {
+    const collectionRegistry = useCollectionRegistryController();
+    const registeredCollection = collectionRegistry.getCollection(path);
+
+    const mergedCollection = useMemo(() => {
+        if (!registeredCollection) return undefined;
+
+        // Build overrides object from shorthand props + explicit overrides
+        const propOverrides: Record<string, unknown> = {};
+        if (viewMode) propOverrides.defaultViewMode = viewMode;
+        if (sort) propOverrides.sort = sort;
+        if (limit) propOverrides.pagination = limit;
+        if (openEntityMode) propOverrides.openEntityMode = openEntityMode;
+
+        return {
+            ...registeredCollection,
+            ...(collectionOverrides ?? {}),
+            ...propOverrides
+        } as EntityCollection;
+    }, [registeredCollection, collectionOverrides, viewMode, sort, limit, openEntityMode]);
+
+    if (!mergedCollection) {
+        return (
+            <div className={className}>
+                <Typography variant="body2" color="secondary">
+                    Collection &quot;{path}&quot; not found.
+                </Typography>
+            </div>
+        );
+    }
+
+    return (
+        <div className={className}>
+            {title !== false && (
+                <Typography
+                    variant="subtitle2"
+                    className="font-bold mb-2 text-surface-700 dark:text-surface-300"
+                >
+                    {title ?? mergedCollection.name}
+                </Typography>
+            )}
+            <EntityCollectionView
+                {...mergedCollection}
+                path={path}
+                updateUrl={updateUrl}
+            />
+        </div>
+    );
+}

package/src/components/DefaultDrawer.tsx

@@ -317,7 +317,7 @@ export function DrawerToggle({
     const { t } = useTranslation();
 
     return (
-        <div className="shrink-0 mt-auto px-2 py-2">
+        <div className="shrink-0 mt-auto px-4 pt-0.5 pb-2">
             <Tooltip
                 title={isExpanded ? t("collapse") : t("expand")}
                 side="right"
@@ -486,7 +486,7 @@ export function DrawerFooterActions({
     }
 
     return (
-        <div className="shrink-0 pb-1" ref={portalRef}>
+        <div className="shrink-0 pt-2 pb-0" ref={portalRef}>
             {avatarComponent && (
                 <div className="flex items-center px-[16px] py-1">
                     <Menu

package/src/components/EntityCollectionTable/internal/popup_field/useDraggable.tsx

@@ -1,5 +1,8 @@
 import React, { useCallback, useEffect } from "react";
 
+/** Tracks events originating inside the inner (non-draggable) area. */
+const innerClicked = new WeakSet<MouseEvent>();
+
 interface DraggableProps {
     containerRef: React.RefObject<HTMLDivElement | null>,
     innerRef: React.RefObject<HTMLDivElement | null>,
@@ -22,7 +25,7 @@ export function useDraggable({
     const listeningRef = React.useRef(false);
 
     const onMouseDown = useCallback((event: MouseEvent) => {
-        if (event.button !== 0 || !containerRef.current || event.defaultPrevented || (event as MouseEvent & { innerClicked?: boolean }).innerClicked) {
+        if (event.button !== 0 || !containerRef.current || event.defaultPrevented || innerClicked.has(event)) {
             return;
         }
 
@@ -41,7 +44,7 @@ export function useDraggable({
     }, [containerRef, onMove]);
 
     const onMouseDownInner = useCallback((event: MouseEvent) => {
-        (event as MouseEvent & { innerClicked?: boolean }).innerClicked = true;
+        innerClicked.add(event);
     }, [])
 
     const onSelect = useCallback((event: Event) => {

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -60,6 +60,19 @@ function getGridColumnsClass(size: CollectionSize): string {
     }
 }
 
+function getScrollParent(element: HTMLElement | null): HTMLElement | null {
+    if (!element) return null;
+    let parent = element.parentElement;
+    while (parent) {
+        const overflowY = window.getComputedStyle(parent).overflowY;
+        if (overflowY === "auto" || overflowY === "scroll") {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return document.documentElement;
+}
+
 /**
  * Card grid view for displaying entities with infinite scroll.
  * Alternative to the EntityCollectionTable for visual browsing.
@@ -78,7 +91,6 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
 }: EntityCollectionCardViewProps<M>) {
 
     const containerRef = useRef<HTMLDivElement>(null);
-    const loadMoreRef = useRef<HTMLDivElement>(null);
     const hasRestoredScroll = useRef(false);
 
     const {
@@ -95,8 +107,8 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
     // Track if we're currently loading to prevent multiple simultaneous load requests
     const isLoadingMore = useRef(false);
 
-    // Keep mutable refs for values used in the IntersectionObserver callback
-    // to avoid re-creating the observer every time pagination state changes.
+    // Keep mutable refs for values used in the scroll listener callback
+    // to avoid re-attaching the listener every time pagination state changes.
     const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize });
     useEffect(() => {
         paginationStateRef.current = { paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize };
@@ -107,43 +119,60 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
         if (!dataLoading) isLoadingMore.current = false;
     }, [dataLoading]);
 
-    // Infinite scroll with Intersection Observer — stable deps only
+    // Infinite scroll and resize observer
     useEffect(() => {
-        const observer = new IntersectionObserver(
-            (entries) => {
-                const { paginationEnabled: pe, noMoreToLoad: nm, dataLoading: dl, itemCount: ic, pageSize: ps } = paginationStateRef.current;
-                if (entries[0].isIntersecting && pe && !dl && !nm && !isLoadingMore.current) {
-                    isLoadingMore.current = true;
-                    setItemCount?.((ic ?? ps) + ps);
-                }
-            },
-            {
-                root: containerRef.current,
-                rootMargin: "400px",
-                threshold: 0
+        const el = containerRef.current;
+        if (!el) return;
+        const scrollEl = getScrollParent(el);
+        if (!scrollEl) return;
+
+        let rafId: number | null = null;
+
+        const update = () => {
+            rafId = null;
+
+            // Infinite scroll: trigger load-more when near the bottom
+            const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;
+            if (
+                pe &&
+                !nm &&
+                !isLoadingMore.current &&
+                scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < 400
+            ) {
+                isLoadingMore.current = true;
+                setItemCount?.((ic ?? ps) + ps);
             }
-        );
+        };
 
-        if (loadMoreRef.current) {
-            observer.observe(loadMoreRef.current);
-        }
+        const onScrollEvent = () => {
+            if (rafId === null) rafId = requestAnimationFrame(update);
+        };
 
-        return () => observer.disconnect();
+        scrollEl.addEventListener("scroll", onScrollEvent, { passive: true });
+        const ro = new ResizeObserver(() => update());
+        ro.observe(scrollEl);
+        update(); // initial measurement
+
+        return () => {
+            scrollEl.removeEventListener("scroll", onScrollEvent);
+            ro.disconnect();
+            if (rafId !== null) cancelAnimationFrame(rafId);
+        };
     }, [setItemCount]);
 
     // Scroll restoration — deferred to after layout paint
     useEffect(() => {
         if (!containerRef.current || !initialScroll || hasRestoredScroll.current || data.length === 0) return;
 
+        const scrollEl = getScrollParent(containerRef.current);
+        if (!scrollEl) return;
+
         let attempts = 0;
         const maxAttempts = 5;
 
         const tryRestore = () => {
-            const el = containerRef.current;
-            if (!el) return;
-
-            if (el.scrollHeight >= initialScroll || attempts >= maxAttempts) {
-                el.scrollTop = initialScroll;
+            if (scrollEl.scrollHeight >= initialScroll || attempts >= maxAttempts) {
+                scrollEl.scrollTop = initialScroll;
                 hasRestoredScroll.current = true;
             } else {
                 attempts++;
@@ -157,11 +186,13 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
     // Scroll tracking: call onScroll when user scrolls
     const lastScrollOffset = useRef(0);
     useEffect(() => {
-        const container = containerRef.current;
-        if (!container || !onScroll) return;
+        const el = containerRef.current;
+        if (!el || !onScroll) return;
+        const scrollEl = getScrollParent(el);
+        if (!scrollEl) return;
 
         const handleScroll = () => {
-            const currentOffset = container.scrollTop;
+            const currentOffset = scrollEl.scrollTop;
             const direction = currentOffset > lastScrollOffset.current ? "forward" : "backward";
             lastScrollOffset.current = currentOffset;
             onScroll({
@@ -171,8 +202,8 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
             });
         };
 
-        container.addEventListener("scroll", handleScroll, { passive: true });
-        return () => container.removeEventListener("scroll", handleScroll);
+        scrollEl.addEventListener("scroll", handleScroll, { passive: true });
+        return () => scrollEl.removeEventListener("scroll", handleScroll);
     }, [onScroll]);
 
     const handleEntityClick = useCallback((entity: Entity<M>) => {
@@ -201,7 +232,7 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
     return (
         <div
             ref={containerRef}
-            className="flex-1 overflow-auto p-4"
+            className="w-full p-4"
         >
             {/* Error state */}
             {dataLoadingError ? (
@@ -215,7 +246,7 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
                     <CircularProgress size="small"/>
                 </div>
             ) : isEmpty ? (
-                <div className="flex items-center justify-center py-12 px-8">
+                <div className="w-full flex items-center justify-center py-12 px-8">
                     {emptyComponent ?? (
                         <Typography variant="label" color="secondary">
                             No entries found
@@ -247,7 +278,6 @@ export function EntityCollectionCardView<M extends Record<string, unknown> = Rec
 
                         {/* Load more trigger / Loading indicator */}
                         <div
-                            ref={loadMoreRef}
                             className="flex items-center justify-center py-8"
                         >
                             {dataLoading && (

package/src/components/EntityCollectionView/EntityCollectionListView.tsx

@@ -139,6 +139,13 @@ function getScrollParent(element: HTMLElement | null): HTMLElement | null {
  * PropertyPreview in list row columns (because it would blow up height).
  */
 function isComplexPropertyType(property: Property): boolean {
+    if (property.type === "array") {
+        const ofProp = "of" in property ? property.of : undefined;
+        const innerProp = ofProp ? (Array.isArray(ofProp) ? ofProp[0] : ofProp) : undefined;
+        if (innerProp && typeof innerProp === "object" && "enum" in innerProp && innerProp.enum) {
+            return false;
+        }
+    }
     return property.type === "array"
         || property.type === "map"
         || property.type === "reference"
@@ -597,7 +604,7 @@ export function EntityCollectionListView<M extends Record<string, unknown> = Rec
                     <CircularProgress size="small"/>
                 </div>
             ) : isEmpty ? (
-                <div className="flex items-center justify-center py-12 px-8">
+                <div className="w-full flex items-center justify-center py-12 px-8">
                     {emptyComponent ?? (
                         <Typography variant="label" color="secondary">
                             No entries found

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -1092,7 +1092,10 @@ export const EntityCollectionView = React.memo(
                 ) : (
                     <div className="flex flex-col w-full h-full">
                         {toolbarNode}
-                        <div className="flex-1 flex flex-col overflow-y-auto">
+                        <div className={cls(
+                            "flex-1 flex flex-col",
+                            (viewMode === "list" || viewMode === "cards") && "overflow-y-auto"
+                        )}>
                             {viewMode === "list" ? (
                                 <div
                                     className={cls(