switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.25.4 (#164)

Browse Source
This commit is contained in:
xcaliber
2026-03-09 20:17:46 +00:00
parent 2f7a0fb027
commit dbc1a97343
22 changed files with 660 additions and 491 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/js/ui-core.js
View File

@@ -1481,30 +1481,24 @@ const UI = {
// which only loaded on chat/settings — editor surface was skipped.
applyAppearance(scale, msgFont) {
// Use transform:scale() on #surface — the prototype's proven approach.
// Transform operates on the visual layer without affecting layout flow
// of siblings (banners stay unscaled). Inverse dimensions provide the
// right layout space so the scaled visual output fills the viewport:
// At 80%: width=125%, height=125% of surface → scale(0.8) → visual 100%
// At 150%: width=66.7%, height=66.7% of surface → scale(1.5) → visual 100%
const surface = document.getElementById('surface');
if (surface) {
// Scale #surfaceInner — the generic wrapper injected by base.html
// around every surface template. No surface-specific selectors.
// #surface stays as flex child, banners are siblings — untouched.
const inner = document.getElementById('surfaceInner');
if (inner) {
if (scale === 100) {
surface.style.transform = '';
surface.style.transformOrigin = '';
surface.style.width = '';
surface.style.height = '';
inner.style.transform = '';
inner.style.width = '';
inner.style.height = '';
} else {
const z = scale / 100;
surface.style.transform = `scale(${z})`;
surface.style.transformOrigin = 'top left';
surface.style.width = (10000 / scale) + '%';
surface.style.height = `calc(var(--surface-h) * ${10000 / scale} / 100)`;
inner.style.transform = `scale(${z})`;
inner.style.width = (100 / z) + '%';
inner.style.height = (100 / z) + '%';
}
}
document.documentElement.style.setProperty('--msg-font', msgFont + 'px');
localStorage.setItem('cs-appearance', JSON.stringify({ scale, msgFont }));
// Recheck tab overflow after layout settles
requestAnimationFrame(() => {
document.querySelectorAll('.modal-overlay.active .modal-tabs').forEach(t => {
if (typeof checkTabsOverflow === 'function') checkTabsOverflow(t);
@@ -1513,7 +1507,7 @@ const UI = {
},
restoreAppearance() {
// Clear any stale zoom from previous scaling approaches
// Clear stale zoom/transform from any previous scaling approaches
document.body.style.zoom = '';
document.documentElement.style.zoom = '';
try {
@@ -1523,7 +1517,6 @@ const UI = {
if (scale !== 100 || msgFont !== 14) {
UI.applyAppearance(scale, msgFont);
} else {
// Still set the CSS variable for default
document.documentElement.style.setProperty('--msg-font', msgFont + 'px');
}
} catch (_) { /* corrupt localStorage — ignore */ }