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

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
+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;
}
}