fix(pricing): Simplify category chart to prevent overflow

- Replace complex price range bars with simple horizontal bars
- Use overflow-hidden to prevent bars extending beyond container
- Calculate bar width as percentage of max avg price
- Limit to top 12 categories for cleaner display
- Fixed-width labels prevent layout shift

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

cannaiq/src/pages/IntelligencePricing.tsx

@@ -196,43 +196,29 @@ export function IntelligencePricing() {
             <BarChart3 className="w-5 h-5 text-green-500" />
             Average Price by Category
           </h3>
-          <div className="space-y-3">
+          <div className="space-y-2">
-            {sortedCategories.map((cat) => (
+            {sortedCategories.slice(0, 12).map((cat) => {
-              <div key={cat.category} className="flex items-center gap-3">
+              const maxPrice = Math.max(...sortedCategories.map(c => c.avgPrice || 0), 1);
-                <span className="text-sm font-medium w-32 truncate" title={cat.category}>
+              const barWidth = Math.min(((cat.avgPrice || 0) / maxPrice) * 100, 100);
-                  {cat.category || 'Unknown'}
+              return (
-                </span>
+                <div key={cat.category} className="flex items-center gap-3">
-                <div className="flex-1 relative">
+                  <span className="text-sm font-medium w-28 truncate shrink-0" title={cat.category}>
-                  {/* Price range bar */}
+                    {cat.category || 'Unknown'}
-                  <div className="bg-gray-100 rounded-full h-6 relative">
+                  </span>
-                    {/* Min-Max range */}
+                  <div className="flex-1 min-w-0">
-                    <div
+                    <div className="bg-gray-100 rounded h-5 overflow-hidden">
-                      className="absolute top-0 h-6 bg-blue-100 rounded-full"
+                      <div
-                      style={{
+                        className="bg-gradient-to-r from-emerald-400 to-emerald-500 h-5 rounded transition-all"
-                        left: `${(cat.minPrice / (overall?.maxPrice || 100)) * 100}%`,
+                        style={{ width: `${barWidth}%` }}
-                        width: `${((cat.maxPrice - cat.minPrice) / (overall?.maxPrice || 100)) * 100}%`,
+                      />
-                      }}
+                    </div>
-                    />
-                    {/* Average marker */}
-                    <div
-                      className="absolute top-0 h-6 w-1 bg-green-500 rounded"
-                      style={{ left: `${(cat.avgPrice / (overall?.maxPrice || 100)) * 100}%` }}
-                    />
                   </div>
-                </div>
+                  <span className="text-sm font-mono font-semibold text-emerald-600 w-16 text-right shrink-0">
-                <div className="flex gap-4 text-xs w-48">
+                    {formatPrice(cat.avgPrice)}
-                  <span className="text-gray-500">
-                    Min: <span className="text-blue-600 font-mono">{formatPrice(cat.minPrice)}</span>
-                  </span>
-                  <span className="text-gray-500">
-                    Avg: <span className="text-green-600 font-mono font-bold">{formatPrice(cat.avgPrice)}</span>
-                  </span>
-                  <span className="text-gray-500">
-                    Max: <span className="text-orange-600 font-mono">{formatPrice(cat.maxPrice)}</span>
                   </span>
                 </div>
-              </div>
+              );
-            ))}
+            })}
           </div>
         </div>