fix(ui): redesign the who's-online roster menu (#111668)

steipete · web-flow · commit a22ede72e494 · 2026-07-19T22:24:53.000-07:00
diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css
@@ -1982,33 +1982,84 @@ html.openclaw-native-macos
   background: color-mix(in srgb, var(--fg) 8%, transparent);
 }
 
-/* Long rosters scroll inside the popup instead of growing past the viewport. */
+/* Long rosters scroll inside the popup instead of growing past the viewport.
+   Chrome matches the sidebar's other fixed menus (customize/session menus). */
 .presence-roster-menu::part(menu) {
-  max-height: min(320px, 60vh);
+  min-width: 232px;
+  max-width: 288px;
+  max-height: min(340px, 60vh);
   overflow-y: auto;
+  padding: 6px;
+  border: 1px solid color-mix(in srgb, var(--border-strong) 78%, transparent);
+  border-radius: var(--radius-lg);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow-lg);
 }
 
 .presence-roster-menu__title {
-  padding: 4px 10px 2px;
+  padding: 6px 8px 4px;
   color: var(--muted);
   font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.02em;
+  font-weight: 650;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
 }
 
+/* Rows are informational people entries, not checkbox menu items: drop Web
+   Awesome's checkmark gutter and item metrics so title, avatars, and text
+   share one left edge with the rest of the app's menus. */
+.presence-roster-menu__item {
+  padding: 5px 8px;
+  border-radius: var(--radius-md);
+}
+
+.presence-roster-menu__item:hover,
+.presence-roster-menu__item:focus-visible {
+  outline: none;
+  background: color-mix(in srgb, var(--bg-hover) 84%, transparent);
+}
+
+.presence-roster-menu__item::part(checkmark) {
+  display: none;
+}
+
 .presence-roster-menu__item::part(label) {
   display: flex;
   align-items: center;
 }
 
+/* Roster avatars grow to two-line row scale. The circle clips via the child
+   image/initials instead of the wrapper so the online badge can overflow. */
 .presence-roster-menu__item .viewer-avatar {
-  border-color: transparent;
+  width: 26px;
+  height: 26px;
+  overflow: visible;
+  border: none;
+  font-size: 10px;
+}
+
+.presence-roster-menu__item .viewer-avatar > img,
+.presence-roster-menu__item .viewer-avatar > span {
+  border-radius: var(--radius-full);
+}
+
+/* Everyone listed is online; the dot restates the header at a glance. */
+.presence-roster-menu__item .viewer-avatar::after {
+  content: "";
+  position: absolute;
+  right: -1px;
+  bottom: -1px;
+  width: 8px;
+  height: 8px;
+  border: 2px solid var(--bg-elevated);
+  border-radius: var(--radius-full);
+  background: var(--ok);
 }
 
 .presence-roster-menu__text {
   display: flex;
   flex-direction: column;
+  gap: 1px;
   min-width: 0;
   line-height: 1.3;
 }
@@ -2017,11 +2068,14 @@ html.openclaw-native-macos
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--text);
   font-size: 13px;
+  font-weight: 500;
 }
 
 .presence-roster-menu__you {
   color: var(--muted);
+  font-weight: 400;
 }
 
 .presence-roster-menu__email {
