karim/kgva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide the de/en lang-switch on long prompt lines instead of clipping around it

Browse Source
This commit is contained in:
kgva CMS
2026-08-10 21:24:13 +00:00
parent 121273ff54
commit b807373472
1 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/shell.js
+17 -16
View File
@@ -15,33 +15,34 @@
// right so the left (older) part clips off terminal-style instead of wrapping.
function keepEnd() { if (promptEl) promptEl.scrollLeft = promptEl.scrollWidth; }
// the lang-switch (de/en) is position:absolute top-right over the same row.
// reserving space for it (or clipping the line early to dodge it) wastes
// room on short lines — simpler to just hide it once a long line would
// reach it, and let it reappear the moment the line is short again. wired
// to a MutationObserver below so it re-checks on every change to the
// prompt text, no matter what set it (ghost, real typing, history, …).
function syncLangSwitch() {
var ls = document.querySelector(".lang-switch");
if (!ls || !promptEl) return;
var lsRect = ls.getBoundingClientRect();
var inRect = input.getBoundingClientRect();
ls.style.visibility = (lsRect.width && inRect.right > lsRect.left - 8) ? "hidden" : "";
}
new MutationObserver(syncLangSwitch).observe(input, { characterData: true, childList: true, subtree: true });
// hard guarantee: the prompt is ALWAYS one line. CSS (nowrap + overflow:hidden)
// is normally enough, but a long ghost command (long path + filename) can still
// force the line to wrap on some viewports/browsers, which then bugs out the
// layout below it. so on top of the CSS, actually shorten the text in the DOM:
// clip from the FRONT (oldest part, same side as the terminal-scroll above) and
// mark the cut with "…" — the leading verb ("cat "/"cd ") is allowed to go first.
//
// the lang-switch (de/en) is position:absolute top-right over the same row —
// CSS reserves padding-right for it, but that padding doesn't actually stop
// overflowing nowrap text (padding isn't a layout barrier for overflow), so a
// long enough line still slides under it. check the real rendered edges too,
// not just clientWidth, so the toggle at the far end is never covered.
function overlapsLangSwitch() {
var ls = document.querySelector(".lang-switch");
if (!ls) return false;
var lsRect = ls.getBoundingClientRect();
var inRect = input.getBoundingClientRect();
return inRect.right > lsRect.left - 8; // 8px breathing room
}
function fits() { return promptEl.scrollWidth <= promptEl.clientWidth && !overlapsLangSwitch(); }
function fitOneLine(text) {
if (!promptEl) return text;
promptEl.scrollLeft = 0; // measure from a clean, unscrolled state
input.textContent = text;
if (fits()) return text;
if (promptEl.scrollWidth <= promptEl.clientWidth) return text;
var shown = text;
while (shown.length > 1 && !fits()) {
while (shown.length > 1 && promptEl.scrollWidth > promptEl.clientWidth) {
shown = shown.slice(1);
input.textContent = "…" + shown;
}