Compact layout grid order between WakaTime and Top Languages cards is inconsistent

[bbbugg]

Describe the bug

When using the compact layout for both WakaTime stats card and Top Languages card, the grid display is inconsistent:

• Both cards display as N rows and 2 columns in compact layout.
• WakaTime card fills the grid horizontally (row-first): 1-1 → 1-2 → 2-1 → 2-2 → ...
• Top Languages card fills the grid vertically (column-first): 1-1 → 2-1 → 3-1 → 1-2 → 2-2 → ...

This difference results in the two cards displaying the same data in visually different orders, which can be confusing for users expecting consistent sorting and layout behavior.

Expected behavior

No response

Screenshots / Live demo link

Additional context

No response

[emcc2302]

The issue is that the "Most Used Languages" (Top Languages) card and the "WakaTime Stats" card, both configured to display in a compact layout (described as N rows and 2 columns), are filling the grid in fundamentally different orders.

WakaTime Stats Card: Fills the grid row-first (horizontally). The order is:

Row 1, Column 1 → Row 1, Column 2

Row 2, Column 1 → Row 2, Column 2

...
This results in the languages being ordered across the rows.

Most Used Languages (Top Languages) Card: Fills the grid column-first (vertically). The order is:

Row 1, Column 1 → Row 2, Column 1 → Row 3, Column 1 → ...

Then: Row 1, Column 2 → Row 2, Column 2 → ...
This results in the languages being ordered down the columns.

This difference in data flow and visual ordering is confusing for users who expect a consistent layout and sorting behavior across all compact-style cards. The arrows in the image visually highlight this difference, showing the "Top Languages" card's items flowing down the left column and then starting at the top of the right column, while the "WakaTime Stats" card's items flow across the rows.

[bbbugg]

I have a solution in #4435 that can fix this issue.

[emcc2302]

Oh thanks for this,what we can do now ->Updating createLanguageTextNode to accept and use lineHeight.,,,Updating renderWakatimeCard to calculate or define lineHeight and pass it to the rendering function.,,,(Implicitly) Ensuring consistent grid logic (likely by using CSS Grid or correcting the column-splitting logic, as covered in the previous answer).

// --- 1. Language Node Rendering Function ---
// Now accepts and ignores lineHeight (as y is calculated by the caller)
function createLanguageTextNode(language, x, y, lineHeight) {
return <g transform="translate(${x}, ${y})"> <text class="language-name" x="0" y="0"> ${language.name} </text> <text class="language-percent" x="150" y="0" text-anchor="end"> ${language.percent} </text> </g>;
}

// --- 2. Main Card Rendering Function ---
function renderWakatimeCard(languagesData, isCompact = false) {
const numLanguages = languagesData.length;

// Define configurable line height
const COMPACT_LINE_HEIGHT = 20;
const DEFAULT_LINE_HEIGHT = 25;
const lineHeight = isCompact ? COMPACT_LINE_HEIGHT : DEFAULT_LINE_HEIGHT;

let cardHeight = 150;

if (isCompact) {
// Correct card height calculation using the new lineHeight
const rows = Math.ceil(numLanguages / 2);
cardHeight = 45 + (rows * lineHeight);
} else {
// Full layout height calculation
cardHeight = 150 + (numLanguages * lineHeight);
}

// Rendering Loop: Implements the ROW-FIRST (horizontal) order
let languageNodes = languagesData.map((lang, index) => {
let x, y;

if (isCompact) {
  // Logic for ROW-FIRST: consistent with the expected behavior
  const col = index % 2; 
  const row = Math.floor(index / 2);
  
  x = col === 0 ? 25 : 230; 
  // Y position is calculated using row index and the configurable lineHeight
  y = 40 + (row * lineHeight); 
} else {
  // Full layout vertical stacking
  x = 25;
  y = 40 + (index * lineHeight);
}

// Pass the calculated lineHeight (as required by the PR description)
return createLanguageTextNode(lang, x, y, lineHeight);

}).join('');

// Final SVG Markup
return <svg height="${cardHeight}" width="495"> <rect width="100%" height="100%" fill="#fff" rx="6" /> <text x="25" y="25" class="header">WakaTime Stats</text> <g>${languageNodes}</g> </svg>;
}

[adityasingh-0803]

I can work on this

[qwerty541]

Hello @bbbugg

Thank you for opening an issue.

I left my review about the problem and your pull request there #4435 (review)