BitSquare/Codeman
2
0 Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-11-15 18:59:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(header): settle the divider when readings change, keep density to the header layout, restore the chosen width

Browse Source
This commit is contained in:
Devvyn committed 2026-10-23 19:58:40 +08:00
1 parent fa2d75c951
commit f3c90abeb0
4 files changed
+347 -153
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/web/public/styles.css
+54 -40
View File
@@ -2275,47 +2275,66 @@ html[data-tab-orientation='vertical'].tab-rail-compact
box-shadow: inset 0 0 0 2px var(--accent);
}
/* Everything below applies only where the tabs share the header with the toolbar, i.e. where the handle is
visible to undo it: not in the sidebar layout, the vertical rail or a solo window, and not on a phone. */
/* A width the user chose: the toolbar keeps it and wraps onto a second line when its content is wider. */
html[data-header-right-width]:not([data-tab-orientation='vertical']):not([data-session-list='sidebar'])
body:not(.solo-mode)
.header-right {
flex: 0 0 var(--header-right-width);
width: var(--header-right-width);
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
row-gap: 0.25rem;
min-height: var(--header-height);
}
@media (min-width: 769px) {
html[data-header-right-width]:not([data-tab-orientation='vertical']):not([data-session-list='sidebar'])
body:not(.solo-mode)
.header-right {
flex: 0 0 var(--header-right-width);
width: var(--header-right-width);
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
row-gap: 0.25rem;
min-height: var(--header-height);
}
/* The narrower the toolbar, the less each usage reading shows (data-header-density, header-divider.js):
tight drops the window and CPU/MEM labels, dense shortens the provider names, tiny keeps only the rings.
The same rules apply under every header-stats style. */
html[data-header-density] .header-system-stats .stat-label,
html[data-header-density] .header-plan-usage .pu-label {
display: none;
}
/* The narrower the toolbar, the less each usage reading shows (data-header-density, header-divider.js):
tight drops the window and CPU/MEM labels, dense shortens the provider names, tiny keeps only the rings.
The prefix outweighs the per-style rules further down, so every header-stats style follows it. */
html[data-header-density]:not([data-tab-orientation='vertical']):not([data-session-list='sidebar'])
body:not(.solo-mode)
:is(.header-system-stats .stat-label, .header-plan-usage .pu-label) {
display: none;
}
html[data-header-density] .header-system-stats,
html[data-header-density] .header-plan-usage {
gap: 8px;
padding: 0 8px;
}
html[data-header-density]:not([data-tab-orientation='vertical']):not([data-session-list='sidebar'])
body:not(.solo-mode)
:is(.header-system-stats, .header-plan-usage) {
gap: 8px;
padding: 0 8px;
}
html[data-header-density='dense'] .header-plan-usage .pu-provider,
html[data-header-density='tiny'] .header-plan-usage .pu-provider {
font-size: 0;
}
html:is([data-header-density='dense'], [data-header-density='tiny']):not([data-tab-orientation='vertical']):not(
[data-session-list='sidebar']
)
body:not(.solo-mode)
.header-plan-usage
.pu-provider {
font-size: 0;
}
html[data-header-density='dense'] .header-plan-usage .pu-provider::after,
html[data-header-density='tiny'] .header-plan-usage .pu-provider::after {
content: attr(data-short);
font-size: 0.6rem;
}
html:is([data-header-density='dense'], [data-header-density='tiny']):not([data-tab-orientation='vertical']):not(
[data-session-list='sidebar']
)
body:not(.solo-mode)
.header-plan-usage
.pu-provider::after {
content: attr(data-short);
font-size: 0.6rem;
}
html[data-header-density='tiny'] .header-system-stats .stat-value,
html[data-header-density='tiny'] .header-plan-usage .pu-val {
display: none;
/* Rings-only is a Compact-style reading: the other styles have no rings, so they keep their values. */
html[data-header-stats='compact'][data-header-density='tiny']:not([data-tab-orientation='vertical']):not(
[data-session-list='sidebar']
)
body:not(.solo-mode)
:is(.header-system-stats .stat-value, .header-plan-usage .pu-val) {
display: none;
}
}
body.header-divider-dragging,
@@ -2335,11 +2354,6 @@ body.solo-mode .header-divider {
.header-divider {
display: none;
}
html[data-header-right-width] .header-right {
flex: 0 1 auto;
width: auto;
}
}
/* Connection Indicator */