mirror of
https://github.com/openclaw/openclaw.git
synced 2026-08-23 10:55:31 -06:00
fix(control-ui): scale sidebar text with appearance setting (#121087)
Scales Control UI sidebar and navigation text with the existing Appearance preference while preserving mobile input zoom safety and bounded session-count layout.
Prepared head SHA: bafb9a2b74
Co-authored-by: Colin Johnson <211764741+Solvely-Colin@users.noreply.github.com>
Co-authored-by: Shakker <165377636+shakkernerd@users.noreply.github.com>
Reviewed-by: @shakkernerd
This commit is contained in:
Colin Johnson
@@ -22,12 +22,15 @@ let mobileContext: BrowserContext;
|
||||
function readUiCss(): string {
|
||||
const files = [
|
||||
"ui/src/styles/base.css",
|
||||
"ui/src/styles/components.css",
|
||||
"ui/src/styles/config.css",
|
||||
"ui/src/styles/settings.css",
|
||||
"ui/src/styles/layout.css",
|
||||
"ui/src/styles/layout.mobile.css",
|
||||
"ui/src/styles/components.css",
|
||||
"ui/src/styles/settings.css",
|
||||
"ui/src/styles/config.css",
|
||||
"ui/src/styles/usage.css",
|
||||
"ui/src/styles/chat/layout.css",
|
||||
"ui/src/styles/sidebar-markdown.css",
|
||||
"ui/src/styles/chat/sidebar.css",
|
||||
];
|
||||
return files.map((file) => readStyleSheet(file)).join("\n");
|
||||
}
|
||||
@@ -354,6 +357,186 @@ describeBrowserLayout("mount fallback cursor", () => {
|
||||
});
|
||||
|
||||
describeBrowserLayout("app chrome interaction styles", () => {
|
||||
it("scales sidebar typography with the Control UI text-size preference", async () => {
|
||||
const page = await desktopContext.newPage();
|
||||
try {
|
||||
await page.setViewportSize({ width: 1200, height: 800 });
|
||||
await page.setContent(`
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head><style>${readUiCss()}</style></head>
|
||||
<body>
|
||||
<span class="nav-item__text">Navigation</span>
|
||||
<span class="sidebar-recent-session__name">Recent session</span>
|
||||
<span class="session-row-trail">3m</span>
|
||||
<div class="sidebar-session-catalog-host__head">
|
||||
<span class="sidebar-session-catalog-host__label">Local host</span>
|
||||
<span class="sidebar-session-catalog-host__count">100</span>
|
||||
</div>
|
||||
<button class="sidebar-session-catalog-project__head">
|
||||
<span class="sidebar-session-catalog-project__label">Project</span>
|
||||
<span class="sidebar-session-catalog-project__count">100</span>
|
||||
</button>
|
||||
<span class="sidebar-agent-card__name">Agent</span>
|
||||
<span class="settings-sidebar__item-label">Settings</span>
|
||||
<span class="sidebar-file-view__path">workspace/file.ts</span>
|
||||
<span class="chat-workbench__dock-zone">Dock here</span>
|
||||
<span class="chat-workspace-rail__file-badge">3 files</span>
|
||||
<span class="session-menu__shortcut">⌘K</span>
|
||||
<div class="file-view__search">
|
||||
<input value="query" />
|
||||
<span class="file-view__search-counter">1/2</span>
|
||||
</div>
|
||||
<div class="sidebar-recent-session">
|
||||
<button class="sidebar-child-session-toggle">
|
||||
<span class="sidebar-child-session-toggle__count">100</span>
|
||||
</button>
|
||||
</div>
|
||||
<span class="file-view__save-notice">Unsaved changes</span>
|
||||
<article class="sidebar-markdown"><pre><code>const scaled = true;</code></pre></article>
|
||||
<article class="md-preview-dialog__reader sidebar-markdown">
|
||||
<h3>Preview heading</h3>
|
||||
<p>Agent file preview</p>
|
||||
<table><tbody><tr><td>Preview cell</td></tr></tbody></table>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
const selectors = [
|
||||
".nav-item__text",
|
||||
".sidebar-recent-session__name",
|
||||
".session-row-trail",
|
||||
".sidebar-session-catalog-host__count",
|
||||
".sidebar-session-catalog-project__count",
|
||||
".sidebar-agent-card__name",
|
||||
".settings-sidebar__item-label",
|
||||
".sidebar-file-view__path",
|
||||
".chat-workbench__dock-zone",
|
||||
".chat-workspace-rail__file-badge",
|
||||
".session-menu__shortcut",
|
||||
".file-view__search-counter",
|
||||
".file-view__save-notice",
|
||||
".sidebar-markdown pre code",
|
||||
".md-preview-dialog__reader.sidebar-markdown > p",
|
||||
".md-preview-dialog__reader.sidebar-markdown > h3",
|
||||
".md-preview-dialog__reader.sidebar-markdown td",
|
||||
];
|
||||
const readFontSizes = () =>
|
||||
page.evaluate((targets) => {
|
||||
return Object.fromEntries(
|
||||
targets.map((selector) => {
|
||||
const node = document.querySelector(selector);
|
||||
if (!(node instanceof HTMLElement)) {
|
||||
throw new Error(`Missing sidebar typography fixture ${selector}`);
|
||||
}
|
||||
return [selector, Number.parseFloat(getComputedStyle(node).fontSize)];
|
||||
}),
|
||||
);
|
||||
}, selectors);
|
||||
|
||||
const baseline = await readFontSizes();
|
||||
const baselineInput = await page.$eval(".file-view__search input", (node) =>
|
||||
Number.parseFloat(getComputedStyle(node).fontSize),
|
||||
);
|
||||
await page.evaluate(() => {
|
||||
document.documentElement.style.setProperty("--control-ui-text-scale", "1.4");
|
||||
});
|
||||
const scaled = await readFontSizes();
|
||||
const scaledInput = await page.$eval(".file-view__search input", (node) =>
|
||||
Number.parseFloat(getComputedStyle(node).fontSize),
|
||||
);
|
||||
|
||||
for (const selector of selectors) {
|
||||
const baselineSize = baseline[selector];
|
||||
const scaledSize = scaled[selector];
|
||||
if (baselineSize === undefined || scaledSize === undefined) {
|
||||
throw new Error(`Missing computed sidebar font size for ${selector}`);
|
||||
}
|
||||
expect(scaledSize, selector).toBeCloseTo(baselineSize * 1.4, 1);
|
||||
}
|
||||
expect(baselineInput).toBe(12);
|
||||
expect(scaledInput).toBeCloseTo(12 * 1.4, 1);
|
||||
for (const selector of [
|
||||
".sidebar-child-session-toggle",
|
||||
".sidebar-session-catalog-host__count",
|
||||
".sidebar-session-catalog-project__count",
|
||||
]) {
|
||||
const fits = await page.$eval(selector, (node) => node.scrollWidth <= node.clientWidth);
|
||||
expect(fits, selector).toBe(true);
|
||||
}
|
||||
} finally {
|
||||
await page.close().catch(() => {});
|
||||
}
|
||||
});
|
||||
|
||||
it("scales mobile sidebar variants while preserving the coarse-pointer input floor", async () => {
|
||||
const page = await mobileContext.newPage();
|
||||
try {
|
||||
await page.setContent(`
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<style>${readUiCss()}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell shell--mobile-nav">
|
||||
<span class="nav-item">Mobile navigation</span>
|
||||
<div class="file-view__search"><input value="query" /></div>
|
||||
<div class="sidebar-agent-menu__filter"><input value="agent" /></div>
|
||||
<div class="sidebar-recent-session sidebar-recent-session--child">
|
||||
<span class="sidebar-recent-session__name">Child session</span>
|
||||
<span class="session-row-trail">3m</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
|
||||
const readSizes = () =>
|
||||
page.evaluate(() => {
|
||||
const fontSize = (selector: string) => {
|
||||
const node = document.querySelector(selector);
|
||||
if (!(node instanceof HTMLElement)) {
|
||||
throw new Error(`Missing mobile sidebar fixture ${selector}`);
|
||||
}
|
||||
return Number.parseFloat(getComputedStyle(node).fontSize);
|
||||
};
|
||||
return {
|
||||
childName: fontSize(".sidebar-recent-session--child .sidebar-recent-session__name"),
|
||||
childTrail: fontSize(".sidebar-recent-session--child .session-row-trail"),
|
||||
coarsePointer: matchMedia("(hover: none) and (pointer: coarse)").matches,
|
||||
agentFilter: fontSize(".sidebar-agent-menu__filter input"),
|
||||
fileSearch: fontSize(".file-view__search input"),
|
||||
navItem: fontSize(".shell--mobile-nav .nav-item"),
|
||||
};
|
||||
});
|
||||
|
||||
const baseline = await readSizes();
|
||||
expect(baseline).toMatchObject({
|
||||
childName: 12,
|
||||
childTrail: 10,
|
||||
coarsePointer: true,
|
||||
agentFilter: 16,
|
||||
fileSearch: 16,
|
||||
navItem: 12,
|
||||
});
|
||||
|
||||
await page.evaluate(() => {
|
||||
document.documentElement.style.setProperty("--control-ui-text-scale", "1.4");
|
||||
});
|
||||
const scaled = await readSizes();
|
||||
expect(scaled.agentFilter).toBeCloseTo(12 * 1.4, 1);
|
||||
expect(scaled.childName).toBeCloseTo(12 * 1.4, 1);
|
||||
expect(scaled.childTrail).toBeCloseTo(10 * 1.4, 1);
|
||||
expect(scaled.fileSearch).toBeCloseTo(12 * 1.4, 1);
|
||||
expect(scaled.navItem).toBeCloseTo(12 * 1.4, 1);
|
||||
} finally {
|
||||
await page.close().catch(() => {});
|
||||
}
|
||||
});
|
||||
|
||||
it("keeps sidebars compact while preserving normal content scroll and text entry", async () => {
|
||||
const page = await desktopContext.newPage();
|
||||
try {
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
border-radius: var(--radius-md);
|
||||
background: color-mix(in srgb, var(--accent) 6%, transparent);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
font-weight: 550;
|
||||
transition:
|
||||
background var(--duration-fast) ease,
|
||||
@@ -269,7 +269,7 @@ openclaw-chat-sidebar-region,
|
||||
height: 100%;
|
||||
padding: 0 12px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -700,7 +700,7 @@ openclaw-chat-sidebar-region,
|
||||
border-radius: var(--radius-full);
|
||||
background: color-mix(in srgb, var(--danger) 12%, transparent);
|
||||
color: var(--danger);
|
||||
font-size: 12px; /* was 10px */
|
||||
font-size: var(--control-ui-text-sm); /* was 10px */
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -1346,7 +1346,7 @@ openclaw-chat-sidebar-region,
|
||||
/* Smaller close button for sidebar */
|
||||
.sidebar-header .btn {
|
||||
padding: 4px 8px;
|
||||
font-size: 14px;
|
||||
font-size: var(--control-ui-text-md);
|
||||
min-width: auto;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -1449,7 +1449,7 @@ openclaw-session-discussion {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-family: var(--mono);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1501,7 +1501,7 @@ openclaw-session-discussion {
|
||||
|
||||
.sidebar-file-view__editor-item {
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -1527,7 +1527,13 @@ openclaw-session-discussion {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.file-view__search input {
|
||||
font-size: max(16px, var(--control-ui-text-sm));
|
||||
}
|
||||
}
|
||||
|
||||
.file-view__search input:focus-visible {
|
||||
@@ -1539,7 +1545,7 @@ openclaw-session-discussion {
|
||||
min-width: 4.5ch;
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@@ -1577,7 +1583,7 @@ openclaw-session-discussion {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-family: var(--mono);
|
||||
font-size: 12.5px;
|
||||
font-size: calc(12.5px * var(--control-ui-text-scale));
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -1731,7 +1737,7 @@ openclaw-session-discussion {
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
|
||||
background: color-mix(in srgb, var(--warn) 10%, var(--panel));
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
}
|
||||
|
||||
.file-view__save-notice-actions {
|
||||
@@ -1774,7 +1780,7 @@ openclaw-session-discussion {
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
color: var(--muted);
|
||||
font-size: 12px; /* was 11px */
|
||||
font-size: var(--control-ui-text-sm); /* was 11px */
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@@ -3991,7 +3991,7 @@ td.data-table-key-col {
|
||||
}
|
||||
|
||||
.md-preview-dialog__reader.sidebar-markdown {
|
||||
font-size: 15px;
|
||||
font-size: calc(15px * var(--control-ui-text-scale));
|
||||
line-height: 1.74;
|
||||
color: var(--text);
|
||||
}
|
||||
@@ -4015,7 +4015,11 @@ td.data-table-key-col {
|
||||
|
||||
.md-preview-dialog__reader.sidebar-markdown h1 {
|
||||
font-family: var(--md-preview-serif);
|
||||
font-size: clamp(2.2rem, 4.4vw, 3.35rem);
|
||||
font-size: clamp(
|
||||
calc(2.2rem * var(--control-ui-text-scale)),
|
||||
calc(4.4vw * var(--control-ui-text-scale)),
|
||||
calc(3.35rem * var(--control-ui-text-scale))
|
||||
);
|
||||
line-height: 0.98;
|
||||
}
|
||||
|
||||
@@ -4024,12 +4028,20 @@ td.data-table-key-col {
|
||||
padding-top: 1.3rem;
|
||||
border-top: 1px solid color-mix(in srgb, var(--border) 82%, white 12%);
|
||||
font-family: var(--md-preview-serif);
|
||||
font-size: clamp(1.45rem, 2.1vw, 2rem);
|
||||
font-size: clamp(
|
||||
calc(1.45rem * var(--control-ui-text-scale)),
|
||||
calc(2.1vw * var(--control-ui-text-scale)),
|
||||
calc(2rem * var(--control-ui-text-scale))
|
||||
);
|
||||
}
|
||||
|
||||
.md-preview-dialog__reader.sidebar-markdown h3 {
|
||||
margin-top: 1.9rem;
|
||||
font-size: clamp(1.18rem, 1.4vw, 1.42rem);
|
||||
font-size: clamp(
|
||||
calc(1.18rem * var(--control-ui-text-scale)),
|
||||
calc(1.4vw * var(--control-ui-text-scale)),
|
||||
calc(1.42rem * var(--control-ui-text-scale))
|
||||
);
|
||||
}
|
||||
|
||||
.md-preview-dialog__reader.sidebar-markdown :is(p, ul, ol, blockquote, pre, table, hr, details) {
|
||||
@@ -5287,7 +5299,7 @@ td.data-table-key-col {
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
transition: opacity var(--duration-fast) ease;
|
||||
|
||||
+74
-64
@@ -284,7 +284,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font: inherit;
|
||||
font-size: 12.5px;
|
||||
font-size: calc(12.5px * var(--control-ui-text-scale));
|
||||
font-weight: 550;
|
||||
transition:
|
||||
background var(--duration-fast) ease,
|
||||
@@ -325,7 +325,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
background: color-mix(in srgb, var(--card) 70%, transparent);
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--control-ui-text-scale));
|
||||
font-weight: 550;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
@@ -334,7 +334,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
.settings-sidebar__title {
|
||||
margin: 14px 0 0;
|
||||
padding: 0 9px;
|
||||
font-size: 21px;
|
||||
font-size: calc(21px * var(--control-ui-text-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.15;
|
||||
@@ -401,7 +401,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
background: color-mix(in srgb, var(--card) 72%, transparent);
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 12.5px;
|
||||
font-size: calc(12.5px * var(--control-ui-text-scale));
|
||||
outline: none;
|
||||
transition:
|
||||
border-color var(--duration-fast) ease,
|
||||
@@ -425,7 +425,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.settings-sidebar__search-input {
|
||||
font-size: 16px;
|
||||
font-size: max(16px, calc(12.5px * var(--control-ui-text-scale)));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -469,7 +469,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
.settings-sidebar__empty {
|
||||
margin: 8px 9px 0;
|
||||
color: var(--muted);
|
||||
font-size: 12.5px;
|
||||
font-size: calc(12.5px * var(--control-ui-text-scale));
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
@@ -482,7 +482,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
.settings-sidebar__group-label {
|
||||
padding: 0 9px;
|
||||
margin: 0 0 4px;
|
||||
font-size: 10.5px;
|
||||
font-size: calc(10.5px * var(--control-ui-text-scale));
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -559,7 +559,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
}
|
||||
|
||||
.settings-sidebar__item-label {
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -594,7 +594,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
}
|
||||
|
||||
.settings-sidebar__subitem-label {
|
||||
font-size: 12.5px;
|
||||
font-size: calc(12.5px * var(--control-ui-text-scale));
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -608,7 +608,7 @@ html.openclaw-native-web-chrome .shell-chrome-controls {
|
||||
gap: 8px;
|
||||
padding: 12px 21px;
|
||||
border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
|
||||
font-size: 11.5px;
|
||||
font-size: calc(11.5px * var(--control-ui-text-scale));
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@@ -1042,7 +1042,7 @@ openclaw-settings-save-indicator {
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-hover);
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
}
|
||||
|
||||
/* Navigate + dismiss are sibling buttons inside the pill (buttons can't nest);
|
||||
@@ -1217,7 +1217,7 @@ html.openclaw-native-macos
|
||||
background: var(--bg-elevated);
|
||||
color: var(--muted);
|
||||
cursor: var(--cursor-action);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1267,7 +1267,7 @@ html.openclaw-native-macos
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
color: var(--text-strong);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
text-overflow: ellipsis;
|
||||
@@ -1287,7 +1287,7 @@ html.openclaw-native-macos
|
||||
.sidebar-update-card__subtitle {
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-weight: 400;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -1348,7 +1348,7 @@ html.openclaw-native-macos
|
||||
.sidebar-session-error {
|
||||
flex: 0 0 auto;
|
||||
padding: 8px 10px;
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@@ -1523,7 +1523,7 @@ html.openclaw-native-macos
|
||||
.sidebar-session-group-count {
|
||||
flex: 0 0 auto;
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--control-ui-text-scale));
|
||||
font-variant-numeric: tabular-nums;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@@ -1562,7 +1562,7 @@ html.openclaw-native-macos
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -1717,7 +1717,7 @@ html.openclaw-native-macos
|
||||
|
||||
.sidebar-recent-sessions__label-text,
|
||||
.sidebar-session-catalog-host__label {
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -1758,7 +1758,7 @@ html.openclaw-native-macos
|
||||
min-height: 28px;
|
||||
padding: 6px var(--sidebar-lead);
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
}
|
||||
|
||||
.sidebar-session-tree__show-more {
|
||||
@@ -1767,7 +1767,7 @@ html.openclaw-native-macos
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -1805,10 +1805,10 @@ html.openclaw-native-macos
|
||||
}
|
||||
|
||||
.sidebar-session-catalog-host__count {
|
||||
width: 20px;
|
||||
flex: 0 0 20px;
|
||||
width: calc(20px * var(--control-ui-text-scale));
|
||||
flex: 0 0 calc(20px * var(--control-ui-text-scale));
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--control-ui-text-scale));
|
||||
font-variant-numeric: tabular-nums;
|
||||
opacity: 0.68;
|
||||
text-align: center;
|
||||
@@ -1879,16 +1879,16 @@ html.openclaw-native-macos
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 12px;
|
||||
font-size: calc(12px * var(--control-ui-text-scale));
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.sidebar-session-catalog-project__count {
|
||||
width: 20px;
|
||||
flex: 0 0 20px;
|
||||
width: calc(20px * var(--control-ui-text-scale));
|
||||
flex: 0 0 calc(20px * var(--control-ui-text-scale));
|
||||
color: color-mix(in srgb, var(--muted) 55%, var(--text) 45%);
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--control-ui-text-scale));
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -1905,7 +1905,7 @@ html.openclaw-native-macos
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
@@ -1918,7 +1918,7 @@ html.openclaw-native-macos
|
||||
display: block;
|
||||
padding: 4px 10px 10px var(--sidebar-lead);
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
}
|
||||
|
||||
.sidebar-session--archived {
|
||||
@@ -1952,6 +1952,8 @@ html.openclaw-native-macos
|
||||
/* Every sidebar session source renders a thread. Keep density and text styling
|
||||
here so gateway threads and native coding catalogs cannot drift apart. */
|
||||
.sidebar-recent-session {
|
||||
--sidebar-child-session-toggle-width: max(34px, calc(36px * var(--control-ui-text-scale)));
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
@@ -2010,9 +2012,9 @@ html.openclaw-native-macos
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
width: 31px;
|
||||
width: var(--sidebar-child-session-toggle-width, 31px);
|
||||
height: 30px;
|
||||
flex: 0 0 31px;
|
||||
flex: 0 0 var(--sidebar-child-session-toggle-width, 31px);
|
||||
padding: 0 3px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
@@ -2072,7 +2074,7 @@ html.openclaw-native-macos
|
||||
|
||||
.sidebar-child-session-toggle__count {
|
||||
min-width: 9px;
|
||||
font-size: 9px;
|
||||
font-size: calc(9px * var(--control-ui-text-scale));
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -2212,7 +2214,7 @@ html.openclaw-native-macos
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
@@ -2234,11 +2236,11 @@ html.openclaw-native-macos
|
||||
}
|
||||
|
||||
.sidebar-recent-session--child .sidebar-recent-session__name {
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
}
|
||||
|
||||
.sidebar-recent-session--child .session-row-trail {
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--control-ui-text-scale));
|
||||
}
|
||||
|
||||
.sidebar-child-session__status {
|
||||
@@ -2292,7 +2294,7 @@ html.openclaw-native-macos
|
||||
same link-relative geometry as toggle-less rows, so one mask fits both. */
|
||||
.sidebar-recent-session:not(.sidebar-recent-session--child):has(> .sidebar-child-session-toggle)
|
||||
> .sidebar-recent-session__aside {
|
||||
right: 35px;
|
||||
right: calc(var(--sidebar-child-session-toggle-width) + 4px);
|
||||
}
|
||||
|
||||
/* State-bearing rows reserve the larger state/action maximum throughout the
|
||||
@@ -2447,7 +2449,7 @@ wa-dropdown.sidebar-customize-menu::part(menu) {
|
||||
|
||||
.sidebar-customize-menu__title {
|
||||
padding: 6px 10px 8px;
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
@@ -2457,7 +2459,7 @@ wa-dropdown.sidebar-customize-menu::part(menu) {
|
||||
.sidebar-customize-menu__provenance {
|
||||
margin: 0 10px 6px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@@ -2466,7 +2468,7 @@ wa-dropdown.sidebar-customize-menu::part(menu) {
|
||||
padding: 7px 6px 4px;
|
||||
border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--control-ui-text-scale));
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
@@ -2484,7 +2486,7 @@ wa-dropdown.sidebar-customize-menu::part(menu) {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
text-align: left;
|
||||
/* More-menu route rows are anchors acting as chrome (see base.css cursor policy). */
|
||||
cursor: var(--cursor-action);
|
||||
@@ -2612,7 +2614,7 @@ wa-dropdown.sidebar-session-sort-menu::part(menu) {
|
||||
.sidebar-session-sort-menu__title {
|
||||
padding: 4px 8px 2px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
@@ -2631,7 +2633,7 @@ wa-dropdown.sidebar-session-sort-menu::part(menu) {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -2721,7 +2723,7 @@ wa-dropdown-item.session-menu__item::part(submenu-icon) {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -2733,14 +2735,16 @@ wa-dropdown-item.session-menu__item::part(submenu-icon) {
|
||||
flex: 0 0 auto;
|
||||
min-width: 12px;
|
||||
color: var(--muted);
|
||||
font: 11px/1 var(--mono);
|
||||
font-family: var(--mono);
|
||||
font-size: var(--control-ui-text-xs);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.session-menu__info {
|
||||
padding: 4px 8px 6px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
}
|
||||
|
||||
.session-menu__separator {
|
||||
@@ -2827,7 +2831,7 @@ wa-dropdown-item.session-menu__item::part(submenu-icon) {
|
||||
}
|
||||
|
||||
.nav-item__text {
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -2879,7 +2883,7 @@ wa-dropdown-item.session-menu__item::part(submenu-icon) {
|
||||
|
||||
.sidebar-zone-entry .sidebar-recent-session__name {
|
||||
color: inherit;
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -2997,7 +3001,7 @@ wa-dropdown-item.session-menu__item::part(submenu-icon) {
|
||||
gap: 4px;
|
||||
overflow: hidden;
|
||||
color: var(--text-strong);
|
||||
font-size: 14px;
|
||||
font-size: var(--control-ui-text-md);
|
||||
font-weight: 650;
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
@@ -3023,7 +3027,7 @@ wa-dropdown-item.session-menu__item::part(submenu-icon) {
|
||||
.sidebar-agent-card__subtitle {
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
line-height: 1.2;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -3046,7 +3050,7 @@ wa-dropdown-item.session-menu__item::part(submenu-icon) {
|
||||
border-radius: var(--radius-full);
|
||||
background: color-mix(in srgb, var(--warn) 18%, transparent);
|
||||
color: var(--warn);
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--control-ui-text-scale));
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
@@ -3173,14 +3177,14 @@ wa-dropdown-item.session-menu__item::part(submenu-icon) {
|
||||
|
||||
.sidebar-identity-card__name {
|
||||
color: var(--text-strong);
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.sidebar-identity-card__subtitle {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -3253,7 +3257,7 @@ openclaw-tooltip.sidebar-hover-tooltip {
|
||||
width: min(320px, calc(100vw - 44px));
|
||||
max-width: 100%;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
line-height: 1.35;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -3266,7 +3270,7 @@ openclaw-tooltip.sidebar-hover-tooltip {
|
||||
|
||||
.sidebar-hover-card__heading {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
@@ -3320,7 +3324,7 @@ openclaw-tooltip.sidebar-hover-tooltip {
|
||||
}
|
||||
|
||||
.sidebar-hover-card__person-email {
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
}
|
||||
|
||||
.sidebar-hover-card__divider {
|
||||
@@ -3366,7 +3370,7 @@ openclaw-tooltip.sidebar-hover-tooltip {
|
||||
|
||||
.sidebar-hover-card__metadata-value--mono {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
}
|
||||
|
||||
.sidebar-footer-bar__status {
|
||||
@@ -3381,7 +3385,7 @@ openclaw-tooltip.sidebar-hover-tooltip {
|
||||
color: var(--danger);
|
||||
cursor: var(--cursor-action);
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -3396,7 +3400,7 @@ openclaw-tooltip.sidebar-hover-tooltip {
|
||||
}
|
||||
|
||||
.sidebar-footer-bar__status-detail {
|
||||
font-size: 10px;
|
||||
font-size: calc(10px * var(--control-ui-text-scale));
|
||||
font-weight: 500;
|
||||
opacity: 0.72;
|
||||
}
|
||||
@@ -3445,7 +3449,7 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -3461,12 +3465,18 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
|
||||
background: var(--bg);
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
}
|
||||
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.sidebar-agent-menu__filter input {
|
||||
font-size: max(16px, var(--control-ui-text-sm));
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-agent-menu__empty {
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@@ -3488,7 +3498,7 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
|
||||
overflow: hidden;
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
@@ -3512,7 +3522,7 @@ wa-dropdown.sidebar-identity-menu::part(menu) {
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in srgb, var(--danger) 12%, transparent);
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
font-family: var(--mono);
|
||||
color: var(--danger);
|
||||
}
|
||||
@@ -3944,7 +3954,7 @@ html:not(.openclaw-native-macos):not(.openclaw-native-nav):not(.openclaw-native-
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 11px;
|
||||
font-size: var(--control-ui-text-xs);
|
||||
color: color-mix(in srgb, var(--muted) 55%, var(--text) 45%);
|
||||
}
|
||||
|
||||
|
||||
@@ -223,7 +223,7 @@ html:not(.openclaw-native-macos):not(.openclaw-native-nav):not(.openclaw-native-
|
||||
margin: 0;
|
||||
min-height: 40px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
border-radius: var(--radius-md);
|
||||
white-space: nowrap;
|
||||
flex: 0 0 auto;
|
||||
@@ -323,7 +323,7 @@ html.openclaw-native-macos body .shell--mobile-nav .topnav-shell__actions {
|
||||
}
|
||||
|
||||
.shell--mobile-nav .nav-item {
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
}
|
||||
|
||||
/* Hide the entire content-header on mobile chat — controls are in mobile gear menu */
|
||||
@@ -642,7 +642,7 @@ html.openclaw-native-macos body .shell--mobile-nav .topnav-shell__actions {
|
||||
|
||||
.nav-item {
|
||||
padding: 6px 8px;
|
||||
font-size: 12px; /* was 11px */
|
||||
font-size: var(--control-ui-text-sm); /* was 11px */
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
@@ -137,7 +137,7 @@
|
||||
border: none;
|
||||
background: none;
|
||||
font-family: inherit;
|
||||
font-size: 12.5px;
|
||||
font-size: calc(12.5px * var(--control-ui-text-scale));
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
@@ -146,7 +146,7 @@
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
font-variant-ligatures: none;
|
||||
letter-spacing: 0;
|
||||
line-height: 0.86;
|
||||
@@ -179,7 +179,7 @@
|
||||
margin-top: 0.75em;
|
||||
overflow-x: auto;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
}
|
||||
|
||||
.sidebar-markdown :where(th, td) {
|
||||
@@ -192,7 +192,7 @@
|
||||
.sidebar-markdown :where(th) {
|
||||
background: var(--secondary);
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
font-size: var(--control-ui-text-sm);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
@@ -256,7 +256,7 @@
|
||||
|
||||
.sidebar-markdown :where(summary) {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
font-size: calc(13px * var(--control-ui-text-scale));
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
transition: background var(--duration-fast) ease;
|
||||
|
||||
Reference in New Issue
Block a user