diff --git a/e2e/shot.mjs b/e2e/shot.mjs new file mode 100644 index 0000000..fb19e01 --- /dev/null +++ b/e2e/shot.mjs @@ -0,0 +1,22 @@ +/* Throwaway: one wide screenshot of the writing surface, to look at it. */ +import { OUT, launch, withFreshUser, createNotebook, createNote, typeInEditor } from "./lib.mjs"; + +const browser = await launch(); +const session = await withFreshUser(browser, "shot"); +const p = session.page; +await p.setViewportSize({ width: 1680, height: 900 }); +await createNotebook(p, "Look"); +await createNote(p); +await typeInEditor(p, "askjdnasjkdnkjasndjknkjaskjdnasjkdskajndjkanHelkl HALLLO"); +await p.keyboard.press("Enter"); +await p.keyboard.type("sdfsdfsdfsdfasddddd"); +await p.waitForTimeout(1500); +await p.screenshot({ path: `${OUT}/look.png` }); +const box = await p.evaluate(() => { + const pm = document.querySelector(".ProseMirror").getBoundingClientRect(); + const pane = document.querySelector(".note-editor").parentElement.getBoundingClientRect(); + return { pm: { x: Math.round(pm.x), w: Math.round(pm.width) }, pane: { x: Math.round(pane.x), w: Math.round(pane.width) } }; +}); +console.log(JSON.stringify(box)); +await session.cleanup(); +await browser.close(); diff --git a/frontend/src/editor/editor.css b/frontend/src/editor/editor.css index b413341..48842c2 100644 --- a/frontend/src/editor/editor.css +++ b/frontend/src/editor/editor.css @@ -38,10 +38,11 @@ point where the eye reliably finds the start of the next line. Capped here rather than on the container so it holds on a page as well as off one. */ max-width: 527px; - /* Left, not centred. A column that floats in the middle moves as the window - is resized, so the start of every line lands somewhere new; against the - margin it is always in the same place. */ - margin-left: 0; + /* Centred. Pinning the column to the left edge put every line in the same + place, but on a wide window it left the whole right half of the pane as one + dead block — which is worse to look at than a column that moves. Centred, + the same leftover space reads as two margins. */ + margin-left: auto; margin-right: auto; outline: none; color: var(--ne-text);