From 047d22fcb0ae73fb25f70002b3f871f0025ad1f0 Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Thu, 13 Apr 2023 11:20:47 +0300
Subject: [PATCH 1/3] fix scroll area's display:table

---
 .../builder/shared/collapsible-section.tsx    | 12 +----
 .../src/components/scroll-area.tsx            | 52 +++++++++++++------
 2 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/apps/builder/app/builder/shared/collapsible-section.tsx b/apps/builder/app/builder/shared/collapsible-section.tsx
index d5c0d53b9c5..7d56b412739 100644
--- a/apps/builder/app/builder/shared/collapsible-section.tsx
+++ b/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 ?? (
diff --git a/packages/design-system/src/components/scroll-area.tsx b/packages/design-system/src/components/scroll-area.tsx
index 6f7d50e04f4..704f2e73de0 100644
--- a/packages/design-system/src/components/scroll-area.tsx
+++ b/packages/design-system/src/components/scroll-area.tsx
@@ -1,5 +1,5 @@
 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, {
@@ -7,13 +7,6 @@ const ScrollAreaRoot = styled(Root, {
   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,50 @@ const ScrollAreaScrollbar = styled(Scrollbar, {
   },
 });
 
-type ScrollAreaProps = ComponentProps<typeof ScrollAreaViewport>;
+const viewPortStyle = css({
+  boxSizing: "border-box",
+  width: "100%",
+  height: "100%",
+  borderRadius: "inherit",
+});
+
+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()} onScroll={onScroll}>
+          {/*
+           * Radix sets "display:table" on Viewport,
+           * which allows children to grow past the ScrollArea's width:
+           * https://github.com/radix-ui/primitives/blob/1b05a8e35cf35f3020484979086d70aefbaf4095/packages/react/scroll-area/src/ScrollArea.tsx#L183
+           *
+           * We don't want that in case of vertilcal only scroll.
+           * A wrapper with "display:grid" counteracts the effect of "display:table".
+           */}
+          {verticalOnly ? (
+            <div style={{ display: "grid" }}>{children}</div>
+          ) : (
+            children
+          )}
+
           {children}
-        </ScrollAreaViewport>
+        </Viewport>
         <ScrollAreaScrollbar orientation="vertical">
           <ScrollAreaThumb />
         </ScrollAreaScrollbar>
-        <ScrollAreaScrollbar orientation="horizontal">
-          <ScrollAreaThumb />
-        </ScrollAreaScrollbar>
+        {verticalOnly === false && (
+          <ScrollAreaScrollbar orientation="horizontal">
+            <ScrollAreaThumb />
+          </ScrollAreaScrollbar>
+        )}
       </ScrollAreaRoot>
     );
   }

From 6751a1d5c13bfb44f9d8316de9812b77ba2b5d6b Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Thu, 13 Apr 2023 11:23:44 +0300
Subject: [PATCH 2/3] fix

---
 packages/design-system/src/components/scroll-area.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/design-system/src/components/scroll-area.tsx b/packages/design-system/src/components/scroll-area.tsx
index 704f2e73de0..d3fd10ab1e0 100644
--- a/packages/design-system/src/components/scroll-area.tsx
+++ b/packages/design-system/src/components/scroll-area.tsx
@@ -76,8 +76,6 @@ export const ScrollArea = forwardRef(
           ) : (
             children
           )}
-
-          {children}
         </Viewport>
         <ScrollAreaScrollbar orientation="vertical">
           <ScrollAreaThumb />

From d2f5ee1afd067b461153fd42220d30192b06678b Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Thu, 13 Apr 2023 11:42:10 +0300
Subject: [PATCH 3/3] better workaround

---
 .../src/components/scroll-area.tsx            | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/design-system/src/components/scroll-area.tsx b/packages/design-system/src/components/scroll-area.tsx
index d3fd10ab1e0..4dc21b2b9fb 100644
--- a/packages/design-system/src/components/scroll-area.tsx
+++ b/packages/design-system/src/components/scroll-area.tsx
@@ -48,6 +48,13 @@ const viewPortStyle = css({
   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<
@@ -62,20 +69,12 @@ export const ScrollArea = forwardRef(
   ) => {
     return (
       <ScrollAreaRoot scrollHideDelay={0} css={css}>
-        <Viewport ref={ref} className={viewPortStyle()} onScroll={onScroll}>
-          {/*
-           * Radix sets "display:table" on Viewport,
-           * which allows children to grow past the ScrollArea's width:
-           * https://github.com/radix-ui/primitives/blob/1b05a8e35cf35f3020484979086d70aefbaf4095/packages/react/scroll-area/src/ScrollArea.tsx#L183
-           *
-           * We don't want that in case of vertilcal only scroll.
-           * A wrapper with "display:grid" counteracts the effect of "display:table".
-           */}
-          {verticalOnly ? (
-            <div style={{ display: "grid" }}>{children}</div>
-          ) : (
-            children
-          )}
+        <Viewport
+          ref={ref}
+          className={viewPortStyle({ verticalOnly })}
+          onScroll={onScroll}
+        >
+          {children}
         </Viewport>
         <ScrollAreaScrollbar orientation="vertical">
           <ScrollAreaThumb />