From ebeaadd7deed59a5433f53a570b47b2a528e48bf Mon Sep 17 00:00:00 2001
From: Nick Ruffles <27959011+TheDarthMole@users.noreply.github.com>
Date: Wed, 9 Sep 2026 20:53:56 +0100
Subject: [PATCH] chore(ui): use human readable transfer size for total bytes
 sent/received (#751)

Signed-off-by: Nick Ruffles <nick@ruffles.dev>
---
 frontend/src/components/PeerViewModal.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PeerViewModal.vue b/frontend/src/components/PeerViewModal.vue
index 697ec26..4c4149a 100644
--- a/frontend/src/components/PeerViewModal.vue
+++ b/frontend/src/components/PeerViewModal.vue
@@ -12,6 +12,7 @@ import { settingsStore } from "@/stores/settings";
 import { profileStore } from "@/stores/profile";
 import { base64_url_encode } from '@/helpers/encoding';
 import { apiWrapper } from "@/helpers/fetch-wrapper";
+import {humanFileSize} from '@/helpers/utils';
 
 const { t } = useI18n()
 
@@ -194,8 +195,8 @@ function ConfigQrUrl() {
                 <div class="col-md-12">
                   <h4>{{ $t('modals.peer-view.traffic') }}</h4>
                   <p><i class="fas fa-long-arrow-alt-down" :title="$t('modals.peer-view.download')"></i> {{
-                    selectedStats.BytesReceived }} Bytes / <i class="fas fa-long-arrow-alt-up"
-                      :title="$t('modals.peer-view.upload')"></i> {{ selectedStats.BytesTransmitted }} Bytes</p>
+                    humanFileSize(selectedStats.BytesReceived) }} / <i class="fas fa-long-arrow-alt-up"
+                      :title="$t('modals.peer-view.upload')"></i> {{ humanFileSize(selectedStats.BytesTransmitted) }}</p>
                   <h4>{{ $t('modals.peer-view.connection-status') }}</h4>
                   <ul>
                     <li>{{ $t('modals.peer-view.pingable') }}: {{ selectedStats.IsPingable }}</li>