@firecms/core 3.0.0-beta.13 → 3.0.0-beta.15

package/src/components/ClearFilterSortButton.tsx

@@ -18,7 +18,7 @@ export function ClearFilterSortButton({
     if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
         let label;
         if (filterIsSet && sortIsSet) {
-            label = "Clear filter and sort";
+            label = "Clear filter/sort";
         } else if (filterIsSet) {
             label = "Clear filter";
         } else {

package/src/components/ConfirmationDialog.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton } from "@firecms/ui";
 
 export function ConfirmationDialog({
-                                             open,
-                                             onAccept,
-                                             onCancel,
-                                             title,
-                                             loading,
-                                             body
-                                         }: {
+                                       open,
+                                       onAccept,
+                                       onCancel,
+                                       title,
+                                       loading,
+                                       body
+                                   }: {
     open: boolean,
     onAccept: () => void,
     onCancel: () => void,
@@ -29,6 +29,7 @@ export function ConfirmationDialog({
 
             <DialogActions>
                 <Button
+                    color={"primary"}
                     variant={"text"}
                     onClick={onCancel}
                     autoFocus>Cancel</Button>
@@ -38,7 +39,7 @@ export function ConfirmationDialog({
                     type="submit"
                     loading={loading}
                     onClick={onAccept}
-                >
+                    autoFocus>
                     Ok
                 </LoadingButton>
             </DialogActions>

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -33,6 +33,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                                                                   entity,
                                                                                   collection,
                                                                                   fullPath,
+                                                                                  fullIdPath,
                                                                                   width,
                                                                                   frozen,
                                                                                   isSelected,
@@ -50,6 +51,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                                                                   entity: Entity<any>,
                                                                                   collection?: EntityCollection<any>,
                                                                                   fullPath?: string,
+                                                                                  fullIdPath?: string,
                                                                                   width: number,
                                                                                   frozen?: boolean,
                                                                                   size: CollectionSize,
@@ -105,8 +107,10 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();
                                     action.onClick({
+                                        view: "collection",
                                         entity,
                                         fullPath,
+                                        fullIdPath,
                                         collection,
                                         context,
                                         selectionController,
@@ -134,8 +138,10 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         action.onClick({
+                                            view: "collection",
                                             entity,
                                             fullPath,
+                                            fullIdPath,
                                             collection,
                                             context,
                                             selectionController,

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -4,10 +4,12 @@ import {
     CMSType,
     Entity,
     EntityReference,
+    ReferenceProperty,
     ResolvedArrayProperty,
     ResolvedNumberProperty,
     ResolvedProperty,
-    ResolvedStringProperty
+    ResolvedStringProperty,
+    StringProperty
 } from "../../types";
 
 import { VirtualTableInput } from "../VirtualTable/fields/VirtualTableInput";
@@ -251,7 +253,27 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
 
         if (!customField && (!customPreview || selected)) {
             const isAStorageProperty = isStorageProperty(property);
-            if (isAStorageProperty) {
+            if (property.dataType === "string" && (property as StringProperty).reference?.path) {
+                const stringProperty = property as StringProperty;
+                const path = stringProperty.reference?.path as string;
+                const referenceProperty = stringProperty.reference as ReferenceProperty;
+                const referenceValue = internalValue ? new EntityReference(internalValue, path) : undefined;
+                innerComponent =
+                    <TableReferenceField name={propertyKey as string}
+                                         internalValue={referenceValue}
+                                         updateValue={(v) => updateValue(v ? (v as EntityReference).id : null)}
+                                         disabled={disabled}
+                                         size={size}
+                                         path={path}
+                                         multiselect={false}
+                                         previewProperties={referenceProperty.previewProperties}
+                                         includeId={referenceProperty.includeId}
+                                         includeEntityLink={referenceProperty.includeEntityLink}
+                                         title={stringProperty.name}
+                                         forceFilter={referenceProperty.forceFilter}
+                    />;
+                allowScroll = false;
+            } else if (isAStorageProperty) {
                 innerComponent = <TableStorageUpload error={validationError ?? error}
                                                      disabled={disabled}
                                                      focused={selected}
@@ -310,7 +332,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          updateValue={updateValue}
                     />;
                     fullHeight = true;
-                } else if (stringProperty.markdown || !stringProperty.storage) {
+                } else if (stringProperty.markdown || !stringProperty.storage || !stringProperty.reference) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
                     innerComponent = <VirtualTableInput error={validationError ?? error}
                                                         disabled={disabled}
@@ -394,7 +416,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                     size={size}
                                     multiselect={true}
                                     path={arrayProperty.of.path}
-                                    previewProperties={arrayProperty.of.previewProperties}
+                                    previewProperties={arrayProperty.of.previewKeys}
                                     title={arrayProperty.name}
                                     forceFilter={arrayProperty.of.forceFilter}
                                     includeId={arrayProperty.of.includeId}

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -55,7 +55,7 @@ export function CollectionTableToolbar({
         <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
             <Select
                 value={size as string}
-                className="w-16 h-10"
+                className="w-16 ml-2"
                 size={"small"}
                 onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
@@ -73,7 +73,7 @@ export function CollectionTableToolbar({
         <div
             className={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
 
-            <div className="flex items-center gap-2 md:mr-4 mr-2">
+            <div className="flex items-center gap-1 md:mr-4 mr-2">
 
                 {title && <div className={"hidden lg:block"}>
                     {title}
@@ -85,7 +85,7 @@ export function CollectionTableToolbar({
 
             </div>
 
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-1">
 
                 {largeLayout && <div className="w-[22px] mr-4">
                     {loading &&

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -5,6 +5,7 @@ import useMeasure from "react-use-measure";
 import { cls, DoNotDisturbOnIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
 import { getRowHeight, TableSize } from "../../common/table_height";
+import { ErrorTooltip } from "../../ErrorTooltip";
 
 interface EntityTableCellProps {
     children: React.ReactNode;
@@ -183,7 +184,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                     ? "border-primary"
                     : "border-transparent";
 
-        return (
+        const result = <>
             <div
                 className={cls(
                     "transition-colors duration-100 ease-in-out",
@@ -241,7 +242,17 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                     </div>}
 
             </div>
-        );
+        </>;
+        if (showError) {
+            return (
+                <ErrorTooltip
+                    align={"start"}
+                    title={error?.message ?? "Error"}>
+                    {result}
+                </ErrorTooltip>
+            );
+        }
+        return result;
     }, (a, b) => {
         return a.error === b.error &&
             a.value === b.value &&

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

@@ -17,7 +17,6 @@ import { Formex, useCreateFormex } from "@firecms/formex";
 import { useDraggable } from "./useDraggable";
 import { CustomFieldValidator, getYupEntitySchema } from "../../../../form/validation";
 import { useWindowSize } from "./useWindowSize";
-import { ElementResizeListener } from "./ElementResizeListener";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
@@ -71,7 +70,7 @@ export function PopupFormFieldLoading<M extends Record<string, any>>({
                 collection: inputCollection
             }).then(setEntity);
         }
-    }, [entityId, inputCollection]);
+    }, [entityId, inputCollection, dataSource, path]);
 
     if (!entity) return null;
     return <PopupFormFieldInternal {...{
@@ -147,33 +146,35 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         };
     }, [cellRect, windowSize.height, windowSize.width]);
 
-    const normalizePosition = useCallback(({
-                                               x,
-                                               y
-                                           }: { x: number, y: number }) => {
-
-        const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-        if (!draggableBoundingRect)
-            throw Error("normalizePosition called before draggableBoundingRect is set");
-
+    const normalizePosition = useCallback((
+        pos: { x: number, y: number },
+        draggableBoundingRect: DOMRect,
+        currentWindowSize: { width: number, height: number }
+    ) => {
+        if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+            return pos;
+        }
         return {
-            x: Math.max(0, Math.min(x, windowSize.width - draggableBoundingRect.width)),
-            y: Math.max(0, Math.min(y, windowSize.height - draggableBoundingRect.height))
+            x: Math.max(0, Math.min(pos.x, currentWindowSize.width - draggableBoundingRect.width)),
+            y: Math.max(0, Math.min(pos.y, currentWindowSize.height - draggableBoundingRect.height))
         };
-    }, [windowSize]);
+    }, []);
 
-    const updatePopupLocation = useCallback((position?: {
+    const updatePopupLocation = useCallback((newPositionCandidate?: {
         x: number,
         y: number
     }) => {
-
         const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-        if (!cellRect || !draggableBoundingRect) return;
-        // const newPosition = normalizePosition(position ?? getInitialLocation());
-        const newPosition = position ?? normalizePosition(getInitialLocation());
-        if (!popupLocation || newPosition.x !== popupLocation.x || newPosition.y !== popupLocation.y)
-            setPopupLocation(newPosition);
-    }, [cellRect, getInitialLocation, normalizePosition, popupLocation]);
+        if (!cellRect || !draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+            return;
+        }
+        const basePosition = newPositionCandidate ?? getInitialLocation();
+        const newNormalizedPosition = normalizePosition(basePosition, draggableBoundingRect, windowSize);
+
+        if (!popupLocation || newNormalizedPosition.x !== popupLocation.x || newNormalizedPosition.y !== popupLocation.y) {
+            setPopupLocation(newNormalizedPosition);
+        }
+    }, [cellRect, getInitialLocation, normalizePosition, popupLocation, windowSize]);
 
     useDraggable({
         containerRef: draggableRef,
@@ -192,19 +193,25 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     useLayoutEffect(
         () => {
+            if (!cellRect || initialPositionSet.current) return;
+            // Ensure draggableRef is available and has dimensions before initial positioning
             const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-            if (!cellRect || !draggableBoundingRect || initialPositionSet.current) return;
+            if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+                // If not ready, perhaps wait or log. For now, just return.
+                // This might need a retry mechanism or ensure content is rendered first.
+                return;
+            }
             updatePopupLocation();
             initialPositionSet.current = true;
         },
-        [cellRect, updatePopupLocation, initialPositionSet.current]
+        [cellRect, updatePopupLocation] // Removed initialPositionSet.current from deps as it's a ref
     );
 
     useLayoutEffect(
         () => {
             updatePopupLocation(popupLocation);
         },
-        [windowSize, cellRect]
+        [windowSize, cellRect, updatePopupLocation, popupLocation]
     );
 
     const validationSchema = useMemo(() => {
@@ -218,9 +225,28 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     }, [collection, entityId, propertyKey, customFieldValidator]);
 
     const adaptResize = useCallback(() => {
+        // When the popup resizes, we want to re-evaluate its position
+        // based on its current location and new dimensions.
         return updatePopupLocation(popupLocation);
     }, [popupLocation, updatePopupLocation]);
 
+    // Setup ResizeObserver
+    useEffect(() => {
+        const element = draggableRef.current;
+        if (!element) return;
+
+        const observer = new ResizeObserver(() => {
+            adaptResize();
+        });
+
+        observer.observe(element);
+
+        return () => {
+            observer.unobserve(element);
+            observer.disconnect();
+        };
+    }, [adaptResize, draggableRef]);
+
     const saveValue = async (values: M) => {
         setSavingError(null);
         if (inputCollection && entity && onCellValueChange && propertyKey) {
@@ -288,7 +314,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             underlyingValueHasChanged: false,
             context: formContext,
             partOfArray: false,
-            minimalistView: false,
+            minimalistView: true,
             autoFocus: open
         }
         : undefined;
@@ -372,7 +398,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             } cursor-grab overflow-visible`}
             ref={draggableRef}>
 
-            <ElementResizeListener onResize={adaptResize}/>
+            {/* ElementResizeListener removed from here */}
 
             <div
                 className="overflow-hidden">

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

@@ -1,9 +1,8 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 
 interface DraggableProps {
     containerRef: React.RefObject<HTMLDivElement>,
     innerRef: React.RefObject<HTMLDivElement>,
-    // ref: React.RefObject<HTMLDivElement>,
     x?: number;
     y?: number;
     onMove: (params: { x: number, y: number }) => void,
@@ -22,7 +21,7 @@ export function useDraggable({
 
     const listeningRef = React.useRef(false);
 
-    const onMouseDown = (event: any) => {
+    const onMouseDown = useCallback((event: any) => {
         if (event.button !== 0 || !containerRef.current || event.defaultPrevented || event.innerClicked) {
             return;
         }
@@ -39,16 +38,17 @@ export function useDraggable({
         document.addEventListener("selectstart", onSelect);
         listeningRef.current = true;
         // event.stopPropagation();
-    };
-    const onMouseDownInner = (event: any) => {
+    }, [containerRef, onMove]);
+
+    const onMouseDownInner = useCallback((event: any) => {
         // @ts-ignore
         event.innerClicked = true;
-    };
+    }, [])
 
-    const onSelect = (event: any) => {
+    const onSelect = useCallback((event: any) => {
         event.preventDefault()
         event.stopPropagation();
-    };
+    }, [])
 
     const onMouseUp = (event: any) => {
         document.removeEventListener("mousemove", onMouseMove);
@@ -92,6 +92,6 @@ export function useDraggable({
             if (innerCurrent)
                 innerCurrent.removeEventListener("mousedown", onMouseDownInner);
         };
-    });
+    }, [containerRef, innerRef, onMouseDownInner, onMouseDown]);
 
 }

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -31,6 +31,7 @@ import {
     mergeEntityActions,
     navigateToEntity,
     resolveCollection,
+    resolveEntityAction,
     resolveProperty
 } from "../../util";
 import { ReferencePreview } from "../../preview";
@@ -151,7 +152,6 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
-
         const context = useFireCMSContext();
         const navigation = useNavigationController();
         const fullPath = fullPathProp ?? collectionProp.path;
@@ -256,7 +256,6 @@ export const EntityCollectionView = React.memo(
         }, [unselectNavigatedEntity, sideEntityController]);
 
         const onNewClick = useCallback(() => {
-
             const collection = collectionRef.current;
             analyticsController.onAnalyticsEvent?.("new_entity_click", {
                 path: fullPath
@@ -425,6 +424,7 @@ export const EntityCollectionView = React.memo(
                     Builder: ({ entity }) => (
                         <Button color={"primary"}
                                 variant={"outlined"}
+                                className={"max-w-full truncate justify-start"}
                                 startIcon={<KeyboardTabIcon size={"small"}/>}
                                 onClick={(event: any) => {
                                     event.stopPropagation();
@@ -521,10 +521,13 @@ export const EntityCollectionView = React.memo(
         }) => {
 
             const isSelected = Boolean(usedSelectionController.selectedEntities.find(e => e.id == entity.id && e.path == entity.path));
+            const customEntityActions = (collection.entityActions ?? [])
+                .map(action => resolveEntityAction(action, customizationController.entityActions))
+                .filter(Boolean) as EntityAction[];
 
             const actions = getActionsForEntity({
                 entity,
-                customEntityActions: collection.entityActions
+                customEntityActions
             });
 
             return (
@@ -538,7 +541,8 @@ export const EntityCollectionView = React.memo(
                     highlightEntity={setHighlightedEntity}
                     unhighlightEntity={unselectNavigatedEntity}
                     collection={collection}
-                    fullPath={fullIdPath ?? fullPath}
+                    fullPath={fullPath}
+                    fullIdPath={fullIdPath}
                     actions={actions}
                     hideId={collection?.hideIdFromCollection}
                     onCollectionChange={updateLastDeleteTimestamp}
@@ -749,10 +753,13 @@ export const EntityCollectionView = React.memo(
             equal(a.defaultSize, b.defaultSize) &&
             equal(a.initialFilter, b.initialFilter) &&
             equal(a.initialSort, b.initialSort) &&
+            equal(a.includeJsonView, b.includeJsonView) &&
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
             equal(a.sideDialogWidth, b.sideDialogWidth) &&
             equal(a.openEntityMode, b.openEntityMode) &&
+            equal(a.exportable, b.exportable) &&
+            equal(a.history, b.history) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -71,7 +71,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             ? <Button
                 variant={"text"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
-                startIcon={<DeleteIcon/>}
+                startIcon={<DeleteIcon size={"small"}/>}
                 onClick={onMultipleDeleteClick}
                 color={"primary"}
                 className="lg:w-20"
@@ -79,10 +79,11 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 ({selectedEntities?.length})
             </Button>
             : <IconButton
+                size={"small"}
                 color={"primary"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
                 onClick={onMultipleDeleteClick}>
-                <DeleteIcon/>
+                <DeleteIcon size={"small"}/>
             </IconButton>;
         multipleDeleteButton =
             <Tooltip

package/src/components/EntityPreview.tsx

@@ -7,6 +7,7 @@ import {
     getEntityImagePreviewPropertyKey,
     getEntityPreviewKeys,
     getEntityTitlePropertyKey,
+    getPropertyInPath,
     getValueInPath,
     IconForView,
     resolveCollection
@@ -26,11 +27,13 @@ export type EntityPreviewProps = {
     actions?: React.ReactNode,
     collection?: EntityCollection,
     hover?: boolean;
-    previewProperties?: string[],
+    previewKeys?: string[],
     disabled?: boolean,
     entity: Entity<any>,
     includeId?: boolean,
+    includeTitle?: boolean,
     includeEntityLink?: boolean,
+    includeImage?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
@@ -43,12 +46,14 @@ export function EntityPreview({
                                   disabled,
                                   hover,
                                   collection: collectionProp,
-                                  previewProperties,
+                                  previewKeys,
                                   onClick,
                                   size,
                                   includeId = true,
+                                  includeTitle = true,
                                   includeEntityLink = true,
-                                  entity
+                                  includeImage = true,
+                                  entity,
                               }: EntityPreviewProps) {
 
     const authController = useAuthController();
@@ -72,11 +77,11 @@ export function EntityPreview({
         authController
     }), [collection]);
 
-    const listProperties = useMemo(() => getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
-        [previewProperties, resolvedCollection, size]);
+    const listProperties = useMemo(() => previewKeys ?? getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewKeys, size === "medium" || size === "large" ? 3 : 1),
+        [previewKeys, resolvedCollection, size]);
 
-    const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
-    const imagePropertyKey = getEntityImagePreviewPropertyKey(resolvedCollection);
+    const titleProperty = includeTitle ? getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs) : undefined;
+    const imagePropertyKey = includeImage ? getEntityImagePreviewPropertyKey(resolvedCollection) : undefined;
     const imageProperty = imagePropertyKey ? resolvedCollection.properties[imagePropertyKey] : undefined;
     const usedImageProperty = imageProperty && "of" in imageProperty ? imageProperty.of : imageProperty;
     const restProperties = listProperties.filter(p => p !== titleProperty && p !== imagePropertyKey);
@@ -103,9 +108,7 @@ export function EntityPreview({
         </div>
 
 
-        <div className={"flex flex-col grow-1 w-full m-1 shrink-1"} style={{
-            "maxWidth": "calc(100% - 96px)"
-        }}>
+        <div className={"flex flex-col grow w-full m-1 shrink min-w-0"}>
 
             {size !== "small" && includeId && (
                 entity
@@ -135,9 +138,10 @@ export function EntityPreview({
             )}
 
             {restProperties && restProperties.map((key) => {
-                const childProperty = resolvedCollection.properties[key as string];
+                const childProperty = getPropertyInPath(resolvedCollection.properties, key);
                 if (!childProperty) return null;
 
+                const valueInPath = getValueInPath(entity.values, key);
                 return (
                     <div key={"ref_prev_" + key}
                          className={cls("truncate", restProperties.length > 1 ? "my-0.5" : "my-0")}>
@@ -145,7 +149,7 @@ export function EntityPreview({
                             entity
                                 ? <PropertyPreview
                                     propertyKey={key as string}
-                                    value={getValueInPath(entity.values, key)}
+                                    value={valueInPath}
                                     property={childProperty as ResolvedProperty}
                                     size={"small"}/>
                                 : <SkeletonPropertyComponent
@@ -162,7 +166,7 @@ export function EntityPreview({
             <Tooltip title={`See details for ${entity.id}`} className={"shrink-0"}>
                 <IconButton
                     color={"inherit"}
-                    size={"medium"}
+                    size={"small"}
                     className={size !== "small" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
@@ -177,7 +181,7 @@ export function EntityPreview({
                             updateUrl: true
                         });
                     }}>
-                    <KeyboardTabIcon size={"medium"}/>
+                    <KeyboardTabIcon size={"small"}/>
                 </IconButton>
             </Tooltip>}
 

package/src/components/ErrorView.tsx

@@ -26,7 +26,7 @@ export function ErrorView({
                               tooltip
                           }: ErrorViewProps): React.ReactElement {
     const component = error instanceof Error ? error.message : error;
-    console.warn("ErrorView", error)
+    // console.warn("ErrorView", error)
 
     const body = (
         <div