From 47334a958371297ef6bdb8f8c726f61e5e8abac6 Mon Sep 17 00:00:00 2001
From: duvvuvenkataramana <venkataramana2048@gmail.com>
Date: Thu, 13 Nov 2025 16:21:55 +0530
Subject: [PATCH] fix: truncate long language names in WakaTime card

Fixes #1488

Long language names like "Jupyter Notebook" were overlapping with the time bar in the WakaTime stats card. This fix:
- Adds a truncateText() function to limit language names to 18 characters
- Adds ellipsis (...) for truncated names
- Preserves the full language name in a title attribute for tooltip display
---
 src/cards/wakatime.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/cards/wakatime.js b/src/cards/wakatime.js
index 9107e82d51276..c7fea5cab586a 100644
--- a/src/cards/wakatime.js
+++ b/src/cards/wakatime.js
@@ -59,6 +59,18 @@ const formatLanguageValue = ({ display_format, lang }) => {
     : lang.text;
 };
 
+/**
+ * Truncate text if it exceeds max length and add ellipsis.
+ *
+ * @param {string} text The text to truncate.
+ * @param {number} maxLength Maximum length before truncation.
+ * @returns {string} The truncated text.
+ */
+const truncateText = (text, maxLength = 18) => {
+  if (text.length <= maxLength) return text;
+  return text.substring(0, maxLength - 3) + "...";
+};
+
 /**
  * Create compact WakaTime layout.
  *
@@ -73,13 +85,13 @@ const createCompactLangNode = ({ lang, x, y, display_format }) => {
   // @ts-ignore
   const color = languageColors[lang.name] || "#858585";
   const value = formatLanguageValue({ display_format, lang });
+  const truncatedName = truncateText(lang.name, 18);
 
   return `
     <g transform="translate(${x}, ${y})">
       <circle cx="5" cy="6" r="5" fill="${color}" />
-      <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${lang.name} - ${value}
-      </text>
+      <text data-testid="lang-name" x="15" y="10" class='lang-name'> title="${lang.name}"
+${truncatedName} - ${value}      </text>
     </g>
   `;
 };