ewilliams28/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-08-12 21:53:00 -06:00
Code Issues Packages Projects Releases Wiki Activity

improve(ui): align session context menu rows, icons, and shortcut hints (#121383)

Browse Source 
Menu rows stacked Web Awesome's shadow icon margin on top of our flex gap
(~17px gutter), let the icon slot baseline-align ~2px above the label centre,
drew shortcut hints at 550 weight beside 400-weight labels, and left the submenu
chevron 4px inside the hint column at a heavier size.

Rows now use a single icon column, optically centred icons, quiet mono keycap
hints on one rail, a chevron sharing that rail, and a divider inset to the same
columns. The control UI mock harness also advertises the session mutation
methods so the menu renders enabled instead of fully disabled.
This commit is contained in:
Vyctor H. Brzezowski
2026-08-10 01:18:35 -03:00
committed by GitHub
parent bb02fc53ea
commit 45da07ed20
2 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/control-ui-mock-dev.ts
+12
View File
@@ -1454,6 +1454,10 @@ async function createChatPickerScenario(
assistantAgentId: "main",
assistantName: "Molty",
defaultAgentId: "main",
// Advertised Gateway methods gate session actions (see
// ui/src/lib/session-method-access.ts). Omitting the mutation methods left
// every session context-menu row disabled, so the harness could not show
// the menu operators actually see.
featureMethods: [
"chat.metadata",
"chat.startup",
@@ -1461,8 +1465,16 @@ async function createChatPickerScenario(
"openclaw.changes.list",
"openclaw.chat",
"openclaw.chat.history",
"sessions.delete",
"sessions.diff",
"sessions.files.set",
"sessions.fork",
"sessions.groups.delete",
"sessions.groups.list",
"sessions.groups.put",
"sessions.groups.rename",
"sessions.patch",
"sessions.patchMany",
"sessions.catalog.list",
"sessions.catalog.read",
"system.info",
ui/src/styles/layout.css
+29 -4
View File
@@ -2637,6 +2637,28 @@ wa-dropdown.sidebar-session-sort-menu::part(menu) {
text-align: left;
}
/* Web Awesome's shadow row adds `margin-inline-end: 0.75em !important` to the
slotted icon, which the light DOM cannot outrank. Dropping the gap leaves
that margin as the icon column instead of stacking into a ~17px gutter. */
wa-dropdown-item.session-menu__item {
gap: 0;
}
/* The icon slot wrapper is a block-level flex item, so its inline child sits on
the row's text baseline ~2px above the label's optical centre. */
wa-dropdown-item.session-menu__item::part(icon) {
display: flex;
align-items: center;
}
/* Web Awesome insets the submenu chevron 1em at its own font size, landing it
inside the shortcut column and heavier than the hints. Share their rail. */
wa-dropdown-item.session-menu__item::part(submenu-icon) {
inset-inline-end: 8px;
color: var(--muted);
font-size: 10px;
}
.session-menu__item:hover:not(:disabled),
.session-menu__item:focus-visible,
.sidebar-session-sort-menu__item:hover,
@@ -2700,12 +2722,15 @@ wa-dropdown.sidebar-session-sort-menu::part(menu) {
white-space: nowrap;
}
/* Keycap hint, not content: the app's quiet mono shortcut idiom (see
.chat-question-panel__option kbd), fixed-width so letters and digits share
one rail beside the labels. */
.session-menu__shortcut {
flex: 0 0 auto;
min-width: 12px;
color: var(--muted);
font-size: 11px;
font-weight: 550;
letter-spacing: 0.04em;
font: 11px/1 var(--mono);
text-align: center;
}
.session-menu__info {
@@ -2715,7 +2740,7 @@ wa-dropdown.sidebar-session-sort-menu::part(menu) {
}
.session-menu__separator {
margin: 6px 4px;
margin: 4px 8px;
border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}