From 50a2a88750592ba979978f5fc1e289d913e78a85 Mon Sep 17 00:00:00 2001
From: dobri1408 <50819975+dobri1408@users.noreply.github.com>
Date: Thu, 26 Sep 2024 12:58:23 +0300
Subject: [PATCH] Update Download.jsx to force the width

---
 src/Utils/Download.jsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/Utils/Download.jsx b/src/Utils/Download.jsx
index 813f50e..a731b46 100644
--- a/src/Utils/Download.jsx
+++ b/src/Utils/Download.jsx
@@ -225,21 +225,18 @@ export default function Download(props) {
         // Make all elements inside SVG modify only x and width attributes (no scaling)
         const elements = svgClone.querySelectorAll('*');
         elements.forEach((el) => {
-          // Modify only x and width attributes
           ['x', 'width', 'cx'].forEach((attr) => {
             if (el.hasAttribute(attr)) {
               const originalValue = parseFloat(el.getAttribute(attr));
-              el.setAttribute(attr, originalValue); // No scaling, just keep original values
+              el.setAttribute(attr, originalValue);
             }
           });
 
-          // Center text for svg with index 1
           if (index === 1 && el.tagName === 'text') {
             el.setAttribute('x', '50%');
             el.setAttribute('text-anchor', 'middle');
           }
 
-          // Ensure text color is black
           if (el.tagName === 'text') {
             el.setAttribute('fill', 'black');
             if (el.hasAttribute('style')) {
@@ -250,8 +247,7 @@ export default function Download(props) {
           }
         });
 
-        // Remove white background and set transparent
-        svgClone.style.background = 'none'; // Remove background color
+        svgClone.style.background = 'none';
         svgClone.setAttribute('style', 'background-color: transparent');
 
         if (svgWidth > maxWidth) maxWidth = svgWidth;
@@ -261,14 +257,23 @@ export default function Download(props) {
 
         if (index !== 1) svgClone.setAttribute('y', newY + totalTextHeight);
 
-        totalHeight += svgHeight; // Keep height unchanged
+        totalHeight += svgHeight;
 
         combinedSvg.appendChild(svgClone);
       });
 
       // Adjust the final combined SVG size based on the original dimensions
-      combinedSvg.setAttribute('width', maxWidth);
-      combinedSvg.setAttribute('height', totalHeight + totalTextHeight);
+      const forcedWidth = 700;
+      const aspectRatio = maxWidth / totalHeight;
+      const forcedHeight = forcedWidth / aspectRatio;
+
+      combinedSvg.setAttribute('width', forcedWidth);
+      combinedSvg.setAttribute('height', forcedHeight + totalTextHeight);
+
+      combinedSvg.setAttribute(
+        'viewBox',
+        `0 0 ${maxWidth} ${totalHeight + totalTextHeight}`,
+      );
 
       if (type === 'svg') {
         downloadSVG(combinedSvg, `${title}.${type.toLowerCase()}`);