fix design bug

src/Pages/Home/components/HelpItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 
 interface HelpItemProps {
     stepNumber: number;
@@ -9,6 +9,10 @@ interface HelpItemProps {
 }
 
 const HelpItem: React.FC<HelpItemProps> = ({ stepNumber, title, description, content, id }) => {
+    const [showFullContent, setShowFullContent] = useState(false);
+    const [needsToggle, setNeedsToggle] = useState(false);
+    const contentRef = useRef<HTMLDivElement>(null);
+
     const backgroundColors = [
         'bg-blue-400',
         'bg-green-400',
@@ -24,6 +28,44 @@ const HelpItem: React.FC<HelpItemProps> = ({ stepNumber, title, description, con
 
     const randomColor = backgroundColors[stepNumber % backgroundColors.length];
 
+    useEffect(() => {
+        const checkIfNeedsToggle = () => {
+            if (contentRef.current && content) {
+                const element = contentRef.current;
+
+                // ایجاد یک المان مخفی برای محاسبه ارتفاع واقعی
+                const testElement = document.createElement('div');
+                testElement.innerHTML = content;
+                testElement.style.position = 'absolute';
+                testElement.style.visibility = 'hidden';
+                testElement.style.width = element.offsetWidth + 'px';
+                testElement.style.fontSize = window.getComputedStyle(element).fontSize;
+                testElement.style.lineHeight = window.getComputedStyle(element).lineHeight;
+                testElement.style.fontFamily = window.getComputedStyle(element).fontFamily;
+
+                document.body.appendChild(testElement);
+
+                const actualHeight = testElement.offsetHeight;
+                const lineHeight = parseInt(window.getComputedStyle(testElement).lineHeight) || 20;
+                const twoLineHeight = lineHeight * 2;
+
+                document.body.removeChild(testElement);
+
+                // اگر ارتفاع واقعی بیش از دو خط باشد، دکمه نمایش داده شود
+                setNeedsToggle(actualHeight > twoLineHeight + 5); // 5px tolerance
+            }
+        };
+
+        // کمی تاخیر برای اطمینان از رندر شدن کامل
+        const timer = setTimeout(checkIfNeedsToggle, 100);
+
+        return () => clearTimeout(timer);
+    }, [content]);
+
+    const toggleContent = () => {
+        setShowFullContent(!showFullContent);
+    };
+
     return (
         <div id={id} className="bg-white rounded-2xl p-6">
             <div className="flex items-center gap-3 mb-3">
@@ -37,7 +79,19 @@ const HelpItem: React.FC<HelpItemProps> = ({ stepNumber, title, description, con
             </p>
             {content && (
                 <div className="text-sm text-gray-600 leading-relaxed">
-                    <div dangerouslySetInnerHTML={{ __html: content }} />
+                    <div
+                        ref={contentRef}
+                        className={`${!showFullContent ? 'line-clamp-2' : ''}`}
+                        dangerouslySetInnerHTML={{ __html: content }}
+                    />
+                    {needsToggle && (
+                        <button
+                            onClick={toggleContent}
+                            className="text-blue-600 hover:text-blue-800 font-medium mt-2 text-sm"
+                        >
+                            {showFullContent ? 'نمایش کمتر' : 'دیدن بیشتر'}
+                        </button>
+                    )}
                 </div>
             )}
         </div>

src/Pages/Home/components/Sidebar.tsx

@@ -95,12 +95,12 @@ const Sidebar: FC<SidebarProps> = ({ guides }) => {
     return (
         <>
             {/* دسکتاپ Sidebar */}
-            <div className='hidden lg:block bg-white top-8 bottom-8 fixed p-8 w-[280px] rounded-4xl right-8 flex flex-col'>
+            <div className='hidden lg:block overflow-y-auto bg-white top-8 bottom-8 fixed p-8 w-[280px] rounded-4xl right-8 flex flex-col'>
                 <div className='font-bold'>
                     لیست محتوا
                 </div>
 
-                <div className='mt-10 flex flex-col gap-8 overflow-y-auto flex-1 pr-2'>
+                <div className='mt-10 flex flex-col gap-8  flex-1 pr-2 min-h-0'>
                     {guides.length > 0 ? (
                         guides.map((guide) => (
                             <div
@@ -156,7 +156,7 @@ const Sidebar: FC<SidebarProps> = ({ guides }) => {
                         </div>
 
                         {/* Content */}
-                        <div className='overflow-y-auto max-h-[60vh] pr-2'>
+                        <div className='pr-2'>
                             {guides.length > 0 ? (
                                 guides.map((guide) => (
                                     <div

src/index.css

@@ -20,3 +20,11 @@ body {
   -ms-user-select: none;
   transition: background-color 0.3s ease;
 }
+
+/* Line clamp utilities */
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}