better handling of card_width in wakatime card

src/cards/wakatime.js

@@ -84,9 +84,10 @@ const createCompactLangNode = ({ lang, x, y, display_format }) => {
  * @param {WakaTimeLang[]} args.langs The language objects.
  * @param {number} args.y The y position of the language node.
  * @param {"time" | "percent"} args.display_format The display format of the language node.
+ * @param {number} args.card_width Width in px of the card.
  * @returns {string[]} The language text node items.
  */
-const createLanguageTextNode = ({ langs, y, display_format }) => {
+const createLanguageTextNode = ({ langs, y, display_format, card_width }) => {
   return langs.map((lang, index) => {
     if (index % 2 === 0) {
       return createCompactLangNode({
@@ -98,7 +99,7 @@ const createLanguageTextNode = ({ langs, y, display_format }) => {
     }
     return createCompactLangNode({
       lang,
-      x: 230,
+      x: 230 + (card_width - 495) / 2,
       y: 12.5 + 12.5 * index,
       display_format,
     });
@@ -117,6 +118,7 @@ const createLanguageTextNode = ({ langs, y, display_format }) => {
  * @param {boolean=} args.hideProgress Whether to hide the progress bar.
  * @param {string} args.progressBarColor The color of the progress bar.
  * @param {string} args.progressBarBackgroundColor The color of the progress bar background.
+ * @param {number} args.progressBarWidth The width of the progress bar.
  * @returns {string} The text SVG node.
  */
 const createTextNode = ({
@@ -128,6 +130,7 @@ const createTextNode = ({
   hideProgress,
   progressBarColor,
   progressBarBackgroundColor,
+  progressBarWidth,
 }) => {
   const staggerDelay = (index + 3) * 150;
 
@@ -138,7 +141,7 @@ const createTextNode = ({
         y: 4,
         progress: percent,
         color: progressBarColor,
-        width: 220,
+        width: progressBarWidth,
         // @ts-ignore
         name: label,
         progressBarBackgroundColor,
@@ -150,7 +153,7 @@ const createTextNode = ({
       <text class="stat bold" y="12.5" data-testid="${id}">${label}:</text>
       <text
         class="stat"
-        x="${hideProgress ? 170 : 350}"
+        x="${hideProgress ? 170 : 130 + progressBarWidth}"
         y="12.5"
       >${value}</text>
       ${cardProgress}
@@ -223,7 +226,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   const {
     hide_title = false,
     hide_border = false,
-    card_width,
+    card_width = 495,
     hide,
     line_height = 25,
     title_color,
@@ -292,7 +295,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 
   // RENDER COMPACT LAYOUT
   if (layout === "compact") {
-    let width = (card_width || 495) - 5;
+    let width = card_width - 5;
     height = 90 + Math.round(filteredLanguages.length / 2) * 25;
 
     // progressOffset holds the previous language's width and used to offset the next language
@@ -332,6 +335,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
               y: 25,
               langs: filteredLanguages,
               display_format,
+              card_width: card_width,
             }).join("")
           : noCodingActivityNode({
               // @ts-ignore
@@ -359,6 +363,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
               // @ts-ignore
               progressBarBackgroundColor: textColor,
               hideProgress: hide_progress,
+              progressBarWidth: card_width - 275,
             });
           })
         : [
@@ -391,7 +396,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   const card = new Card({
     customTitle: custom_title,
     defaultTitle: titleText,
-    width: card_width || 495,
+    width: card_width,
     height,
     border_radius,
     colors: {