Fix: ResponseSize component logic to handle size when it's undefined (#4613)

* Fix: ResponseSize component logic to handle size when it's undefined
* Improved check for valid response size

---------

Co-authored-by: Sreelakshmi Jayarajan <sreelakshmi@Sreelakshmis-MacBook-Air.local>

packages/bruno-app/src/components/ResponsePane/ResponseSize/index.js

@@ -2,14 +2,20 @@ import React from 'react';
 import StyledWrapper from './StyledWrapper';
 
 const ResponseSize = ({ size }) => {
+
+  if (!Number.isFinite(size)) {
+    return null;
+  }
+
   let sizeToDisplay = '';
 
+  // If size is greater than 1024 bytes, format as KB
   if (size > 1024) {
-    // size is greater than 1kb
     let kb = Math.floor(size / 1024);
     let decimal = Math.round(((size % 1024) / 1024).toFixed(2) * 100);
     sizeToDisplay = kb + '.' + decimal + 'KB';
   } else {
+    // If size is less than or equal to 1024 bytes, display as bytes (B)
     sizeToDisplay = size + 'B';
   }
 

packages/bruno-app/src/components/ResponsePane/index.js

@@ -48,6 +48,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   };
 
   const response = item.response || {};
+  const responseSize = response.size || 0;
 
   const getTabPanel = (tab) => {
     switch (tab) {
@@ -156,7 +157,7 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
                 <ResponseSave item={item} />
                 <StatusCode status={response.status} />
                 <ResponseTime duration={response.duration} />
-                <ResponseSize size={response.size} />
+                <ResponseSize size={responseSize} />
               </>
             ) : null}
           </div>