From 8f556fe2dbbe5f450f71f08e52257f7671480bba Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Sat, 13 Jun 2026 01:19:19 +0200
Subject: [PATCH] fix(clients): centre the online dot inside the Online tag
 (#5238)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The .online-dot uses vertical-align: middle, which in inline layout
aligns to baseline + half x-height — visibly off-centre inside the Ant
Tag's line box. Add a .dot-tag utility (inline-flex, align-items:
center) and apply it to the Online tag so the dot and label share one
centred axis. Other dot usages (Nodes page Space, card heads, stat
rows) already sit in flex containers and are unaffected.
---
 frontend/src/pages/clients/ClientsPage.tsx | 2 +-
 frontend/src/styles/utils.css              | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/clients/ClientsPage.tsx b/frontend/src/pages/clients/ClientsPage.tsx
index 75ca8435f..7e9efeab5 100644
--- a/frontend/src/pages/clients/ClientsPage.tsx
+++ b/frontend/src/pages/clients/ClientsPage.tsx
@@ -649,7 +649,7 @@ export default function ClientsPage() {
           </Tooltip>
         );
         if (record.enable && isOnline(record.email)) return (
-          <Tag color="green"><span className="online-dot" />{t('pages.clients.online')}</Tag>
+          <Tag color="green" className="dot-tag"><span className="online-dot" />{t('pages.clients.online')}</Tag>
         );
         if (!record.enable) return <Tag>{t('disabled')}</Tag>;
         if (bucket === 'expiring') return <Tag color="orange">{t('depletingSoon')}</Tag>;
diff --git a/frontend/src/styles/utils.css b/frontend/src/styles/utils.css
index 7bdc5e360..b0a3b82d0 100644
--- a/frontend/src/styles/utils.css
+++ b/frontend/src/styles/utils.css
@@ -33,6 +33,14 @@
   animation: online-blink 1.1s ease-in-out infinite;
 }
 
+/* For Tags that carry a status dot: inline layout aligns the dot to
+   baseline + half x-height (vertical-align: middle), which sits visibly
+   off-centre next to the label; flex centring is exact. */
+.dot-tag {
+  display: inline-flex;
+  align-items: center;
+}
+
 @keyframes online-blink {
   0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.55); }
   50% { opacity: 0.35; box-shadow: 0 0 0 4px rgba(82, 196, 26, 0); }