From a07a2de7861e42bf89dfcafaf1fbdfe50cdafba9 Mon Sep 17 00:00:00 2001
From: filemon <danielfilemondev@gmail.com>
Date: Wed, 18 Mar 2026 10:09:08 -0300
Subject: [PATCH] fix: scope Blobbi shape colors and increase preview size

- Use fill/stroke attributes on <g> instead of global CSS to prevent color leakage
- Reduce grid columns from 5 to 4 for larger shape previews
- Reduce inner padding from inset-1 to inset-0.5 for bigger shapes
---
 src/components/BlobbiShapePicker.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/BlobbiShapePicker.tsx b/src/components/BlobbiShapePicker.tsx
index d65a5d97..47b997fb 100644
--- a/src/components/BlobbiShapePicker.tsx
+++ b/src/components/BlobbiShapePicker.tsx
@@ -63,7 +63,6 @@ function ShapePreview({ shape }: { shape: BlobbiShape }) {
     setViewBox(tight);
   }, [shape]);
 
-  // Build inline style to colorize all elements
   const fillColor = shape.previewColor || '#a1a1aa';
 
   return (
@@ -72,8 +71,12 @@ function ShapePreview({ shape }: { shape: BlobbiShape }) {
       className="w-full h-full"
       preserveAspectRatio="xMidYMid meet"
     >
-      <style>{`* { fill: ${fillColor}; stroke: ${fillColor}; }`}</style>
-      <g dangerouslySetInnerHTML={{ __html: shape.svg }} />
+      <g
+        className="blobbi-shape"
+        fill={fillColor}
+        stroke={fillColor}
+        dangerouslySetInnerHTML={{ __html: shape.svg }}
+      />
     </svg>
   );
 }
@@ -90,7 +93,7 @@ function ShapeGrid({
   onSelect: (shape: BlobbiShape) => void;
 }) {
   return (
-    <div className="grid grid-cols-5 gap-2">
+    <div className="grid grid-cols-4 gap-2">
       {shapes.map((shape) => (
         <button
           key={shape.id}
@@ -105,7 +108,7 @@ function ShapeGrid({
           )}
           title={shape.name}
         >
-          <div className="absolute inset-1">
+          <div className="absolute inset-0.5">
             <ShapePreview shape={shape} />
           </div>
         </button>