diff --git a/ui/common/src/components/Modal.tsx b/ui/common/src/components/Modal.tsx
index 57bb3e83..94a3b9c6 100644
--- a/ui/common/src/components/Modal.tsx
+++ b/ui/common/src/components/Modal.tsx
@@ -66,7 +66,7 @@ const ModalDialog = css`
   @media (max-width: 1199.98px) {
     width: 95% !important;
     max-width: 95% !important;
-    max-height: calc(100% - 1.5rem) !important;
+    max-height: calc(100% - 1.5rem);
   }
 `;
 
diff --git a/ui/common/src/utils/formatSummaryField.ts b/ui/common/src/utils/formatSummaryField.ts
index fbba0aa6..f4999f3c 100644
--- a/ui/common/src/utils/formatSummaryField.ts
+++ b/ui/common/src/utils/formatSummaryField.ts
@@ -1,7 +1,7 @@
 import sanitizeHtml from 'sanitize-html';
 
 // eslint-disable-next-line
-const urlRegex = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
+const urlRegex = /(https?:\/\/)(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
 const LINE_BREAKS = /(?:\r\n|\r|\n)/g;
 
 const replaceLineBreaks = (text: string): string => {
diff --git a/ui/webapp/src/layout/stats/HorizontalBarChart.tsx b/ui/webapp/src/layout/stats/HorizontalBarChart.tsx
index c7e6a68e..6ee5bcf7 100644
--- a/ui/webapp/src/layout/stats/HorizontalBarChart.tsx
+++ b/ui/webapp/src/layout/stats/HorizontalBarChart.tsx
@@ -69,6 +69,8 @@ const HorizontalBarChart = (props: Props) => {
       },
       colors: ['var(--color-stats-1)'],
       xaxis: {
+        min: 0,
+        tickAmount: 6,
         categories: sortedKeys(),
         labels: {
           style: {
@@ -77,7 +79,7 @@ const HorizontalBarChart = (props: Props) => {
           },
           formatter: (value: string): string => {
             if (!isUndefined(props.dataType) && props.dataType === 'bytes') {
-              return prettifyBytes(parseInt(value));
+              return prettifyBytes(parseInt(value), 1);
             } else {
               return parseInt(value).toString();
             }
@@ -102,11 +104,16 @@ const HorizontalBarChart = (props: Props) => {
       },
       responsive: [
         {
-          breakpoint: 992,
+          breakpoint: 1200,
           options: {
             xaxis: {
-              tickAmount: 3,
+              tickAmount: 4,
               max: maxValue(),
+              labels: {
+                style: {
+                  fontSize: '10px',
+                },
+              },
             },
           },
         },
diff --git a/ui/webapp/src/utils/prettifyBytes.ts b/ui/webapp/src/utils/prettifyBytes.ts
index edf49650..cf3add0b 100644
--- a/ui/webapp/src/utils/prettifyBytes.ts
+++ b/ui/webapp/src/utils/prettifyBytes.ts
@@ -1,13 +1,10 @@
-const prettifyBytes = (bytes: number, decimals: number = 2): string => {
-  if (!+bytes) return '0 Bytes';
-
+const prettifyBytes = (bytes: number, decimals = 2): string => {
+  if (bytes <= 0) return '0B';
   const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
+  const dm = decimals || 2;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`;
+  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]}`;
 };
 
 export default prettifyBytes;