Update static/style.css

static/style.css

@@ -537,10 +537,10 @@ a:hover { text-decoration: underline; }
     color: var(--text-secondary);
     display:flex; align-items:center; justify-content:center;
     font-size:1.1rem; font-weight:700;
-    flex-shrink:0; overflow:hidden;
+    flex-shrink:0; overflow:visible;
     position:relative;
 }
-.conv-avatar img { width:100%; height:100%; object-fit:cover; }
+.conv-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
 .conv-avatar.avatar-c0 { background: linear-gradient(135deg,#2563EB,#7C3AED); color:#fff; }
 .conv-avatar.avatar-c1 { background: linear-gradient(135deg,#059669,#0EA5E9); color:#fff; }
 .conv-avatar.avatar-c2 { background: linear-gradient(135deg,#D97706,#DB2777); color:#fff; }
@@ -1363,8 +1363,21 @@ img.js-zoom { cursor: zoom-in; }
 .loading-state { display:flex; align-items:center; justify-content:center; gap:0.5rem; padding:2rem; color:var(--text-secondary); }
 .user-item { display:flex; align-items:center; gap:0.75rem; padding:0.6rem 1.25rem; transition:background var(--transition-fast); color:var(--text); }
 .user-item:hover { background:var(--bg-secondary); }
-.user-avatar { width:40px; height:40px; border-radius:var(--radius-full); background:var(--bg-tertiary); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); font-size:1.2rem; overflow:hidden; flex-shrink:0; }
-.user-avatar img { width:100%; height:100%; object-fit:cover; }
+.user-avatar { width:40px; height:40px; border-radius:var(--radius-full); background:var(--bg-tertiary); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); font-size:1.2rem; overflow:hidden; flex-shrink:0; position:relative; }
+.user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-full); }
+
+/* Online-users modal: show the presence dot on the avatar itself instead of the
+   status line below it, so it is not hidden behind the profile picture. */
+.online-users-list .user-item .user-avatar { overflow:visible; }
+.online-users-list .user-item .user-avatar::after {
+    content:''; position:absolute; right:-2px; bottom:-2px;
+    width:11px; height:11px; border-radius:50%;
+    background: var(--success);
+    border:2px solid var(--bg-elevated);
+    pointer-events:none;
+}
+.online-users-list .user-item .user-status-text { display:flex; align-items:center; gap:0.3rem; }
+.online-users-list .user-item .user-status-text .status-dot { display:none; }
 .user-info { flex:1; min-width:0; }
 .user-name { font-size:0.875rem; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .user-status-text { font-size:0.75rem; color:var(--text-secondary); }