slider glitch fix

Signed-off-by: Naman Verma <149177973+Namanv0509@users.noreply.github.com>

Author: Namanv0509

src/components/PlanCard/collapsible-details.js

@@ -65,9 +65,14 @@ const FeatureDetailsWrapper = styled.div`
   }
 `;
 
-const FeatureDetails = ({ category, description, tier, children }) => {
+const FeatureDetails = ({ category, description, tier, children, onToggle }) => {
   const [expand, setExpand] = React.useState(false);
 
+  // Call onToggle when expand changes
+  React.useEffect(() => {
+    onToggle?.(expand);
+  }, [expand, onToggle]);
+
   const BetaTag = () => <span className="beta-tag">Coming Soon</span>;
 
   return (
@@ -76,15 +81,9 @@ const FeatureDetails = ({ category, description, tier, children }) => {
         {(description || children) && (
           <div className="toggle-btn">
             {expand ? (
-              <MdExpandMore
-                className="toggle-icon"
-                onClick={() => setExpand(!expand)}
-              />
+              <MdExpandMore className="toggle-icon" />
             ) : (
-              <RiArrowRightSLine
-                className="toggle-icon"
-                onClick={() => setExpand(!expand)}
-              />
+              <RiArrowRightSLine className="toggle-icon" />
             )}
           </div>
         )}
@@ -94,9 +93,7 @@ const FeatureDetails = ({ category, description, tier, children }) => {
         </h5>
         <div className="details">
           {description && (
-            <p className={`closed ${expand ? "open" : ""}`}
-              dangerouslySetInnerHTML={{ __html: description }}>
-            </p>
+            <p className={`closed ${expand ? "open" : ""}`} dangerouslySetInnerHTML={{ __html: description }} />
           )}
           {children && (
             <div className={`closed ${expand ? "open" : ""}`}>
@@ -109,4 +106,4 @@ const FeatureDetails = ({ category, description, tier, children }) => {
   );
 };
 
-export default FeatureDetails;
+export default FeatureDetails;