From 2cc7c7bcaf2f04f4b8ee40023c827dffbb92121e Mon Sep 17 00:00:00 2001
From: filemon <danielfilemondev@gmail.com>
Date: Mon, 23 Mar 2026 22:20:16 -0300
Subject: [PATCH] Fix Blobbi ground contact by compensating for SVG padding

The SVG viewBox has empty space at the bottom (~12% padding).
This was causing Blobbi to appear floating above the ground.

Fix:
- Changed inner container to use 'items-end' for bottom alignment
- Added negative marginBottom (-10% of size) to pull Blobbi down
- This compensates for the SVG's internal bottom padding

Shadow restored:
- Back to bottom: -4 (was 0)
- Size: 60% width, 12% height
- Blur: 2px
- Better visual separation from Blobbi

Result: Blobbi now visually sits on the ground with proper
shadow placement underneath.
---
 .../components/BlobbiCompanionVisual.tsx      | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/blobbi/companion/components/BlobbiCompanionVisual.tsx b/src/blobbi/companion/components/BlobbiCompanionVisual.tsx
index 2fe0d25e..0bce6c38 100644
--- a/src/blobbi/companion/components/BlobbiCompanionVisual.tsx
+++ b/src/blobbi/companion/components/BlobbiCompanionVisual.tsx
@@ -125,29 +125,36 @@ export function BlobbiCompanionVisual({
       className={cn('relative', className)}
       style={{ width: size, height: size }}
     >
-      {/* Shadow underneath - soft ellipse anchored at ground level */}
+      {/* Shadow underneath - soft ellipse */}
       <div
         className="absolute pointer-events-none"
         style={{
-          bottom: 0,
+          bottom: -4,
           left: '50%',
-          width: size * 0.55,
-          height: size * 0.1,
+          width: size * 0.6,
+          height: size * 0.12,
           transform: `translateX(-50%) scaleX(${shadowScale})`,
-          background: `radial-gradient(ellipse at center, rgba(0,0,0,${shadowOpacity}) 0%, rgba(0,0,0,${shadowOpacity * 0.4}) 50%, transparent 75%)`,
+          background: `radial-gradient(ellipse at center, rgba(0,0,0,${shadowOpacity}) 0%, rgba(0,0,0,${shadowOpacity * 0.5}) 40%, transparent 70%)`,
           borderRadius: '50%',
-          filter: 'blur(1px)',
+          filter: 'blur(2px)',
           transition: isDragging ? 'none' : 'transform 0.1s ease-out',
         }}
       />
       
       {/* Blobbi visual with floating transform */}
+      {/* 
+        The SVG has empty space at the bottom (~12% of viewBox).
+        We use items-end to align Blobbi to the bottom of the container,
+        and add a small negative margin to pull it down to ground level.
+      */}
       <div
-        className="size-full"
+        className="size-full flex items-end justify-center"
         style={{
           transform: blobbiTransform,
           transformOrigin: 'center bottom',
           transition: isDragging ? 'none' : 'transform 0.05s ease-out',
+          // Pull Blobbi down to compensate for SVG bottom padding (~10% of size)
+          marginBottom: -size * 0.10,
         }}
       >
         {companion.stage === 'baby' && (