rect padding implemet

src/api/badge.js

@@ -42,8 +42,9 @@ router.get('/badge', async (req, res) => {
     const iconSize = size;
     const fontSize = calcFontSize(iconSize); 
     const textPadding = Math.round(iconSize * 0.4);
+    const textHpad = Math.round(fontSize * 0.6); // horizontal padding inside text rect
     const radius = style === 'flat' ? 3 : 0;
-    const textWidth = estimateTextWidth(effectiveLabel, fontSize);
+    const textWidth = estimateTextWidth(effectiveLabel, fontSize) + textHpad * 2;
     
     // Kinyerjük az ikon SVG-ből a width és height attribútumokat (ha vannak)
     let iconViewBoxWidth = iconSize;
@@ -54,8 +55,9 @@ router.get('/badge', async (req, res) => {
     if (heightMatch) iconViewBoxHeight = parseFloat(heightMatch[1]);
 
     // Ikon doboz mérete
-    const iconBoxWidth = iconViewBoxWidth + 5;
-    const iconBoxHeight = iconViewBoxHeight + 5;
+    const iconPad = 5;
+    const iconBoxWidth = iconViewBoxWidth + iconPad;
+    const iconBoxHeight = iconViewBoxHeight + iconPad;
 
     // Ha a color paraméter nincs megadva, próbáljuk kinyerni az ikon színét
     let effectiveColor = color;
@@ -79,12 +81,12 @@ router.get('/badge', async (req, res) => {
     const fontWeight = safeFontWeight; // paraméterből
 
     if (labelpos === 'left') {
-      // Külön dobozok: padding csak a széleken kell, a dobozokon belül nem!
+      // Külön dobozok: padding a szöveg körül!
       textElem = `<rect x="0" y="0" width="${textWidth}" height="${iconBoxHeight}" rx="${radius}" fill="${safeBgLabel}"/>
         <text x="${textWidth / 2}" y="${iconBoxHeight / 2}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" fill="${effectiveColor}" text-anchor="middle" dominant-baseline="middle">${safeLabel}</text>`;
       iconGroup = `
-        <rect x="${textWidth}" y="0" width="${iconBoxWidth + 5}" height="${iconBoxHeight}" rx="${radius}" fill="${safeBgIcon}"/>
-        <g transform="translate(${textWidth + (5 / 2)}, ${(iconBoxHeight - iconSize) / 2})">${iconSVG}</g>
+        <rect x="${textWidth}" y="0" width="${iconBoxWidth}" height="${iconBoxHeight}" rx="${radius}" fill="${safeBgIcon}"/>
+        <g transform="translate(${textWidth + (iconPad / 2)}, ${(iconBoxHeight - iconSize) / 2})">${iconSVG}</g>
       `;
     } else if (labelpos === 'above' || labelpos === 'below') {
       // Felső vagy alsó label: ikon doboz magassága = iconSize + 5, szélessége = szöveg doboz szélessége

src/lib/svg-utils.js

@@ -7,10 +7,11 @@ const FONT_FAMILY = 'Verdana,Geneva,DejaVu Sans,sans-serif';
 const calcFontSize = (size) => Math.round(size * 0.6);
 
 /**
- * Rough text-width estimate based on font-size and character count.
- * Uses a 0.6 coefficient which works well for Verdana / sans-serif.
+ * Text-width estimate based on font-size and character count.
+ * Uses a 0.65 coefficient with Verdana which has wider letterforms.
+ * Adds extra padding so the text never touches the rect edges.
  */
 const estimateTextWidth = (text, fontSize) =>
-  text.length * fontSize * 0.6;
+  text.length * fontSize * 0.65 + fontSize * 0.8;
 
 module.exports = { FONT_FAMILY, calcFontSize, estimateTextWidth };

test/svg-utils.test.js

@@ -29,17 +29,21 @@ describe('svg-utils', () => {
   describe('estimateTextWidth', () => {
     it('should estimate width based on text length and font size', () => {
       const width = estimateTextWidth('Hello', 14);
-      expect(width).toBe(5 * 14 * 0.6); // 42
+      // formula: text.length * fontSize * 0.65 + fontSize * 0.8
+      expect(width).toBe(5 * 14 * 0.65 + 14 * 0.8); // 56.7
     });
 
-    it('should return 0 for empty string', () => {
-      expect(estimateTextWidth('', 14)).toBe(0);
+    it('should include padding for empty string', () => {
+      // Even empty strings get the base padding
+      expect(estimateTextWidth('', 14)).toBe(14 * 0.8); // 11.2
     });
 
-    it('should scale linearly with font size', () => {
+    it('should scale with font size', () => {
       const w1 = estimateTextWidth('test', 10);
       const w2 = estimateTextWidth('test', 20);
-      expect(w2).toBe(w1 * 2);
+      // w1 = 4*10*0.65 + 10*0.8 = 34
+      // w2 = 4*20*0.65 + 20*0.8 = 68
+      expect(w2).toBe(68);
     });
   });
 });