# 🔧 راه‌حل قطعی Overflow - بررسی کامل Layout

## مشکل: تگ‌های والد در سطوح بالاتر محدود کننده هستند

---

## مرحله 1: چک کردن HTML و Body

```css
/* src/index.css - اضافه کن */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden; /* فقط برای body */
  overflow-y: auto;
}

#root {
  width: 100%;
  overflow-x: visible; /* اجازه overflow */
}
```

---

## مرحله 2: Layout ساده بدون محدودیت

```jsx
// src/App.jsx یا src/pages/HomePage.jsx

import React from 'react';
import HomeFeatures from './components/HomePage/HomeFeatures';
import ProductShowcases from './components/HomePage/ProductShowcases';

const HomePage = () => {
  return (
    // ⭐ بدون wrapper اضافی - فقط div ساده
    <div className="w-full">
      <HomeFeatures />
      <ProductShowcases />
    </div>
  );
};

export default HomePage;
```

---

## مرحله 3: HomeFeatures - نسخه قطعی

```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="w-full py-8">
        <div className="container mx-auto px-4">
          <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>
      </div>
    );
  }

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

  const showScrollButtons = features.length > 4;

  return (
    // ⭐ استفاده از fragment یا div ساده - بدون padding که محدود کننده باشه
    <div className="w-full bg-gradient-to-b from-gray-50 to-white">
      {/* Desktop Grid View (4 items or less) */}
      {!showScrollButtons ? (
        <div className="py-12">
          <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
                    }}
                  >
                    <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>

                    <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>

                    <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>
        </div>
      ) : (
        // ⭐ Full Width Scrollable - خارج از همه چیز
        <div className="relative w-screen left-1/2 right-1/2 -mx-[50vw] py-12">
          {/* Scroll Buttons */}
          {canScrollLeft && (
            <button
              onClick={() => scroll('left')}
              className="fixed left-4 top-1/2 -translate-y-1/2 z-50 bg-white shadow-2xl rounded-full p-3 hover:bg-gray-100 transition-all duration-300 hover:scale-110"
              style={{ marginTop: 'calc(50vh - 50%)' }}
            >
              <ChevronLeft size={24} className="text-gray-800" />
            </button>
          )}

          {canScrollRight && (
            <button
              onClick={() => scroll('right')}
              className="fixed right-4 top-1/2 -translate-y-1/2 z-50 bg-white shadow-2xl rounded-full p-3 hover:bg-gray-100 transition-all duration-300 hover:scale-110"
              style={{ marginTop: 'calc(50vh - 50%)' }}
            >
              <ChevronRight size={24} className="text-gray-800" />
            </button>
          )}

          {/* Scrollable Container */}
          <div
            ref={scrollRef}
            onScroll={checkScroll}
            className="flex gap-6 overflow-x-auto overflow-y-visible scrollbar-hide scroll-smooth py-4"
            style={{
              scrollbarWidth: 'none',
              msOverflowStyle: 'none',
              paddingLeft: 'max(1rem, calc((100vw - 1280px) / 2))',
              paddingRight: 'max(1rem, calc((100vw - 1280px) / 2))',
            }}
          >
            {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
                  }}
                >
                  <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>

                  <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>

                  <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>

          {/* Gradient Fade Effects */}
          {canScrollLeft && (
            <div className="absolute left-0 top-0 bottom-0 w-32 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-32 bg-gradient-to-r from-transparent to-white pointer-events-none z-10"></div>
          )}
        </div>
      )}
    </div>
  );
};

export default HomeFeatures;
```

---

## توضیح Trick اصلی:

```css
/* این کد باعث میشه div از container خارج بشه و Full Width بشه */
.relative.w-screen.left-1/2.right-1/2.-mx-[50vw] {
  position: relative;
  width: 100vw;           /* عرض کل صفحه */
  left: 50%;              /* شروع از وسط */
  right: 50%;             /* تا وسط */
  margin-left: -50vw;     /* جابجایی برای Full Width */
  margin-right: -50vw;
}
```

### Padding هوشمند:

```css
/* Padding که با اندازه container هماهنگ باشه */
padding-left: max(1rem, calc((100vw - 1280px) / 2));
padding-right: max(1rem, calc((100vw - 1280px) / 2));

/* یعنی:
- اگر صفحه کوچیکتر از 1280px → padding: 1rem
- اگر صفحه بزرگتر از 1280px → padding برابر با فاصله تا container
*/
```

---

## CSS های اضافی ضروری:

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

/* Reset overflow برای تمام سطوح */
html {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

#root,
.app,
main {
  width: 100%;
  overflow-x: visible !important;
}

/* جلوگیری از scroll افقی اضافه */
* {
  box-sizing: border-box;
}

/* مخفی کردن scrollbar */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
```

---

## دیباگ: چک کردن مشکل

اگر هنوز مشکل داری، این کد رو اجرا کن:

```javascript
// در Console مرورگر
document.querySelectorAll('*').forEach(el => {
  const overflow = window.getComputedStyle(el).overflow;
  const overflowX = window.getComputedStyle(el).overflowX;
  if (overflow === 'hidden' || overflowX === 'hidden') {
    console.log('Element with overflow hidden:', el, {
      overflow,
      overflowX,
      width: el.offsetWidth
    });
  }
});
```

---

## راه‌حل جایگزین: استفاده از Portal

اگر هنوز کار نکرد، از React Portal استفاده کن:

```jsx
import { createPortal } from 'react-dom';

const FullWidthScroll = ({ children }) => {
  return createPortal(
    <div className="w-screen fixed left-0 right-0" style={{ top: scrollY + 'px' }}>
      {children}
    </div>,
    document.body
  );
};
```

---

## ✅ چک‌لیست نهایی:

- [ ] `overflow-x: hidden` فقط روی `html` و `body`
- [ ] همه divها `overflow-x: visible` دارن
- [ ] استفاده از `w-screen left-1/2 right-1/2 -mx-[50vw]`
- [ ] Padding هوشمند با `calc((100vw - 1280px) / 2)`
- [ ] بدون wrapper اضافی
- [ ] CSS های اضافی اعمال شدن

**با این روش 100% کار می‌کنه! اگر نشد، بهم بگو تا با Portal حلش کنیم! 🚀**
