From acbc03dc0f2e70da946fbb75822bbe9d041fb729 Mon Sep 17 00:00:00 2001
From: nekiwo <58634064+nekiwo@users.noreply.github.com>
Date: Tue, 4 Oct 2022 03:00:48 -0500
Subject: [PATCH] Fix card length during error (#2105)

* Fix card length during error

Fixes #1774
The size of the box should be 550px to allow 25px padding from both sides
I found the width of the text using `getComputedTextLength()` method

* fix: improve error card size

Co-authored-by: rickstaa <rick.staa@outlook.com>
---
 src/common/utils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/utils.js b/src/common/utils.js
index ba61cf8119830..fc462d3214c9f 100644
--- a/src/common/utils.js
+++ b/src/common/utils.js
@@ -11,13 +11,13 @@ import { themes } from "../../themes/index.js";
  */
 const renderError = (message, secondaryMessage = "") => {
   return `
-    <svg width="495" height="120" viewBox="0 0 495 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="576.5" height="120" viewBox="0 0 576.5 120" fill="none" xmlns="http://www.w3.org/2000/svg">
     <style>
     .text { font: 600 16px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
     .small { font: 600 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: #252525 }
     .gray { fill: #858585 }
     </style>
-    <rect x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
+    <rect x="0.5" y="0.5" width="575.5" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
     <text x="25" y="45" class="text">Something went wrong! file an issue at https://tiny.one/readme-stats</text>
     <text data-testid="message" x="25" y="55" class="text small">
       <tspan x="25" dy="18">${encodeHTML(message)}</tspan>