From 7b320b8d0b1b580972d2ecb1301361c3f1c0b781 Mon Sep 17 00:00:00 2001
From: Lucas 'Paperboy' Rose-Winters <lucas@sanguinehost.com>
Date: Mon, 20 Oct 2025 07:52:21 +1100
Subject: [PATCH] style(ui): center user avatar in Status tab

Fixed alignment of user portrait in the Status tab. The avatar was
previously aligned to the left side of its container.

Change:
- Added justify-content: center to the avatar's flex container
- Avatar now centered horizontally (align-items already centered it vertically)

Before: Avatar stuck to left edge of its space
After: Avatar centered in its allocated space

File: src/systems/rendering/userStats.js:56
---
 src/systems/rendering/userStats.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/systems/rendering/userStats.js b/src/systems/rendering/userStats.js
index 6b907fb..bdede29 100644
--- a/src/systems/rendering/userStats.js
+++ b/src/systems/rendering/userStats.js
@@ -53,7 +53,7 @@ export function renderUserStats() {
     const html = `
         <div class="rpg-stats-content">
             <div class="rpg-stats-left">
-                <div style="display: flex; gap: clamp(4px, 0.8vh, 8px); align-items: center; flex-shrink: 0;">
+                <div style="display: flex; gap: clamp(4px, 0.8vh, 8px); align-items: center; justify-content: center; flex-shrink: 0;">
                     <img src="${userPortrait}" alt="${userName}" class="rpg-user-portrait" onerror="this.style.opacity='0.5';this.onerror=null;" />
                 </div>
                 <div class="rpg-stats-grid">