fix(clients): centre the online dot inside the Online tag (#5238)

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

@@ -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>;

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); }