From 4bea03c0529409dbe61fccbc0fe3afb1e650dde2 Mon Sep 17 00:00:00 2001
From: rickstaa <rick.staa@outlook.com>
Date: Thu, 4 Nov 2021 11:08:18 +0100
Subject: [PATCH] fix: add icon width to stats-card min width calculation

---
 src/cards/stats-card.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

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 = ({
     <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
       ${iconSvg}
       <text class="stat bold" ${labelOffset} y="12.5">${label}:</text>
-      <text 
-        class="stat" 
-        x="${(showIcons ? 140 : 120) + shiftValuePos}" 
-        y="12.5" 
+      <text
+        class="stat"
+        x="${(showIcons ? 140 : 120) + shiftValuePos}"
+        y="12.5"
         data-testid="${id}"
       >${kValue}</text>
     </g>
@@ -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
     ? ""
-    : `<g data-testid="rank-circle" 
+    : `<g data-testid="rank-circle"
           transform="translate(${width - 50}, ${height / 2 - 50})">
         <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
@@ -252,7 +253,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         gap: lheight,
         direction: "column",
       }).join("")}
-    </svg> 
+    </svg>
   `);
 };