root/goodbuddy
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: align note thumbnails with content edges

Browse Source 
Remove extra top and left padding from the note record index so thumbnails align with the content area. Draw keyboard focus outlines inward to keep them visible within the scroll viewport, and cover alignment in the Electron layout regression test.

Release note: Note thumbnails now align with the content area, and keyboard focus outlines remain visible at the list edges.
This commit is contained in:
mesalogo
2026-09-23 23:03:09 +08:00
parent cebd513da8
commit 344008aaec
3 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/magic-notes-layout.electron.test.ts
+7
View File
@@ -78,6 +78,9 @@ it('resizes record columns with native Electron input and preserves desktop widt
await js('document.documentElement.dataset.theme = "light"'); await settle();
const index = '.magic-notes-index-pane', handle = '.magic-notes-index-resize-handle', stream = '.magic-notes-stream-pane';
assert.equal((await rect(index)).width, 168);
const firstRecord = await rect('.magic-note-record');
assert.equal(firstRecord.x, (await rect(index)).x, 'Thumbnails align with the left pane edge');
assert.equal(firstRecord.y, (await rect(stream)).y, 'Thumbnails align with the top of the note content');
await drag(handle, 80); const dragged = (await rect(index)).width; assert(dragged > 240 && dragged < 260, 'Dragged index width: ' + dragged);
await key(handle, 'Home'); assert.equal((await rect(index)).width, 140);
await key(handle, 'Right'); assert.equal((await rect(index)).width, 156);
@@ -107,6 +110,10 @@ it('resizes record columns with native Electron input and preserves desktop widt
await screenshot('magic-notes-narrow');
win.setContentSize(1280, 800); await settle(); await settle();
assert.equal((await rect(index)).width, withoutAi);
await key('.magic-note-record', 'Tab');
await js('document.querySelector(".magic-note-record").focus()');
assert(await js('document.querySelector(".magic-note-record").matches(":focus-visible")'));
assert.equal(await js('getComputedStyle(document.querySelector(".magic-note-record")).outlineOffset'), '-2px', 'Focus outline stays inside the scroll viewport');
await js('document.querySelector(' + JSON.stringify(editor) + ').focus()');
await win.webContents.insertText('Composer growth check\\n'.repeat(30)); await settle();
const grownHeight = (await rect(editor)).height;