From 00a217ee0268b08fe2d55383ad56a2ee31d3986e Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Wed, 22 Jul 2026 15:30:54 +0330
Subject: [PATCH] fix(ui): unify ingredients section border container and fix
 sticky header overflow parent

---
 frontend/application/components/ProductPage.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/application/components/ProductPage.tsx b/frontend/application/components/ProductPage.tsx
index 32d6cd8..4e6a678 100644
--- a/frontend/application/components/ProductPage.tsx
+++ b/frontend/application/components/ProductPage.tsx
@@ -179,7 +179,7 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
   if (!product || !fullProduct || !calculation) return <div className="min-h-screen flex items-center justify-center">محصول یافت نشد</div>;
 
   return (
-    <div className="min-h-screen bg-medical-gray-50 pt-2 pb-36 sm:pb-20 px-4 sm:px-6 lg:px-8 font-vazir overflow-x-hidden" dir="rtl">
+    <div className="min-h-screen bg-medical-gray-50 pt-2 pb-36 sm:pb-20 px-4 sm:px-6 lg:px-8 font-vazir" dir="rtl">
       <div className="max-w-7xl mx-auto w-full">
         {/* Breadcrumbs for Mobile and Desktop */}
         <nav className="flex items-center gap-2 text-xs md:text-sm font-semibold text-medical-gray-600 mb-6 md:mb-10 overflow-x-auto whitespace-nowrap py-3 border-b border-medical-gray-100 font-vazir scrollbar-thin scrollbar-thumb-medical-gray-200 scrollbar-track-transparent pr-1" dir="rtl">
@@ -435,18 +435,18 @@ export default function ProductPage({ productSlug }: { productSlug: string }) {
             )}
 
             {/* Ingredients Section */}
-            <section className="space-y-8">
-              <div className="flex items-center gap-4">
+            <section className="bg-white rounded-[2.5rem] border border-medical-gray-200 p-8 md:p-10 shadow-md space-y-8">
+              <div className="flex items-center gap-4 border-b border-medical-gray-100 pb-6">
                 <div className="w-12 h-12 bg-canina-blue text-white rounded-2xl flex items-center justify-center shadow-lg">
                   <FlaskConical className="w-6 h-6" />
                 </div>
-                <h3 className="text-3xl font-black text-medical-gray-900 italic font-vazir">ترکیبات و آنالیز علمی</h3>
+                <h3 className="text-2xl md:text-3xl font-black text-medical-gray-900 italic font-vazir">ترکیبات و آنالیز علمی</h3>
               </div>
 
-              <div className="space-y-10">
+              <div className="space-y-8">
                 {/* Ingredients Cards */}
-                <div className="bg-white rounded-[2.5rem] p-8 md:p-10 border border-medical-gray-200 shadow-md">
-                  <h4 className="text-xs font-black text-medical-gray-400 uppercase tracking-widest mb-6 font-vazir">مواد تشکیل‌دهنده برتر</h4>
+                <div>
+                  <h4 className="text-xs font-black text-medical-gray-400 uppercase tracking-widest mb-4 font-vazir">مواد تشکیل‌دهنده برتر</h4>
                   <div className="flex flex-wrap gap-3">
                     {product.main_ingredients.map((ing, idx) => {
                       const termKey = termKeys.find(key => {