fix: significantly increase X-axis height and margin to completely prevent label cutoff

src/pages/ProductDetails.tsx

@@ -108,13 +108,14 @@ const ProductDetails = () => {
         <h3 className="text-lg font-bold mb-8 text-zinc-900 dark:text-dark-text">Volume de Vendas por Data</h3>
         <div className="h-80 w-full">
           <ResponsiveContainer width="100%" height="100%">
-            <BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 40 }}>
+            <BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 80 }}>
               <CartesianGrid strokeDasharray="3 3" stroke="#222222" vertical={false} />
               <XAxis 
                 dataKey="date" stroke="#888888" fontSize={10} tickLine={false} axisLine={false}
                 interval={0}
                 angle={-45}
                 textAnchor="end"
+                height={80}
               />
               <YAxis stroke="#888888" fontSize={12} tickLine={false} axisLine={false} />
               <Tooltip