fix: make insert elements panel scroll independently

packages/admin-ui/src/FillViewport/FillViewport.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef, useState } from "react";
+import { makeDecoratable } from "~/utils.js";
+
+interface FillViewportStyle {
+    width?: number;
+    height?: number;
+}
+
+function useFillViewportStyle(axis: "width" | "height" | "both") {
+    const ref = useRef<HTMLDivElement>(null);
+    const [style, setStyle] = useState<FillViewportStyle>();
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) {
+            return;
+        }
+
+        const measure = () => {
+            const rect = el.getBoundingClientRect();
+            const next: FillViewportStyle = {};
+
+            if (axis === "width" || axis === "both") {
+                next.width = window.innerWidth - rect.left;
+            }
+
+            if (axis === "height" || axis === "both") {
+                next.height = window.innerHeight - rect.top;
+            }
+
+            setStyle(next);
+        };
+
+        measure();
+
+        const ro = new ResizeObserver(measure);
+        ro.observe(document.documentElement);
+
+        return () => ro.disconnect();
+    }, []);
+
+    return { ref, style };
+}
+
+type FillViewportProps = React.HTMLAttributes<HTMLDivElement>;
+
+const BaseFillViewportHeight = ({ children, style: userStyle, ...rest }: FillViewportProps) => {
+    const { ref, style } = useFillViewportStyle("height");
+
+    return (
+        <div
+            {...rest}
+            ref={ref}
+            data-fill-viewport="height"
+            style={style !== undefined ? { height: style.height, ...userStyle } : userStyle}
+        >
+            {children}
+        </div>
+    );
+};
+
+const BaseFillViewportWidth = ({ children, style: userStyle, ...rest }: FillViewportProps) => {
+    const { ref, style } = useFillViewportStyle("width");
+
+    return (
+        <div
+            {...rest}
+            ref={ref}
+            data-fill-viewport="width"
+            style={style !== undefined ? { width: style.width, ...userStyle } : userStyle}
+        >
+            {children}
+        </div>
+    );
+};
+
+const BaseFillViewport = ({ children, style: userStyle, ...rest }: FillViewportProps) => {
+    const { ref, style } = useFillViewportStyle("both");
+
+    return (
+        <div
+            {...rest}
+            ref={ref}
+            data-fill-viewport="both"
+            style={style !== undefined ? { ...style, ...userStyle } : userStyle}
+        >
+            {children}
+        </div>
+    );
+};
+
+const FillViewportHeight = makeDecoratable("FillViewportHeight", BaseFillViewportHeight);
+const FillViewportWidth = makeDecoratable("FillViewportWidth", BaseFillViewportWidth);
+const FillViewport = makeDecoratable("FillViewport", BaseFillViewport);
+
+export { FillViewportHeight, FillViewportWidth, FillViewport };

packages/admin-ui/src/FillViewport/index.ts

@@ -0,0 +1 @@
+export * from "./FillViewport.js";

packages/admin-ui/src/exports/admin/ui.ts

@@ -77,6 +77,9 @@ export { DynamicFieldset } from "~/DynamicFieldset/index.js";
 // FilePicker
 export { FilePicker } from "~/FilePicker/index.js";
 
+// FillViewport
+export { FillViewportHeight, FillViewportWidth, FillViewport } from "~/FillViewport/index.js";
+
 // Grid
 export { Grid } from "~/Grid/index.js";
 

packages/admin-ui/src/index.ts

@@ -19,6 +19,7 @@ export * from "./Drawer/index.js";
 export * from "./DropdownMenu/index.js";
 export * from "./DynamicFieldset/index.js";
 export * from "./FilePicker/index.js";
+export * from "./FillViewport/index.js";
 export * from "./FormComponent/index.js";
 export * from "./Grid/index.js";
 export * from "./HeaderBar/index.js";

packages/app-website-builder/src/BaseEditor/defaultConfig/Toolbar/InsertElements/InsertElements.tsx

@@ -1,5 +1,12 @@
 import React, { useState } from "react";
-import { Icon, Text, ScrollArea, InputPrimitive, ToggleGroupPrimitive } from "@webiny/admin-ui";
+import {
+    Icon,
+    Text,
+    ScrollArea,
+    InputPrimitive,
+    ToggleGroupPrimitive,
+    FillViewportHeight
+} from "@webiny/admin-ui";
 import { ReactComponent as SearchIcon } from "@webiny/icons/search.svg";
 import { ReactComponent as ListIcon } from "@webiny/icons/format_list_bulleted.svg";
 import { ReactComponent as GridIcon } from "@webiny/icons/grid_view.svg";
