fix: adjust layout for scroll area issues (#3612)

lawvs · web-flow · commit 99c1a6fb6493 · 2025-04-28T07:47:41.000Z
* fix: adjust layout to workaround scroll area viewport display issues

* feat: add asChild prop to ScrollArea for enhanced flexibility
diff --git a/apps/desktop/src/renderer/src/modules/discover/feed-form.tsx b/apps/desktop/src/renderer/src/modules/discover/feed-form.tsx
@@ -84,19 +84,26 @@ export const FeedForm: Component<{
         )}
       >
         {feed ? (
-          <FeedInnerForm
-            {...{
-              defaultValues,
-              id,
-              url,
-
-              onSuccess,
-              subscriptionData: feedQuery.data?.subscription,
-              entries: feedQuery.data?.entries,
-              feed,
-              rootContainerRef,
-            }}
-          />
+          // Workaround for the issue with the scroll area viewport setting the display to table
+          // Learn more about the issue here:
+          // https://github.com/radix-ui/primitives/issues/926 https://github.com/radix-ui/primitives/issues/3129 https://github.com/radix-ui/primitives/pull/3225
+          <div className="flex">
+            <div className="w-0 grow truncate">
+              <FeedInnerForm
+                {...{
+                  defaultValues,
+                  id,
+                  url,
+
+                  onSuccess,
+                  subscriptionData: feedQuery.data?.subscription,
+                  entries: feedQuery.data?.entries,
+                  feed,
+                  rootContainerRef,
+                }}
+              />
+            </div>
+          </div>
         ) : feedQuery.isLoading ? (
           <div className="flex flex-1 items-center justify-center">
             <LoadingCircle size="large" />
diff --git a/packages/components/src/ui/scroll-area/ScrollArea.tsx b/packages/components/src/ui/scroll-area/ScrollArea.tsx
@@ -128,6 +128,7 @@ export const ScrollArea = React.forwardRef<
     mask?: boolean
     onScroll?: (e: React.UIEvent<HTMLDivElement>) => void
     orientation?: "vertical" | "horizontal"
+    asChild?: boolean
   }
 >(
   (
@@ -140,6 +141,7 @@ export const ScrollArea = React.forwardRef<
       mask = false,
       onScroll,
       orientation = "vertical",
+      asChild = false,
     },
     ref,
   ) => {
@@ -154,6 +156,7 @@ export const ScrollArea = React.forwardRef<
             onWheel={stopPropagation}
             className={cn(flex ? "[&>div]:!flex [&>div]:!flex-col" : "", viewportClassName)}
             mask={mask}
+            asChild={asChild}
             onScroll={onScroll}
           >
             {children}
