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("")} - + `); };