fixed some bugs: filter, detail

src/components/Navbar/Navbar.module.scss

@@ -27,7 +27,7 @@
     font-weight: bold;
     color: #ffffff;
      margin: 8px 14px 6px;
-     @media screen and (max-width: 426px) {
+     @media screen and (max-width: 500px) {
      font-size: 14px;
      margin: 8px 10px 6px;
     }
@@ -57,7 +57,7 @@
     gap: 10px;
     margin: 0 auto;
     cursor: pointer;
-    @media screen and (max-width: 426px) {
+    @media screen and (max-width: 500px) {
       height: 40px;
       justify-content: flex-start;
       padding: 10px 15px 6px;
@@ -73,11 +73,11 @@
     flex-direction: column;
     img{
       width: 300px;
-      @media screen and (max-width: 426px) {
+      @media screen and (max-width: 500px) {
       width: 100%;
     }
     }
-    @media screen and (max-width: 426px) {
+    @media screen and (max-width: 500px) {
       width: 100%;
     }
 
@@ -207,7 +207,7 @@
   @media screen and (min-width: 1024px) {
     display: none;
   }
-  @media screen and (max-width: 426px) {
+  @media screen and (max-width: 500px) {
     padding: 9px 0;
   }
 }
@@ -276,7 +276,7 @@
    align-items: center;
    gap: 8px;
    margin-left: auto;
-    @media screen and (max-width: 426px) {
+    @media screen and (max-width: 500px) {
       display: none;
     }
   }

src/components/ProductCard/imageCarousel/index.jsx

@@ -29,15 +29,15 @@ const ImageCarousel = ({
       : images[0]?.images_1200x1200 || "";
 
   // Auto-slide functionality
-  useEffect(() => {
-    if (!hasMultipleImages || isModalOpen) return;
+  // useEffect(() => {
+  //   if (!hasMultipleImages || isModalOpen) return;
 
-    const interval = setInterval(() => {
-      setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
-    }, 9000);
+  //   const interval = setInterval(() => {
+  //     setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
+  //   }, 9000);
 
-    return () => clearInterval(interval);
-  }, [hasMultipleImages, images, isModalOpen]);
+  //   return () => clearInterval(interval);
+  // }, [hasMultipleImages, images, isModalOpen]);
 
   // Reset zoom/rotation when modal closes or image changes
   useEffect(() => {

src/i18n/locales/en.js

@@ -179,6 +179,8 @@ export default {
     similarProducts: "Similar Products",
     description: "Product description",
     price: "Price",
+    readMore: "Read more...",
+    readLess: "Show less",
   },
   wishtList: {
     likedProducts: "Favorites",

src/i18n/locales/ru.js

@@ -176,6 +176,8 @@ export default {
     similarProducts: "Похожие товары",
     description: "Описание товара",
     price: "Цена",
+    readMore: "Читать далее...",
+    readLess: "Свернуть",
   },
   wishtList: {
     likedProducts: "Избранные",

src/i18n/locales/tm.js

@@ -179,6 +179,8 @@ export default {
     similarProducts: "Meňzeş harytlar",
     description: "Haryt barada düşündiriş",
     price: "Bahasy",
+    readMore: "Giňişleýin oka...",
+    readLess: "Gysgaltmak",
   },
   wishtList: {
     likedProducts: "Halanlarym",

src/pages/Category/hooks/useCategoryProducts.js

@@ -65,7 +65,6 @@ const useCategoryProducts = ({
     !isSubCategory &&
     !searchQuery &&
     !selectedFilterCategory &&
-    !selectedFilterBrand &&
     !brandId &&
     !collectionId;
 
@@ -79,6 +78,7 @@ const useCategoryProducts = ({
       page: currentPage,
       min_price: minPrice || undefined,
       max_price: maxPrice || undefined,
+      brands: selectedFilterBrand || undefined,
     },
     {
       skip: !shouldUseBaseQuery,
@@ -158,14 +158,6 @@ const useCategoryProducts = ({
 
     const executeFetch = async () => {
       try {
-        if (selectedFilterBrand) {
-          await fetchBrandPaginated({
-            id: selectedFilterBrand,
-            ...fetchParams,
-          });
-          return;
-        }
-
         if (selectedFilterCategory) {
           await fetchCategoryPaginated({
             category: {

src/pages/ProductDetail/ProductPage.module.scss

@@ -50,7 +50,7 @@
   background: #fff;
   // padding: 20px;
   border-radius: 8px;
-  width: 35%;
+  width: 36%;
   flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
 
@@ -167,6 +167,7 @@
   display: flex;
   gap: 8px;
   align-items: center;
+  width: 100%;
 }
 
 .addToCartButton {
@@ -350,6 +351,29 @@
   line-height: 1.7;
 }
 
+.productDescriptionCollapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 10;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.readMoreBtn {
+  background: none;
+  border: none;
+  color: #1890ff;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 8px 0 0 0;
+  font-size: 14px;
+  display: inline-block;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+
 // ─── Mobile sticky bar ────────────────────────────────────────────
 .productActionsMobile {
   display: none;
@@ -376,7 +400,7 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  width: 35%;
+  width: 45%;
 
   .price {
     font-size: 20px;
@@ -395,7 +419,7 @@
 .mobileBtnContainer {
   display: flex;
   gap: 8px;
-  width: 65%;
+  width: 55%;
 }
 
 // ─── Similar products ─────────────────────────────────────────────

src/pages/ProductDetail/index.jsx

@@ -63,6 +63,18 @@ const ProductPage = ({
     favoriteProducts.some((fav) => fav.product?.id === product?.id),
   );
 
+  const [isDescExpanded, setIsDescExpanded] = useState(false);
+  const [showReadMore, setShowReadMore] = useState(false);
+  const descRef = React.useRef(null);
+  const productInfoRef = React.useRef(null);
+
+  useEffect(() => {
+    if (!product?.description) return;
+
+    const plainText = product.description.replace(/<[^>]*>/g, "").trim();
+    setShowReadMore(plainText.length > 300);
+  }, [product?.description]);
+
   const { getCartItem } = useCart();
 
   const [addToCart] = useAddToCartMutation();
@@ -319,7 +331,7 @@ const ProductPage = ({
         </div>
 
         {/* KOLON 2: İsim + Meta + Description */}
-        <div className={styles.productInfo}>
+        <div className={styles.productInfo} ref={productInfoRef}>
           {/* Meta tablo */}
           <div className={styles.productMeta}>
             <h1 className={styles.productTitle}>{product.name}</h1>
@@ -374,9 +386,28 @@ const ProductPage = ({
                 </p>
               </div>
               <div
-                className={styles.productDescription}
+                ref={descRef}
+                className={`${styles.productDescription} ${
+                  !isDescExpanded ? styles.productDescriptionCollapsed : ""
+                }`}
                 dangerouslySetInnerHTML={{ __html: product.description }}
               />
+              {showReadMore && !isDescExpanded && (
+                <button
+                  className={styles.readMoreBtn}
+                  onClick={() => setIsDescExpanded(true)}
+                >
+                  {t("product.readMore")}
+                </button>
+              )}
+              {showReadMore && isDescExpanded && (
+                <button
+                  className={styles.readMoreBtn}
+                  onClick={() => setIsDescExpanded(false)}
+                >
+                  {t("product.readLess")}
+                </button>
+              )}
             </div>
           )}
         </div>