leefer/xiaobaifupan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

B-214: keep desktop header commands visible instead of behind ellipsis

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
MS-01-Codex
2026-08-20 12:39:22 +08:00
co-authored by Cursor multica-agent
parent cf7183d0c0
commit 152c0000ce
8 changed files with 238 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/frontend/shared/auth.css
+9 -9
View File
@@ -1179,27 +1179,27 @@ button.account-role-badge:focus-visible {
gap: 3px;
}
@media (min-width: 1280px) and (max-width: 1510px) {
@media (min-width: 1280px) {
.app-header .header-command-group .account-role-badge span {
display: inline;
display: none;
}
.app-header .header-command-group .account-role-badge {
min-width: 0;
min-width: 28px;
justify-content: flex-start;
justify-content: center;
padding-inline: 6px;
}
}
@media (min-width: 1380px) and (max-width: 1510px) {
#settingsButton,
.header-command-group .account-button {
width: auto;
padding: 0px 9px;
max-width: 108px;
padding: 0px 8px;
}
#settingsButton > span,
.header-command-group .account-button > span {
display: inline;
}
app/frontend/shared/components/controls.css
+7 -5
View File
@@ -635,14 +635,16 @@ body.sidebar-collapsed .sidebar-collapse-button .lucide {
height: 14px;
}
@media (min-width: 1280px) and (max-width: 1510px) {
.header-command-group .command-button {
width: 31px;
@media (min-width: 1280px) {
.header-command-group .command-button:not(.account-button) {
width: 32px;
min-width: 32px;
padding: 0px;
}
.header-command-group .command-button > span {
.header-command-group .command-button:not(.account-button) > span {
display: none;
}
}
@@ -1010,7 +1012,7 @@ textarea {
@media (min-width: 768px) {
.header-menu-button {
display: inline-flex;
display: none;
}
}
app/frontend/shared/shell.css
+79 -36
View File
@@ -3013,6 +3013,11 @@ body.sidebar-collapsed .status-bar {
justify-content: flex-start;
}
body.mobile-shell .header-command-group .account-button > span,
body.mobile-shell .header-command-group .account-role-badge span {
display: inline;
}
body.mobile-shell .header-command-group .account-dropdown {
position: static;
grid-column: 1 / -1;
@@ -3329,8 +3334,24 @@ body.sidebar-collapsed .status-bar {
color: var(--warn);
}
.tape-sentiment .sentiment-gauge {
@media (min-width: 1440px) and (max-width: 1599px) {
.app-header .overview-strip .tape-sentiment.sentiment-block {
flex-direction: row;
align-items: center;
gap: 8px;
}
}
.app-header .overview-strip .tape-sentiment .metric-label,
.app-header .overview-strip .tape-sentiment .sentiment-text {
font-size: var(--fs-caption);
font-weight: 500;
line-height: 18px;
}
.app-header .overview-strip .tape-sentiment > .sentiment-gauge {
position: absolute;
display: none;
width: 0;
height: 0;
overflow: hidden;
@@ -3573,12 +3594,43 @@ body.sidebar-collapsed .status-bar {
--focus-ring: rgba(108, 168, 232, .22);
}
@media (min-width: 1024px) and (max-width: 1439px) {
@media (min-width: 1024px) and (max-width: 1599px) {
.tape-optional {
display: none;
}
}
@media (min-width: 1280px) {
.tape-metric {
padding: 0 10px;
}
.app-header {
gap: 16px;
}
}
@media (min-width: 1280px) and (max-width: 1599px) {
.app-page-context {
min-width: 96px;
max-width: 128px;
}
.app-header .header-actions {
gap: 4px;
}
.app-header .header-command-group {
gap: 4px;
}
}
@media (max-width: 1440px) {
.app-page-context {
display: none;
}
}
@media (max-width: 1023px) {
.app-header {
gap: 8px;
@@ -3587,10 +3639,6 @@ body.sidebar-collapsed .status-bar {
padding: 0 10px;
}
.app-page-context {
display: none;
}
.app-header .overview-strip,
.app-header .overview-strip[data-overview-expanded="true"] {
flex: 0 0 auto;
@@ -3653,53 +3701,48 @@ body.sidebar-collapsed .status-bar {
@media (min-width: 768px) {
.app-header .header-menu-button {
display: inline-flex;
display: none;
}
.app-header .header-command-group {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 60;
display: none;
flex-direction: column;
align-items: stretch;
gap: 6px;
width: 240px;
padding: 8px;
overflow: visible;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
box-shadow: var(--shadow-float);
}
.app-header .header-command-group.is-open {
position: static;
display: flex;
flex: 0 0 auto;
flex-direction: row;
align-items: center;
gap: 6px;
width: auto;
max-width: none;
padding: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.app-header .header-command-group .command-button,
.app-header .header-command-group .account-button {
width: 100%;
justify-content: flex-start;
width: auto;
justify-content: center;
}
.app-header .header-command-group .account-menu-shell {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: center;
width: auto;
}
.app-header .header-command-group .account-role-badges {
display: flex;
flex-wrap: wrap;
min-height: 0;
display: inline-flex;
flex-wrap: nowrap;
min-height: 32px;
}
.app-header .header-command-group .account-dropdown {
left: 0;
right: auto;
left: auto;
right: 0;
}
}
app/frontend/shared/shell.js
+10 -3
View File
@@ -22,12 +22,19 @@
const button = document.querySelector("#headerMenuButton");
const backdrop = document.querySelector("#mobileCommandBackdrop");
if (!menu || !button) return;
if (!isMobileViewport()) {
menu.classList.remove("is-open");
button.setAttribute("aria-expanded", "false");
document.body.classList.remove("mobile-command-open");
if (backdrop) backdrop.hidden = true;
return;
}
const open = typeof force === "boolean" ? force : !menu.classList.contains("is-open");
menu.classList.toggle("is-open", open);
button.setAttribute("aria-expanded", String(open));
document.body.classList.toggle("mobile-command-open", open && isMobileViewport());
if (backdrop) backdrop.hidden = !(open && isMobileViewport());
if (open && isMobileViewport()) {
document.body.classList.toggle("mobile-command-open", open);
if (backdrop) backdrop.hidden = !open;
if (open) {
global.requestAnimationFrame(() => menu.querySelector("button:not([hidden])")?.focus({ preventScroll: true }));
} else if (force === false && document.activeElement && menu.contains(document.activeElement)) {
button.focus({ preventScroll: true });