# 🔧 Fix Overflow - حل مشکل نمایش کامل

## مشکل: تگ پدر کوچیکتر از فرزند است

### راه‌حل: تغییر overflow-hidden به overflow-visible

---

## نسخه نهایی Home Features - با Overflow درست

```jsx
// src/components/HomePage/HomeFeatures.jsx
import React, { useEffect, useState, useRef } from 'react';
import * as Icons from 'lucide-react';
import { ChevronLeft, ChevronRight } from 'lucide-react';

const HomeFeatures = () => {
  const [features, setFeatures] = useState([]);
  const [loading, setLoading] = useState(true);
  const scrollRef = useRef(null);
  const [canScrollLeft, setCanScrollLeft] = useState(false);
  const [canScrollRight, setCanScrollRight] = useState(false);

  useEffect(() => {
    fetchFeatures();
  }, []);

  const fetchFeatures = async () => {
    try {
      const response = await fetch('http://localhost:8000/api/home-features');
      const data = await response.json();
      setFeatures(data.data);
    } catch (error) {
      console.error('Error fetching features:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    checkScroll();
    window.addEventListener('resize', checkScroll);
    return () => window.removeEventListener('resize', checkScroll);
  }, [features]);

  const checkScroll = () => {
    if (scrollRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;
      setCanScrollLeft(scrollLeft > 0);
      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10);
    }
  };

  const scroll = (direction) => {
    if (scrollRef.current) {
      const scrollAmount = 300;
      scrollRef.current.scrollBy({
        left: direction === 'left' ? -scrollAmount : scrollAmount,
        behavior: 'smooth'
      });
      setTimeout(checkScroll, 300);
    }
  };

  if (loading) {
    return (
      <div className="container mx-auto px-4 py-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="animate-pulse">
              <div className="bg-gray-200 rounded-2xl h-32"></div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (features.length === 0) return null;

  const showScrollButtons = features.length > 4;

  return (
    // ⭐ تغییر overflow-hidden به overflow-visible
    <section className="py-12 bg-gradient-to-b from-gray-50 to-white overflow-visible">
      {/* Desktop Grid View (4 items or less) */}
      {!showScrollButtons && (
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {features.map((feature) => {
              const IconComponent = Icons[feature.icon] || Icons.Box;
              
              return (
                <div
                  key={feature.id}
                  className="group relative overflow-hidden rounded-2xl p-6 text-center transition-all duration-500 hover:scale-105 hover:shadow-2xl cursor-pointer"
                  style={{
                    backgroundColor: feature.bg_color,
                    color: feature.text_color
                  }}
                >
                  {/* Decorative Elements */}
                  <div className="absolute top-0 right-0 w-20 h-20 rounded-full opacity-10 blur-2xl group-hover:opacity-20 transition-opacity"
                    style={{ backgroundColor: feature.icon_color }}
                  ></div>
                  <div className="absolute bottom-0 left-0 w-16 h-16 rounded-full opacity-10 blur-2xl group-hover:opacity-20 transition-opacity"
                    style={{ backgroundColor: feature.icon_color }}
                  ></div>

                  {/* Content */}
                  <div className="relative z-10">
                    <div className="mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-12">
                      <IconComponent
                        size={48}
                        style={{ color: feature.icon_color }}
                        className="mx-auto drop-shadow-lg"
                        strokeWidth={2}
                      />
                    </div>
                    <h3 className="text-lg font-bold mb-2 drop-shadow-sm">
                      {feature.title}
                    </h3>
                    <p className="text-sm opacity-90 leading-relaxed">
                      {feature.description}
                    </p>
                  </div>

                  {/* Hover Border Effect */}
                  <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    style={{
                      boxShadow: `inset 0 0 0 2px ${feature.icon_color}`
                    }}
                  ></div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Full Width Scrollable View (more than 4 items) */}
      {showScrollButtons && (
        // ⭐ اضافه کردن min-height برای تگ پدر
        <div className="relative w-full min-h-[200px]">
          {/* Scroll Left Button */}
          {canScrollLeft && (
            <button
              onClick={() => scroll('left')}
              className="absolute left-4 top-1/2 -translate-y-1/2 z-20 bg-white shadow-xl rounded-full p-3 hover:bg-gray-100 transition-all duration-300 hover:scale-110"
              aria-label="اسکرول به چپ"
            >
              <ChevronLeft size={24} className="text-gray-800" />
            </button>
          )}

          {/* Scroll Right Button */}
          {canScrollRight && (
            <button
              onClick={() => scroll('right')}
              className="absolute right-4 top-1/2 -translate-y-1/2 z-20 bg-white shadow-xl rounded-full p-3 hover:bg-gray-100 transition-all duration-300 hover:scale-110"
              aria-label="اسکرول به راست"
            >
              <ChevronRight size={24} className="text-gray-800" />
            </button>
          )}

          {/* Scrollable Container */}
          <div
            ref={scrollRef}
            onScroll={checkScroll}
            // ⭐ اضافه کردن py-4 برای فضای عمودی
            className="flex gap-6 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth px-4 md:px-8 py-4"
            style={{
              scrollbarWidth: 'none',
              msOverflowStyle: 'none',
            }}
          >
            {/* Spacer برای شروع از لبه */}
            <div className="flex-shrink-0 w-4 md:w-8"></div>
            
            {features.map((feature) => {
              const IconComponent = Icons[feature.icon] || Icons.Box;
              
              return (
                <div
                  key={feature.id}
                  className="group relative flex-shrink-0 w-72 overflow-hidden rounded-2xl p-6 text-center transition-all duration-500 hover:scale-105 hover:shadow-2xl cursor-pointer"
                  style={{
                    backgroundColor: feature.bg_color,
                    color: feature.text_color
                  }}
                >
                  {/* Decorative Elements */}
                  <div className="absolute top-0 right-0 w-20 h-20 rounded-full opacity-10 blur-2xl group-hover:opacity-20 transition-opacity"
                    style={{ backgroundColor: feature.icon_color }}
                  ></div>
                  <div className="absolute bottom-0 left-0 w-16 h-16 rounded-full opacity-10 blur-2xl group-hover:opacity-20 transition-opacity"
                    style={{ backgroundColor: feature.icon_color }}
                  ></div>

                  {/* Content */}
                  <div className="relative z-10">
                    <div className="mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-12">
                      <IconComponent
                        size={48}
                        style={{ color: feature.icon_color }}
                        className="mx-auto drop-shadow-lg"
                        strokeWidth={2}
                      />
                    </div>
                    <h3 className="text-lg font-bold mb-2 drop-shadow-sm">
                      {feature.title}
                    </h3>
                    <p className="text-sm opacity-90 leading-relaxed">
                      {feature.description}
                    </p>
                  </div>

                  {/* Hover Border Effect */}
                  <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                    style={{
                      boxShadow: `inset 0 0 0 2px ${feature.icon_color}`
                    }}
                  ></div>
                </div>
              );
            })}
            
            {/* Spacer برای پایان در لبه */}
            <div className="flex-shrink-0 w-4 md:w-8"></div>
          </div>

          {/* Gradient Fade Effects */}
          {canScrollLeft && (
            <div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-white to-transparent pointer-events-none z-10"></div>
          )}
          {canScrollRight && (
            <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-white to-transparent pointer-events-none z-10"></div>
          )}
        </div>
      )}
    </section>
  );
};

export default HomeFeatures;
```

