fix(svg): truncate long usernames in badge header to prevent overflow (JhaSourav07#788)

## Description

Fixes JhaSourav07#623

## Pillar
- [x] 📐 Pillar 2 — Geometric SVG Improvement

## What changed
The username title in the SVG badge was rendered at a fixed font size
and position with no truncation or scaling in both the default renderer
(`lib/svg/generator.ts:181`) and the auto-theme renderer
(`lib/svg/generator.ts:326`).

Added a small `truncateUsername` helper that caps display length at 20
characters and appends an ellipsis for longer names. Applied
consistently across both rendering paths so the behavior is uniform
regardless of theme.

Tested locally with a 39-character username — header now stays within
badge bounds on both paths.

## Visual Preview
Tested with:
```
curl "https://commitpulse.vercel.app/api/streak?user=averylongusernamethatbreaks" -o overflow_test.svg
```
Username is now truncated cleanly inside the badge header.

## Checklist before requesting a review:
- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors.
- [x] My commits follow the Conventional Commits format.
- [x] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have starred the repo.
- [x] I have made sure that I have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse quality standard.

Author: JhaSourav07

lib/svg/generator.ts

@@ -8,6 +8,10 @@ import { sanitizeFont, sanitizeHexColor, sanitizeRadius, sanitizeGoogleFontUrl }
 import { SVG_WIDTH, SVG_HEIGHT, FONT_MAP } from './constants';
 
 // helpers
+function truncateUsername(name: string, max = 20): string {
+  return name.length > max ? name.slice(0, max) + '…' : name;
+}
+
 function getSizeScale(size?: 'small' | 'medium' | 'large'): number {
   if (size === 'small') return 400 / SVG_WIDTH;
   if (size === 'large') return 800 / SVG_WIDTH;
@@ -191,7 +195,7 @@ function renderFooter(
   const s = createScaler(sf);
   return `
   ${!params.hide_stats ? renderStatsSection(stats, labels, s) : ''}
-  ${!params.hide_title ? `<text x="${s(300)}" y="${s(50)}" text-anchor="middle" class="title">${safeUser.toUpperCase()}</text>` : ''}
+  ${!params.hide_title ? `<text x="${s(300)}" y="${s(50)}" text-anchor="middle" class="title">${truncateUsername(safeUser).toUpperCase()}</text>` : ''}
   <rect x="${s(100)}" y="${s(60)}" width="${s(400)}" height="${sf}" fill="${accent}" fill-opacity="0.3">
     <animate attributeName="y" values="${s(80)};${s(320)};${s(80)}" dur="${params.speed || '8s'}" repeatCount="indefinite" />
   </rect>`;
@@ -370,7 +374,7 @@ function generateAutoThemeSVG(
   ${!params.hide_stats ? renderStatsSection(stats, labels, s) : ''}
 ${
   !params.hide_title
-    ? `<text x="${s(300)}" y="${s(50)}" text-anchor="middle" class="title">${safeUser.toUpperCase()}</text>`
+    ? `<text x="${s(300)}" y="${s(50)}" text-anchor="middle" class="title">${truncateUsername(safeUser).toUpperCase()}</text>`
     : ''
 }