From 1f3dfdd020f464fd368ec2232df411917e497f60 Mon Sep 17 00:00:00 2001
From: defnax <9952056+defnax@users.noreply.github.com>
Date: Sat, 1 Aug 2026 19:56:44 +0200
Subject: [PATCH] Fix status spacing issue

---
 webui-src/app/scss/components/_statusbar.scss |  2 +-
 webui-src/app/statusbar.js                    | 18 ++++++++++++++----
 webui-src/styles.css                          |  4 +++-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/webui-src/app/scss/components/_statusbar.scss b/webui-src/app/scss/components/_statusbar.scss
index 5dacb1f..d3e927c 100644
--- a/webui-src/app/scss/components/_statusbar.scss
+++ b/webui-src/app/scss/components/_statusbar.scss
@@ -23,7 +23,7 @@
   }
 
   &-item {
-    @include flex($align: center);
+    @include flex($align: center, $gap: 0.3rem);
   }
 
   &-divider {
diff --git a/webui-src/app/statusbar.js b/webui-src/app/statusbar.js
index eec34a0..7769a5e 100644
--- a/webui-src/app/statusbar.js
+++ b/webui-src/app/statusbar.js
@@ -355,16 +355,26 @@ const StatusBar = {
 
         // NAT — hidden when in hidden/darknet mode (same as Qt)
         !isHiddenMode && m('.statusbar-divider'),
-        !isHiddenMode && m('.statusbar-item', { title: natTooltip, style: 'cursor: help;' }, [
+        !isHiddenMode && m('.statusbar-item.statusbar-item--nat', {
+          title: natTooltip,
+          style: 'cursor: help; margin-left: 0.6rem;',
+        }, [
           m('span.statusbar-label', { style: 'margin-right: 0.35rem;' }, 'NAT:'),
-          m('.status-bullet', { style: { backgroundColor: natColor } }),
+          m('.status-bullet', {
+            style: { backgroundColor: natColor, marginLeft: '0.15rem', marginRight: '0.45rem' },
+          }),
         ]),
 
         // DHT — hidden when in hidden/darknet mode (same as Qt)
         !isHiddenMode && m('.statusbar-divider'),
-        !isHiddenMode && m('.statusbar-item', { title: dhtTooltip, style: 'cursor: help;' }, [
+        !isHiddenMode && m('.statusbar-item.statusbar-item--dht', {
+          title: dhtTooltip,
+          style: 'cursor: help; margin-left: 0.6rem;',
+        }, [
           m('span.statusbar-label', { style: 'margin-right: 0.35rem;' }, 'DHT:'),
-          m('.status-bullet', { style: { backgroundColor: dhtColor } }),
+          m('.status-bullet', {
+            style: { backgroundColor: dhtColor, marginLeft: '0.15rem', marginRight: '0.35rem' },
+          }),
           State.dhtActive && State.dhtOk && m('span.statusbar-extra-info', { style: 'margin-left: 0.35rem;' }, `${formatUnit(State.dhtRsNetSize)} (${formatUnit(State.dhtNetSize)})`),
         ]),
 
diff --git a/webui-src/styles.css b/webui-src/styles.css
index 19a7512..39ad191 100644
--- a/webui-src/styles.css
+++ b/webui-src/styles.css
@@ -6143,6 +6143,9 @@ button.red {
 .results-list .file-item:last-child{border-bottom:0}.results-list .file-item:hover{background:#f8fafc}.results-cell{min-width:0}
 .results-cell.name-col{display:flex;align-items:center;gap:.55rem;color:#0f172a;font-weight:600}.results-cell.name-col i{color:#0284c7;font-size:1.1rem}
 .results-cell.name-col span,.results-cell.hash-col{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results-cell.size-col{color:#475569;white-space:nowrap}.results-cell.hash-col{color:#64748b;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.78rem}.download-btn-v65{padding:.45rem .75rem;white-space:nowrap}
+
+/* Keep each status indicator distinct even when the status bar is compact. */
+.statusbar-left,.statusbar-right{gap:.6rem!important}.statusbar-item{gap:.3rem!important}
 @media (min-width:701px) and (max-width:1100px){.file-search-container{flex-direction:column}.file-search-container__keywords{flex:0 0 auto!important;flex-basis:auto!important;width:100%;padding:0 0 .75rem;border-right:0;border-bottom:1px solid rgba(20,20,27,.1)}.file-search-container__keywords .keywords-container{flex-direction:row;flex-wrap:wrap}.results-row{grid-template-columns:minmax(0,1.5fr) 5.5rem minmax(8rem,1fr) auto;gap:.65rem}}
 @media (max-width:700px){.search-form{width:auto;flex:1;max-width:18rem}.file-search-container{gap:.75rem;padding:.75rem}.file-search-container__keywords{padding:0 0 .75rem;margin:0}.file-search-container__results{width:100%}.results-header{display:none}.results-list .file-item{display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:'name action' 'size hash';gap:.45rem .5rem;padding:.8rem .45rem .8rem .8rem}.results-cell.name-col{grid-area:name}.results-cell.size-col{grid-area:size;font-size:.82rem}.results-cell.hash-col{grid-area:hash;max-width:10rem;text-align:right}.results-cell.action-col{grid-area:action;justify-self:end;width:max-content}.download-btn-v65{padding:.4rem .6rem}}
 
@@ -25195,4 +25198,3 @@ button.red {
 }
 
 
-