@@ -22,8 +29,8 @@ export const InsertElements = () => {
     const isGrid = viewType === "grid";
 
     return (
-        <div className={"h-full flex flex-col mb-sm pt-sm"}>
-            <div className={"flex-shrink-0 flex items-center gap-xs mb-md"}>
+        <div className={"mb-sm pt-sm"}>
+            <div className={"flex items-center gap-xs mb-md"}>
                 <InputPrimitive
                     value={search}
                     onChange={value => setSearch(value ?? "")}
@@ -41,47 +48,49 @@ export const InsertElements = () => {
                     size={"md"}
                 />
             </div>
-            <ScrollArea className={"flex-1"}>
-                <div>
-                    {groups.map(group => {
-                        const items = query
-                            ? group.items.filter(item =>
-                                  (item.label ?? item.name).toLowerCase().includes(query)
-                              )
-                            : group.items;
+            <FillViewportHeight>
+                <ScrollArea className={"h-full"}>
+                    <div>
+                        {groups.map(group => {
+                            const items = query
+                                ? group.items.filter(item =>
+                                      (item.label ?? item.name).toLowerCase().includes(query)
+                                  )
+                                : group.items;
 
-                        if (!items.length) {
-                            return null;
-                        }
+                            if (!items.length) {
+                                return null;
+                            }
 
-                        return (
-                            <div key={group.name} className={"p-sm flex flex-col gap-y-sm"}>
-                                <div className={"flex gap-x-sm"}>
-                                    <Icon
-                                        color={"accent"}
-                                        icon={
-                                            group.icon ? (
-                                                <InlineSvg src={group.icon} />
-                                            ) : (
-                                                <DashboardIcon />
-                                            )
-                                        }
-                                        label={group.label}
-                                    />
-                                    <Text size={"md"} className={"font-semibold"}>
-                                        {group.label}
-                                    </Text>
+                            return (
+                                <div key={group.name} className={"p-sm flex flex-col gap-y-sm"}>
+                                    <div className={"flex gap-x-sm"}>
+                                        <Icon
+                                            color={"accent"}
+                                            icon={
+                                                group.icon ? (
+                                                    <InlineSvg src={group.icon} />
+                                                ) : (
+                                                    <DashboardIcon />
+                                                )
+                                            }
+                                            label={group.label}
+                                        />
+                                        <Text size={"md"} className={"font-semibold"}>
+                                            {group.label}
+                                        </Text>
+                                    </div>
+                                    {isGrid ? (
+                                        <GroupItemsGrid items={items} />
+                                    ) : (
+                                        <GroupItemsList items={items} />
+                                    )}
                                 </div>
-                                {isGrid ? (
-                                    <GroupItemsGrid items={items} />
-                                ) : (
-                                    <GroupItemsList items={items} />
-                                )}
-                            </div>
-                        );
-                    })}
-                </div>
-            </ScrollArea>
+                            );
+                        })}
+                    </div>
+                </ScrollArea>
+            </FillViewportHeight>
         </div>
     );
 };

packages/webiny/package.json

@@ -142,7 +142,7 @@
     "./extensions": "./extensions.js",
     "./api/tenant-manager": "./api/tenant-manager.js"
   },
-  "exportGenerationHash": "a0a5fceb63a2c96793e5f147a410845f94eb180a10e445ab662481de06435c90",
+  "exportGenerationHash": "a9e9428800c668172653eb3821a9ac0a0abab1a1f0ee06c19356f7c9b80b6818",
   "webiny": {
     "publishFrom": "dist"
   }

packages/webiny/src/admin/ui.ts

@@ -40,6 +40,11 @@ export { Drawer } from "@webiny/admin-ui/Drawer/index.js";
 export { DropdownMenu } from "@webiny/admin-ui/DropdownMenu/index.js";
 export { DynamicFieldset } from "@webiny/admin-ui/DynamicFieldset/index.js";
 export { FilePicker } from "@webiny/admin-ui/FilePicker/index.js";
+export {
+    FillViewportHeight,
+    FillViewportWidth,
+    FillViewport
+} from "@webiny/admin-ui/FillViewport/index.js";
 export { Grid } from "@webiny/admin-ui/Grid/index.js";
 export { HeaderBar } from "@webiny/admin-ui/HeaderBar/index.js";
 export { Heading } from "@webiny/admin-ui/Heading/index.js";