fix(blog): optimize ShareModal dimensions and fix share button disappearing

apps/web/src/components/ComponentShareButton.tsx

@@ -32,21 +32,25 @@ export const ComponentShareButton: React.FC<ComponentShareButtonProps> = ({
         try {
             const element = document.getElementById(targetId);
             if (element) {
-                // Find existing share buttons and temporarily hide them during capture to avoid infinite recursion loops in screenshots
-                const shareButtons = element.querySelectorAll('[data-share-button="true"]');
-                shareButtons.forEach(btn => (btn as HTMLElement).style.opacity = '0');
-
                 const dataUrl = await htmlToImage.toPng(element, {
                     quality: 1,
                     type: 'image/png',
                     pixelRatio: 2,
-                    backgroundColor: '#ffffff',
-                    skipFonts: true
+                    backgroundColor: 'transparent',
+                    skipFonts: true,
+                    // Filter out any buttons that are part of the UI but shouldn't be in the image
+                    filter: (node) => {
+                        if (node.tagName === 'BUTTON' || (node as HTMLElement).dataset?.shareButton === 'true') {
+                            return false;
+                        }
+                        return true;
+                    },
+                    style: {
+                        // Ensure we don't accidentally cut off by resetting transform/margins inside the clone
+                        transform: 'none',
+                    }
                 });
 
-                // Restore buttons
-                shareButtons.forEach(btn => (btn as HTMLElement).style.opacity = '1');
-
                 setGeneratedImage(dataUrl);
             }
         } catch (err) {