Fix ScrollArea's display:table

apps/builder/app/builder/shared/collapsible-section.tsx

@@ -7,7 +7,6 @@ import {
   SectionTitle,
   SectionTitleLabel,
   SectionTitleButton,
-  css,
 } from "@webstudio-is/design-system";
 import { theme } from "@webstudio-is/design-system";
 import type { ComponentProps, ReactNode } from "react";
@@ -45,8 +44,6 @@ type CollapsibleSectionBaseProps = {
   onOpenChange: (value: boolean) => void;
 };
 
-const rootStyle = css({ display: "grid" });
-
 export const CollapsibleSectionBase = ({
   label,
   trigger,
@@ -55,14 +52,7 @@ export const CollapsibleSectionBase = ({
   isOpen,
   onOpenChange,
 }: CollapsibleSectionBaseProps) => (
-  <Collapsible.Root
-    // Grid elements inside `display:table` element doesn't use children size and perfectly fit the parent
-    // I don't know why, but this fixes our issues with ScrollArea
-    // @todo probably pull request here to allow change display https://github.com/radix-ui/primitives/blob/main/packages/react/scroll-area/src/ScrollArea.tsx#L183
-    className={rootStyle()}
-    open={isOpen}
-    onOpenChange={onOpenChange}
-  >
+  <Collapsible.Root open={isOpen} onOpenChange={onOpenChange}>
     <Box css={{ boxShadow: `0px 1px 0 ${theme.colors.panelOutline}` }}>
       <Collapsible.Trigger asChild>
         {trigger ?? (

packages/design-system/src/components/scroll-area.tsx

@@ -1,19 +1,12 @@
 import { forwardRef, type ComponentProps, type Ref } from "react";
-import { styled, theme } from "../stitches.config";
+import { styled, theme, css, type CSS } from "../stitches.config";
 import { Root, Viewport, Scrollbar, Thumb } from "@radix-ui/react-scroll-area";
 
 const ScrollAreaRoot = styled(Root, {
   boxSizing: "border-box",
   overflow: "hidden",
 });
 
-const ScrollAreaViewport = styled(Viewport, {
-  boxSizing: "border-box",
-  width: "100%",
-  height: "100%",
-  borderRadius: "inherit",
-});
-
 const ScrollAreaThumb = styled(Thumb, {
   boxSizing: "border-box",
   background: theme.colors.foregroundMoreSubtle,
@@ -50,21 +43,47 @@ const ScrollAreaScrollbar = styled(Scrollbar, {
   },
 });
 
-type ScrollAreaProps = ComponentProps<typeof ScrollAreaViewport>;
+const viewPortStyle = css({
+  boxSizing: "border-box",
+  width: "100%",
+  height: "100%",
+  borderRadius: "inherit",
+
+  variants: {
+    verticalOnly: {
+      // https://github.com/radix-ui/primitives/issues/926#issuecomment-1015279283
+      true: { "& > div[style]": { display: "block !important" } },
+    },
+  },
+});
+
+type ScrollAreaProps = { css?: CSS; verticalOnly?: boolean } & Pick<
+  ComponentProps<"div">,
+  "onScroll" | "children"
+>;
 
 export const ScrollArea = forwardRef(
-  ({ children, css, onScroll }: ScrollAreaProps, ref: Ref<HTMLDivElement>) => {
+  (
+    { children, css, onScroll, verticalOnly = true }: ScrollAreaProps,
+    ref: Ref<HTMLDivElement>
+  ) => {
     return (
       <ScrollAreaRoot scrollHideDelay={0} css={css}>
-        <ScrollAreaViewport ref={ref} onScroll={onScroll}>
+        <Viewport
+          ref={ref}
+          className={viewPortStyle({ verticalOnly })}
+          onScroll={onScroll}
+        >
           {children}
-        </ScrollAreaViewport>
+        </Viewport>
         <ScrollAreaScrollbar orientation="vertical">
           <ScrollAreaThumb />
         </ScrollAreaScrollbar>
-        <ScrollAreaScrollbar orientation="horizontal">
-          <ScrollAreaThumb />
-        </ScrollAreaScrollbar>
+        {verticalOnly === false && (
+          <ScrollAreaScrollbar orientation="horizontal">
+            <ScrollAreaThumb />
+          </ScrollAreaScrollbar>
+        )}
       </ScrollAreaRoot>
     );
   }