test: adopt shared mobile layout assertions

Author: vrtmrz

package-lock.json

@@ -30,7 +30,7 @@
 		"@types/node": "^22.20.1",
 		"@typescript-eslint/parser": "^8.48.1",
 		"@vitest/coverage-v8": "^4.1.9",
-		"@vrtmrz/obsidian-test-session": "0.1.0",
+		"@vrtmrz/obsidian-test-session": "0.2.0",
 		"esbuild": "^0.28.1",
 		"esbuild-svelte": "^0.9.3",
 		"eslint": "^9.39.1",

package.json

@@ -2,7 +2,7 @@
 
 This local-only suite installs the built TagFolder plug-in into an isolated vault and profile through `@vrtmrz/obsidian-test-session`. It is not part of the default CI gate.
 
-The new-note scenario selects a seeded template through the real Obsidian picker, verifies its secondary path description, creates a note through TagFolder, and checks the resulting Vault content. The note-lookup scenario drives the real TagFolder commands and Svelte dialogue, adds positive and excluded tags through the keyboard, changes field focus, opens the selected note, and verifies similar-note initialisation. Neither scenario uses scripted UI or Vault responses.
+The new-note scenario selects a seeded template through the real Obsidian picker, verifies its secondary path description, creates a note through TagFolder, and checks the resulting Vault content. The note-lookup scenario drives the real TagFolder commands and Svelte dialogue, adds positive and excluded tags through the keyboard, changes field focus, opens the selected note, and verifies similar-note initialisation. At a fixed phone viewport, it also uses the public test-session layout assertions to check the title and Close control against supplied safe-area insets, require a 44 CSS-pixel Close touch target, prevent horizontal overflow in the tag field, and keep the note field inside the viewport. TagFolder retains its plug-in-specific checks for tag wrapping, field shape, and the space reserved for note results. Neither scenario uses scripted UI or Vault responses.
 
 The suite is currently validated on Linux only. Its explicit preparation command downloads the official Obsidian 1.12.7 AppImage into the ignored `_testdata/obsidian` cache and extracts the matching `obsidian-cli`. Repeated runs reuse the cached download and extraction. Set `OBSIDIAN_BINARY` and `OBSIDIAN_CLI` when using executables outside the shared discovery paths.
 

test/e2e-obsidian/README.md

@@ -1,4 +1,10 @@
-import { withObsidianPage } from "@vrtmrz/obsidian-test-session";
+import {
+	assertLocatorHasMinimumTouchTarget,
+	assertLocatorWithinSafeArea,
+	assertLocatorWithinViewport,
+	assertNoHorizontalOverflow,
+	withObsidianPage,
+} from "@vrtmrz/obsidian-test-session";
 import type { Page } from "playwright";
 import {
 	TAGFOLDER_PLUGIN_ID,
@@ -77,33 +83,51 @@ async function verifyPhoneLayout(testSession: TagFolderTestSession): Promise<voi
 				await tagInput.press("Enter");
 			}
 
+			const safeAreaInsets = {
+				top: 47,
+				right: 0,
+				bottom: 34,
+				left: 0,
+			};
+			const modalTitle = modal.locator(".modal-title");
+			const closeButton = modal.locator(".modal-close-button");
+			const tagShell = modal.locator(".tag-input-shell");
+			const noteInput = modal.locator("#tagfolder-note-lookup-note-input");
+			await assertLocatorWithinSafeArea(page, modalTitle, {
+				label: "note lookup title",
+				safeAreaInsets,
+			});
+			await assertLocatorWithinSafeArea(page, closeButton, {
+				label: "note lookup close button",
+				safeAreaInsets,
+			});
+			await assertLocatorHasMinimumTouchTarget(page, closeButton, {
+				label: "note lookup close button",
+			});
+			await assertNoHorizontalOverflow(page, tagShell, {
+				label: "note lookup tag field",
+			});
+			await assertLocatorWithinViewport(page, noteInput, {
+				label: "note lookup note field",
+			});
+
 			const layout = await modal.evaluate((element) => {
-				const close = element.querySelector<HTMLElement>(".modal-close-button");
 				const tagShell = element.querySelector<HTMLElement>(".tag-input-shell");
 				const tagChips = element.querySelector<HTMLElement>(".tag-chips");
-				const noteInput = element.querySelector<HTMLElement>("#tagfolder-note-lookup-note-input");
-				if (!close || !tagShell || !tagChips || !noteInput) throw new Error("Phone layout elements were unavailable");
+				if (!tagShell || !tagChips) throw new Error("Phone layout elements were unavailable");
 				const modalRect = element.getBoundingClientRect();
-				const closeRect = close.getBoundingClientRect();
 				const shellRect = tagShell.getBoundingClientRect();
-				const noteRect = noteInput.getBoundingClientRect();
 				const shellStyle = getComputedStyle(tagShell);
 				const inputHeight = Number.parseFloat(shellStyle.getPropertyValue("--input-height"));
 				const shellRadius = Number.parseFloat(shellStyle.borderTopLeftRadius);
-				const safeAreaTop = 47;
 				return {
-					modalClearsSafeArea: modalRect.top >= safeAreaTop - 1,
-					closeClearsSafeArea: closeRect.top >= safeAreaTop,
-					closeHasTouchTarget: closeRect.width >= 44 && closeRect.height >= 44,
 					tagsStayInsideModal: shellRect.left >= modalRect.left && shellRect.right <= modalRect.right,
-					tagsDoNotScrollHorizontally: tagShell.scrollWidth <= tagShell.clientWidth,
 					tagAreaPrioritisesNotes: tagChips.clientHeight <= Math.min(inputHeight * 1.5, innerHeight * 0.15) + 1,
 					tagFieldUsesCompactRadius: shellRadius <= 12,
-					noteInputRemainsVisible: noteRect.bottom <= innerHeight,
 				};
 			});
 			if (!Object.values(layout).every(Boolean)) {
-				throw new Error(`Phone layout did not respect safe areas and tag bounds: ${JSON.stringify(layout)}`);
+				throw new Error(`Phone layout did not preserve TagFolder-specific tag proportions and bounds: ${JSON.stringify(layout)}`);
 			}
 			await tagInput.press("Escape");
 		} finally {