---

## تغییرات کلیدی:

### 1. تغییر overflow در section:
```jsx
// ❌ قبل - باعث بریدن shadow ها میشد
<section className="overflow-hidden">

// ✅ بعد - اجازه نمایش کامل
<section className="overflow-visible">
```

### 2. اضافه کردن min-height:
```jsx
// برای container اسکرول
<div className="relative w-full min-h-[200px]">
```

### 3. اضافه کردن padding عمودی:
```jsx
// برای فضای بالا و پایین
<div className="overflow-x-auto py-4">
```

### 4. اضافه کردن overflow-y-visible:
```jsx
<div className="overflow-x-auto overflow-y-visible">
```

---

## همین تغییرات رو برای ProductShowcases هم اعمال کن:

```jsx
// در ShowcaseSection

return (
  <section
    className="py-12 relative overflow-visible" // ⭐ تغییر به overflow-visible
    style={{ backgroundColor: showcase.bg_color }}
  >
    {/* ... */}
    
    {displayType === 'grid' && products.length <= 4 ? (
      /* Grid View */
    ) : (
      /* Scrollable View */
      <div className="relative w-full min-h-[400px]"> {/* ⭐ اضافه کردن min-height */}
        {/* ... buttons ... */}
        
        <div
          ref={scrollRef}
          onScroll={checkScroll}
          className="flex gap-6 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth px-4 md:px-8 py-6" // ⭐ اضافه کردن py-6
          style={{
            scrollbarWidth: 'none',
            msOverflowStyle: 'none',
          }}
        >
          {/* ... products ... */}
        </div>
        
        {/* ... gradients ... */}
      </div>
    )}
  </section>
);
```

---

## CSS اضافی (اگر نیاز بود):

```css
/* src/index.css */

/* اطمینان از نمایش shadow ها */
.overflow-y-visible {
  overflow-y: visible !important;
}

/* جلوگیری از clip شدن */
section {
  contain: none;
}

/* اگر هنوز مشکل داری، این رو اضافه کن */
.no-clip {
  overflow: clip;
  overflow-clip-margin: 20px;
}
```

---

## ✅ چک‌لیست تغییرات:

- [x] تغییر `overflow-hidden` به `overflow-visible` در section
- [x] اضافه کردن `min-h-[200px]` به container اسکرول
- [x] اضافه کردن `py-4` یا `py-6` به div اسکرول
- [x] اضافه کردن `overflow-y-visible` به div اسکرول
- [x] حذف هر `contain: layout` یا `contain: paint` که باعث clip شدن بشه

---

## 🎯 نتیجه:

```
┌─────────────────────────────────────────┐
│  Section - overflow-visible            │
│  ┌───────────────────────────────────┐  │
│  │ Container - min-height            │  │
│  │  ╔═══════════════════════════╗    │  │
│  │  ║  Item with Shadow ✓      ║    │  │
│  │  ║  Shadow نمایش داده میشه  ║    │  │
│  │  ╚═══════════════════════════╝    │  │
│  └───────────────────────────────────┘  │
└─────────────────────────────────────────┘
```

**حالا همه چی کامل نمایش داده میشه! سایه‌ها، border glow ها، و hover effects همه درست کار می‌کنن! 🎉**
