diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js
index 32f71134f19865..e7b4d551549d96 100644
--- a/src/cards/stats-card.js
+++ b/src/cards/stats-card.js
@@ -35,10 +35,10 @@ const createTextNode = ({
${iconSvg}
${label}:
- ${kValue}
@@ -186,16 +186,17 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
};
/*
- When hide_rank=true, minimum card width is max of 270 and length of title + paddings.
- When hide_rank=false, minimum card_width is 340.
+ When hide_rank=true, the minimum card width is 270 px + the title length and padding.
+ When hide_rank=false, the minimum card_width is 340 px + the icon width (if show_icons=true).
Numbers are picked by looking at existing dimensions on production.
*/
+ const icon_width = show_icons ? 16 : 0
const minCardWidth = hide_rank
? clampValue(
50 /* padding */ + calculateTextWidth() * 2,
270,
Infinity)
- : 340
+ : 340 + icon_width
const defaultCardWidth = hide_rank ? 270 : 495
let width = isNaN(card_width) ? defaultCardWidth : card_width
if (width < minCardWidth) {
@@ -226,7 +227,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
// Conditionally rendered elements
const rankCircle = hide_rank
? ""
- : `
@@ -252,7 +253,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
gap: lheight,
direction: "column",
}).join("")}
-
+
`);
};