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) {

apps/web/src/components/ShareModal.tsx

@@ -136,7 +136,7 @@ export function ShareModal({
           <div className="space-y-4">
             {/* Social Post Preview Section */}
             <div className="space-y-2">
-              <div className="bg-slate-50 rounded-2xl border border-slate-100 overflow-hidden shadow-inner">
+              <div className="bg-slate-50/50 rounded-2xl border border-slate-100 shadow-inner">
                 <div className="p-4 flex items-center gap-3 border-b border-white/50">
                   <div className="w-8 h-8 rounded-full bg-slate-200 animate-pulse" />
                   <div className="space-y-1">
@@ -145,7 +145,7 @@ export function ShareModal({
                   </div>
                 </div>
                 <div className="p-4 space-y-4">
-                  <div className="space-y-2">
+                  <div className="space-y-4">
                     <div className="h-2.5 w-full bg-slate-200 rounded animate-pulse" />
                     <div className="h-2.5 w-3/4 bg-slate-200 rounded animate-pulse" />
                   </div>
@@ -160,11 +160,11 @@ export function ShareModal({
                       }}
                     />
 
-                    <div className="relative p-2 md:p-4 flex flex-col items-center w-full">
+                    <div className="relative p-2 md:p-6 flex flex-col items-center w-full bg-slate-50/30">
                       <img
                         src={imagePreview}
                         alt={title || "Diagram"}
-                        className="w-full max-h-[45vh] object-contain transition-transform duration-700"
+                        className="w-full max-h-[50vh] object-contain transition-transform duration-700 rounded-xl"
                       />
                     </div>