[WEB-4273] fix: plans comparison scroll issue (#7176)

web/ce/components/workspace/billing/comparison/root.tsx

@@ -1,4 +1,3 @@
-import { forwardRef } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { EProductSubscriptionEnum } from "@plane/constants";
@@ -10,52 +9,40 @@ import { PLANE_PLANS, TPlanePlans } from "@/constants/plans";
 import { PlanDetail } from "./plan-detail";
 
 type TPlansComparisonProps = {
-  isScrolled: boolean;
   isCompareAllFeaturesSectionOpen: boolean;
   getBillingFrequency: (subscriptionType: EProductSubscriptionEnum) => TBillingFrequency | undefined;
   setBillingFrequency: (subscriptionType: EProductSubscriptionEnum, frequency: TBillingFrequency) => void;
   setIsCompareAllFeaturesSectionOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsScrolled: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export const PlansComparison = observer(
+export const PlansComparison = observer((props: TPlansComparisonProps) => {
-  forwardRef<HTMLDivElement, TPlansComparisonProps>(function PlansComparison(
+  const {
-    props: TPlansComparisonProps,
+    isCompareAllFeaturesSectionOpen,
-    ref: React.Ref<HTMLDivElement>
+    getBillingFrequency,
-  ) {
+    setBillingFrequency,
-    const {
+    setIsCompareAllFeaturesSectionOpen,
-      isScrolled,
+  } = props;
-      isCompareAllFeaturesSectionOpen,
+  // plan details
-      getBillingFrequency,
+  const { planDetails } = PLANE_PLANS;
-      setBillingFrequency,
-      setIsCompareAllFeaturesSectionOpen,
-      setIsScrolled,
-    } = props;
-    // plan details
-    const { planDetails } = PLANE_PLANS;
 
-    return (
+  return (
-      <PlansComparisonBase
+    <PlansComparisonBase
-        ref={ref}
+      planeDetails={Object.entries(planDetails).map(([planKey, plan]) => {
-        planeDetails={Object.entries(planDetails).map(([planKey, plan]) => {
+        const currentPlanKey = planKey as TPlanePlans;
-          const currentPlanKey = planKey as TPlanePlans;
+        if (!shouldRenderPlanDetail(currentPlanKey)) return null;
-          if (!shouldRenderPlanDetail(currentPlanKey)) return null;
+        return (
-          return (
+          <PlanDetail
-            <PlanDetail
+            key={planKey}
-              key={planKey}
+            subscriptionType={plan.id}
-              subscriptionType={plan.id}
+            planDetail={plan}
-              planDetail={plan}
+            billingFrequency={getBillingFrequency(plan.id)}
-              billingFrequency={getBillingFrequency(plan.id)}
+            setBillingFrequency={(frequency) => setBillingFrequency(plan.id, frequency)}
-              setBillingFrequency={(frequency) => setBillingFrequency(plan.id, frequency)}
+          />
-            />
+        );
-          );
+      })}
-        })}
+      isSelfManaged
-        isSelfManaged
+      isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
-        isScrolled={isScrolled}
+      setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
-        isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
+    />
-        setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
+  );
-        setIsScrolled={setIsScrolled}
+});
-      />
-    );
-  })
-);

web/ce/components/workspace/billing/root.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import {
@@ -16,8 +16,6 @@ import { getSubscriptionTextColor } from "@/components/workspace/billing/subscri
 import { PlansComparison } from "./comparison/root";
 
 export const BillingRoot = observer(() => {
-  const [isScrolled, setIsScrolled] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
   const [isCompareAllFeaturesSectionOpen, setIsCompareAllFeaturesSectionOpen] = useState(false);
   const [productBillingFrequency, setProductBillingFrequency] = useState<TProductBillingFrequency>(
     DEFAULT_PRODUCT_BILLING_FREQUENCY
@@ -43,33 +41,13 @@ export const BillingRoot = observer(() => {
   const setBillingFrequency = (subscriptionType: EProductSubscriptionEnum, frequency: TBillingFrequency): void =>
     setProductBillingFrequency({ ...productBillingFrequency, [subscriptionType]: frequency });
 
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const handleScroll = () => {
-      const scrollTop = container.scrollTop;
-      const isScrolled = isCompareAllFeaturesSectionOpen ? scrollTop > 0 : false;
-      setIsScrolled(isScrolled);
-    };
-
-    container.addEventListener("scroll", handleScroll);
-    return () => container.removeEventListener("scroll", handleScroll);
-  }, [isCompareAllFeaturesSectionOpen]);
-
   return (
     <section className="relative size-full flex flex-col overflow-y-auto scrollbar-hide">
       <SettingsHeading
         title={t("workspace_settings.settings.billing_and_plans.heading")}
         description={t("workspace_settings.settings.billing_and_plans.description")}
       />
-
+      <div className={cn("transition-all duration-500 ease-in-out will-change-[height,opacity]")}>
-      <div
-        className={cn(
-          "transition-all duration-500 ease-in-out will-change-[height,opacity]",
-          isScrolled ? "h-0 opacity-0 pointer-events-none" : "h-[300px] opacity-100"
-        )}
-      >
         <div className="py-6">
           <div className={cn("px-6 py-4 border border-custom-border-200 rounded-lg")}>
             <div className="flex gap-2 font-medium items-center justify-between">
@@ -89,13 +67,10 @@ export const BillingRoot = observer(() => {
         <div className="text-xl font-semibold mt-3">All plans</div>
       </div>
       <PlansComparison
-        ref={containerRef}
-        isScrolled={isScrolled}
         isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
         getBillingFrequency={getBillingFrequency}
         setBillingFrequency={setBillingFrequency}
         setIsCompareAllFeaturesSectionOpen={setIsCompareAllFeaturesSectionOpen}
-        setIsScrolled={setIsScrolled}
       />
     </section>
   );

web/core/components/workspace/billing/comparison/base.tsx

@@ -1,4 +1,3 @@
-import { forwardRef } from "react";
 import { observer } from "mobx-react";
 import { ArrowDown, ArrowUp } from "lucide-react";
 // plane imports
@@ -12,10 +11,8 @@ import { PlanFeatureDetail } from "./feature-detail";
 type TPlansComparisonBaseProps = {
   planeDetails: React.ReactNode;
   isSelfManaged: boolean;
-  isScrolled: boolean;
   isCompareAllFeaturesSectionOpen: boolean;
   setIsCompareAllFeaturesSectionOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  setIsScrolled: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 export const shouldRenderPlanDetail = (planKey: TPlanePlans) => {
@@ -26,138 +23,117 @@ export const shouldRenderPlanDetail = (planKey: TPlanePlans) => {
   return true;
 };
 
-export const PlansComparisonBase = observer(
+export const PlansComparisonBase = observer((props: TPlansComparisonBaseProps) => {
-  forwardRef<HTMLDivElement, TPlansComparisonBaseProps>(function PlansComparisonBase(
+  const { planeDetails, isSelfManaged, isCompareAllFeaturesSectionOpen, setIsCompareAllFeaturesSectionOpen } = props;
-    props: TPlansComparisonBaseProps,
+  // plan details
-    ref: React.Ref<HTMLDivElement>
+  const { planDetails, planHighlights, planComparison } = PLANE_PLANS;
-  ) {
+  const numberOfPlansToRender = Object.keys(planDetails).filter((planKey) =>
-    const {
+    shouldRenderPlanDetail(planKey as TPlanePlans)
-      planeDetails,
+  ).length;
-      isSelfManaged,
-      isScrolled,
-      isCompareAllFeaturesSectionOpen,
-      setIsCompareAllFeaturesSectionOpen,
-      setIsScrolled,
-    } = props;
-    // plan details
-    const { planDetails, planHighlights, planComparison } = PLANE_PLANS;
-    const numberOfPlansToRender = Object.keys(planDetails).filter((planKey) =>
-      shouldRenderPlanDetail(planKey as TPlanePlans)
-    ).length;
 
-    const getSubscriptionType = (planKey: TPlanePlans) => planDetails[planKey].id;
+  const getSubscriptionType = (planKey: TPlanePlans) => planDetails[planKey].id;
 
-    return (
+  return (
-      <div
+    <div
-        ref={ref}
+      className={`size-full px-2 overflow-x-auto horizontal-scrollbar scrollbar-sm transition-all duration-500 ease-out will-change-transform`}
-        className={`size-full px-2 overflow-x-auto horizontal-scrollbar scrollbar-sm transition-all duration-500 ease-out will-change-transform`}
+    >
-      >
+      <div className="max-w-full" style={{ minWidth: `${numberOfPlansToRender * 280}px` }}>
-        <div className="max-w-full" style={{ minWidth: `${numberOfPlansToRender * 280}px` }}>
+        <div className="h-full flex flex-col gap-y-10">
-          <div className="h-full flex flex-col gap-y-10">
+          <div
-            <div
+            className={cn(
-              className={cn(
+              "flex-shrink-0 sticky top-2 z-10 bg-custom-background-100 grid gap-3 text-sm font-medium even:bg-custom-background-90 transition-all duration-500 ease-out will-change-transform"
-                "flex-shrink-0 sticky top-2 z-10 bg-custom-background-100 grid gap-3 text-sm font-medium even:bg-custom-background-90 transition-all duration-500 ease-out will-change-transform",
-                {
-                  "border-b border-custom-border-200 mt-2": isScrolled,
-                }
-              )}
-              style={{
-                gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))`,
-                transform: isScrolled ? "translateY(-8px)" : "translateY(0)",
-              }}
-            >
-              <div className="col-span-1 p-3 space-y-0.5 text-base font-medium" />
-              {planeDetails}
-            </div>
-            {/* Plan Headers */}
-            <section className="flex-shrink-0">
-              {/* Plan Highlights */}
-              <div
-                className="grid gap-3 py-1 text-sm text-custom-text-200 even:bg-custom-background-90 rounded-sm"
-                style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
-              >
-                <div className="col-span-1 p-3 text-base font-medium">Highlights</div>
-                {Object.entries(planHighlights).map(
-                  ([planKey, highlights]) =>
-                    shouldRenderPlanDetail(planKey as TPlanePlans) && (
-                      <div key={planKey} className="col-span-1 p-3">
-                        <ul className="list-disc space-y-1">
-                          {highlights.map((highlight, index) => (
-                            <li key={index}>{highlight}</li>
-                          ))}
-                        </ul>
-                      </div>
-                    )
-                )}
-              </div>
-            </section>
-
-            {/* Feature Comparison */}
-            {isCompareAllFeaturesSectionOpen && (
-              <>
-                {planComparison.map((section, sectionIdx) => (
-                  <section key={sectionIdx} className="flex-shrink-0">
-                    <h2 className="flex gap-2 items-start text-lg font-semibold text-custom-text-300 mb-2 pl-2">
-                      {section.title} {section.comingSoon && <ComingSoonBadge />}
-                    </h2>
-                    <div className="border-t border-custom-border-200">
-                      {section.features.map((feature, featureIdx) => (
-                        <div
-                          key={featureIdx}
-                          className="grid gap-3 text-sm text-custom-text-200 even:bg-custom-background-90 rounded-sm"
-                          style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
-                        >
-                          <div className="col-span-1 p-3 flex items-center text-base font-medium">
-                            <div className="w-full flex gap-2 items-start justify-between">
-                              {feature.title} {feature.comingSoon && <ComingSoonBadge />}
-                            </div>
-                          </div>
-                          {PLANS_LIST.map(
-                            (planKey) =>
-                              shouldRenderPlanDetail(planKey) && (
-                                <div
-                                  key={planKey}
-                                  className="col-span-1 p-3 flex items-center justify-center text-center"
-                                >
-                                  <PlanFeatureDetail
-                                    subscriptionType={getSubscriptionType(planKey)}
-                                    data={
-                                      isSelfManaged
-                                        ? (feature["self-hosted"]?.[planKey] ?? feature.cloud[planKey])
-                                        : feature.cloud[planKey]
-                                    }
-                                  />
-                                </div>
-                              )
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </section>
-                ))}
-              </>
             )}
+            style={{
+              gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))`,
+            }}
+          >
+            <div className="col-span-1 p-3 space-y-0.5 text-base font-medium" />
+            {planeDetails}
           </div>
-
+          {/* Plan Headers */}
-          {/* Toggle Button */}
+          <section className="flex-shrink-0">
-          <div className="flex items-center justify-center gap-1 my-4 pb-2">
+            {/* Plan Highlights */}
-            <Button
+            <div
-              variant="link-neutral"
+              className="grid gap-3 py-1 text-sm text-custom-text-200 even:bg-custom-background-90 rounded-sm"
-              onClick={() => {
+              style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
-                const newValue = !isCompareAllFeaturesSectionOpen;
-                setIsCompareAllFeaturesSectionOpen(newValue);
-                if (newValue) {
-                  setIsScrolled(true);
-                }
-              }}
-              className="hover:bg-custom-background-90"
             >
-              {isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
+              <div className="col-span-1 p-3 text-base font-medium">Highlights</div>
-              {isCompareAllFeaturesSectionOpen ? <ArrowUp className="size-4" /> : <ArrowDown className="size-4" />}
+              {Object.entries(planHighlights).map(
-            </Button>
+                ([planKey, highlights]) =>
-          </div>
+                  shouldRenderPlanDetail(planKey as TPlanePlans) && (
+                    <div key={planKey} className="col-span-1 p-3">
+                      <ul className="list-disc space-y-1">
+                        {highlights.map((highlight, index) => (
+                          <li key={index}>{highlight}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  )
+              )}
+            </div>
+          </section>
+
+          {/* Feature Comparison */}
+          {isCompareAllFeaturesSectionOpen && (
+            <>
+              {planComparison.map((section, sectionIdx) => (
+                <section key={sectionIdx} className="flex-shrink-0">
+                  <h2 className="flex gap-2 items-start text-lg font-semibold text-custom-text-300 mb-2 pl-2">
+                    {section.title} {section.comingSoon && <ComingSoonBadge />}
+                  </h2>
+                  <div className="border-t border-custom-border-200">
+                    {section.features.map((feature, featureIdx) => (
+                      <div
+                        key={featureIdx}
+                        className="grid gap-3 text-sm text-custom-text-200 even:bg-custom-background-90 rounded-sm"
+                        style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
+                      >
+                        <div className="col-span-1 p-3 flex items-center text-base font-medium">
+                          <div className="w-full flex gap-2 items-start justify-between">
+                            {feature.title} {feature.comingSoon && <ComingSoonBadge />}
+                          </div>
+                        </div>
+                        {PLANS_LIST.map(
+                          (planKey) =>
+                            shouldRenderPlanDetail(planKey) && (
+                              <div
+                                key={planKey}
+                                className="col-span-1 p-3 flex items-center justify-center text-center"
+                              >
+                                <PlanFeatureDetail
+                                  subscriptionType={getSubscriptionType(planKey)}
+                                  data={
+                                    isSelfManaged
+                                      ? (feature["self-hosted"]?.[planKey] ?? feature.cloud[planKey])
+                                      : feature.cloud[planKey]
+                                  }
+                                />
+                              </div>
+                            )
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </section>
+              ))}
+            </>
+          )}
+        </div>
+
+        {/* Toggle Button */}
+        <div className="flex items-center justify-center gap-1 my-4 pb-2">
+          <Button
+            variant="link-neutral"
+            onClick={() => {
+              setIsCompareAllFeaturesSectionOpen(!isCompareAllFeaturesSectionOpen);
+            }}
+            className="hover:bg-custom-background-90"
+          >
+            {isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
+            {isCompareAllFeaturesSectionOpen ? <ArrowUp className="size-4" /> : <ArrowDown className="size-4" />}
+          </Button>
         </div>
       </div>
-    );
+    </div>
-  })
+  );
-);
+});