kyd-shared-badge 0.3.25 → 0.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.25",
+  "version": "0.3.26",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/Skills.tsx

@@ -197,6 +197,24 @@ const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix
     return () => window.removeEventListener('resize', measure);
   }, []);
 
+  // Track container width changes more reliably (including print/headless layouts)
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    try {
+      const ro = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const width = entry.contentRect?.width || el.clientWidth || 0;
+          setContainerWidth(width);
+        }
+      });
+      ro.observe(el);
+      return () => ro.disconnect();
+    } catch {
+      // no-op: older engines
+    }
+  }, []);
+
   // Nudge layout for headless/print contexts so responsive containers measure correctly
   useEffect(() => {
     if (typeof window !== 'undefined') {
@@ -234,16 +252,29 @@ const Skills = ({ skillsCategoryRadar, headless }: { skillsMatrix?: SkillsMatrix
           <div className={'rounded-lg p-4 border kyd-avoid-break'} style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
             <h4 className={'font-semibold mb-3'} style={{ color: 'var(--text-main)' }}>Skills Footprint</h4>
             <p className={'text-sm mb-4'} style={{ color: 'var(--text-secondary)' }}>The bubble chart visualizes individual skills, where bubble size reflects the weight of supporting evidence and placement indicates relative strength across the skill set.</p>
-            <div ref={containerRef} className={'kyd-avoid-break'} style={{ width: '100%', height: 340, position: 'relative', breakInside: 'avoid', pageBreakInside: 'avoid' as unknown as undefined }}>
+            <div
+              ref={containerRef}
+              className={'kyd-avoid-break'}
+              style={{
+                width: '100%',
+                height: 340,
+                position: 'relative',
+                overflow: 'visible',
+                breakInside: 'avoid',
+                pageBreakInside: 'avoid' as unknown as undefined,
+              }}
+            >
               {(() => {
-                const width = containerWidth || 600;
+                const measured = containerWidth || (containerRef.current?.clientWidth || 0);
+                const parentWidth = containerRef.current?.parentElement?.clientWidth || measured;
+                const width = Math.max(0, Math.min(measured, parentWidth));
                 const height = 300;
                 const innerWidth = Math.max(0, width);
                 const innerHeight = Math.max(0, height);
-                const packed = packBubbles(combinedBubbleData, innerWidth, innerHeight, 6);
+                const packed = packBubbles(combinedBubbleData, innerWidth, innerHeight, headless ? 10 : 6);
                 return (
-                  <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
-                    <g transform={`translate(-25, -20)`}>
+                  <svg width={'100%'} height={height} viewBox={`0 0 ${width} ${height}`} preserveAspectRatio="xMidYMid meet">
+                    <g transform={headless ? 'translate(0, 0)' : 'translate(-25, -20)'}>
                       {packed.map((b, idx) => {
                         const clipId = `bubble-clip-${idx}`;
                         const canShowText = b.r >= 14;