monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-06 13:40:16 +08:00
Code Issues Projects Releases Packages Wiki Activity

fix(wordsInput): prevent #wordsInput from overflowing the #wordsWrapper (@NadAlaba) (#6610)

Browse source 
### Description

in tape mode, if a long word is wider than the #wordsWrapper, then
#wordsInput may overflow to the right causing a horizontal scroll to
keep it in view. This limits its width so that it ends with the
#wordsWrapper.


https://github.com/user-attachments/assets/a9266407-a21c-43c0-9304-e683c6c2ce04
This commit is contained in:
Nad Alaba 2025-06-04 14:16:19 +03:00 • committed by GitHub
parent ec6e76b12e
commit 238a2c72e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 9 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/ts/test/test-ui.ts
View file

@ -461,6 +461,15 @@ export async function updateWordsInputPosition(initial = false): Promise<void> {
const targetTop =
activeWord.offsetTop + letterHeight / 2 - el.offsetHeight / 2 + 1; //+1 for half of border
if (Config.tapeMode !== "off") {
const wordsWrapperWidth = (
document.querySelector("#wordsWrapper") as HTMLElement
).offsetWidth;
el.style.maxWidth =
wordsWrapperWidth * (1 - Config.tapeMargin / 100) + "px";
} else {
el.style.maxWidth = "";
}
if (activeWord.offsetWidth < letterHeight) {
el.style.width = letterHeight + "px";
} else {