Fix note lookup layout on iPhone

Author: vrtmrz

NoteLookupModal.svelte

@@ -443,6 +443,13 @@
 		border-radius: var(--input-radius);
 		box-shadow: var(--input-shadow);
 	}
+	.tag-input-shell {
+		width: 100%;
+		max-width: 100%;
+		min-width: 0;
+		overflow: hidden;
+		border-radius: var(--radius-s);
+	}
 	.tag-input-shell:focus-within,
 	.note-input:focus {
 		border-color: var(--interactive-accent);
@@ -460,6 +467,9 @@
 		align-items: center;
 		flex-wrap: wrap;
 		gap: 0.3rem;
+		width: 100%;
+		max-width: 100%;
+		min-width: 0;
 		min-height: 2.25rem;
 		padding: 0.3rem 0.45rem;
 	}
@@ -493,9 +503,17 @@
 		--pill-corner-shape: var(--tag-corner-shape);
 		--pill-weight: var(--tag-weight);
 		font-size: var(--tag-size);
+		min-width: 0;
+		max-width: 100%;
 		height: auto;
 		box-shadow: none;
 	}
+	.tag-chip .multi-select-pill-content {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 	.tag-chip.excluded {
 		--pill-color: var(--text-error);
 		--pill-color-hover: var(--text-error);
@@ -657,12 +675,23 @@
 			height: calc(100dvh - 0.75rem);
 			max-height: calc(100dvh - 0.75rem);
 		}
+		:global(body.is-phone .tagfolder-note-lookup-modal) {
+			width: var(--dialog-width);
+			max-width: var(--dialog-max-width);
+			height: 100%;
+			max-height: var(--dialog-max-height);
+			margin-top: auto;
+		}
 		.note-lookup,
 		.tag-field {
 			gap: 0.3rem;
 		}
 		.tag-chips {
 			padding: 0.2rem 0.3rem;
+			max-height: min(calc(var(--input-height) * 1.5), 15dvh);
+			overflow-x: hidden;
+			overflow-y: auto;
+			align-content: flex-start;
 		}
 		.note-input {
 			padding: 0.4rem 0.55rem;

docs/note-lookup-design.md

@@ -37,6 +37,8 @@ Note
 
 Selected tags are displayed as removable chips. Positive tags use the normal tag treatment; excluded tags use a visually distinct treatment and retain the leading minus sign. Tag completions appear as a popover over the content only while the tag input is focused and contains text, so they do not reduce the result list's height.
 
+On phone-sized viewports, the selected-tag field is limited to approximately two compact chip rows or 15% of the available viewport height, whichever is smaller. This gives the note results priority. Additional chips can still scroll vertically inside the field for removal, rather than pushing the note field and results off screen. Long tag labels are truncated with an ellipsis, and the field does not scroll horizontally. The field uses Obsidian's compact radius while individual tags retain the standard pill shape.
+
 The implementation uses Obsidian's `multi-select-pill`, `suggestion-container`, `suggestion-item`, and `is-selected` structures. Theme-owned variables define pill colours, borders, radii, suggestion selection, and mobile spacing. Plug-in CSS is limited to the two-field layout, compact result details, and the dashed excluded-tag state.
 
 Each compact note row places the file name and parent path on its first line, followed by the positive-tag match count. An alternative title and the matching tags use a smaller second line when present. On narrow mobile viewports, matching tags are omitted from the row so that the file name, path, and more results remain visible. The result list takes all remaining dialogue height and scrolls independently.
@@ -45,6 +47,8 @@ The active note uses Obsidian's standard suggestion selection background. File d
 
 The result list is not a third focus target. It has an active row, shown by the `▸` marker above, while DOM focus remains in one of the two inputs.
 
+On iPhone, the dialogue uses Obsidian's phone dialogue width, maximum height, and safe-area variables. This keeps the title and standard Close control below the status area while preserving Obsidian's normal mobile touch target.
+
 ## Focus model
 
 The dialogue opens with DOM focus in the tag input for both commands. The similar-note command preselects its highest-ranked result, so `Enter` can open that result immediately even though the preloaded tags remain editable.

manifest.json

@@ -1,7 +1,7 @@
 {
     "id": "obsidian-tagfolder",
     "name": "TagFolder",
-    "version": "0.18.19-beta.1",
+    "version": "0.18.19-beta.2",
     "minAppVersion": "1.7.2",
     "description": "Show tags as folder.",
     "author": "vorotamoroz",

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-tagfolder",
-	"version": "0.18.19-beta.1",
+	"version": "0.18.19-beta.2",
 	"description": "Show tags as folder.",
 	"main": "main.js",
 	"type": "module",

package.json

@@ -28,6 +28,10 @@ async function seedLookupNotes(testSession: TagFolderTestSession): Promise<void>
 			await vault.create("Beta.md", "#foo");
 			await vault.create("Archived.md", "#bar #archive");
 			await vault.create("This is an extremely long note filename for a narrow mobile screen.md", "#foo #bar");
+			await vault.create(
+				"Mobile tags.md",
+				"#TypeScript #Obsidian #P2P #WebRTC #CRDT #Research #Project #Mobile #Testing #Keyboard #Responsive #Accessibility",
+			);
 		});
 
 		await page.waitForFunction(() => {
@@ -39,12 +43,82 @@ async function seedLookupNotes(testSession: TagFolderTestSession): Promise<void>
 					};
 			}
 		).app;
-			const file = obsidianApp?.vault?.getAbstractFileByPath("Alpha.md");
-			return file != null && (obsidianApp?.metadataCache?.getFileCache(file)?.tags?.length ?? 0) >= 2;
+			const alpha = obsidianApp?.vault?.getAbstractFileByPath("Alpha.md");
+			const mobile = obsidianApp?.vault?.getAbstractFileByPath("Mobile tags.md");
+			return alpha != null
+				&& mobile != null
+				&& (obsidianApp?.metadataCache?.getFileCache(alpha)?.tags?.length ?? 0) >= 2
+				&& (obsidianApp?.metadataCache?.getFileCache(mobile)?.tags?.length ?? 0) >= 12;
 		}, undefined, { timeout: 10_000 });
 	});
 }
 
+async function verifyPhoneLayout(testSession: TagFolderTestSession): Promise<void> {
+	await withObsidianPage(testSession.session.remoteDebuggingPort, async (page) => {
+		await page.setViewportSize({ width: 390, height: 430 });
+		await page.evaluate(() => {
+			document.body.classList.add("is-mobile", "is-phone");
+			document.body.style.setProperty("--safe-area-inset-top", "47px");
+			document.body.style.setProperty("--safe-area-inset-right", "0px");
+			document.body.style.setProperty("--safe-area-inset-bottom", "34px");
+			document.body.style.setProperty("--safe-area-inset-left", "0px");
+		});
+
+		try {
+			await executeCommand(page, OPEN_BY_TAGS_COMMAND);
+			const modal = page.locator(".tagfolder-note-lookup-modal");
+			await modal.waitFor({ state: "visible", timeout: 10_000 });
+			const tagInput = modal.locator("#tagfolder-note-lookup-tag-input");
+			for (const tag of [
+				"TypeScript", "Obsidian", "P2P", "WebRTC", "CRDT", "Research",
+				"Project", "Mobile", "Testing", "Keyboard", "Responsive", "Accessibility",
+			]) {
+				await tagInput.fill(tag);
+				await tagInput.press("Enter");
+			}
+
+			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");
+				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)}`);
+			}
+			await tagInput.press("Escape");
+		} finally {
+			await page.evaluate(() => {
+				document.body.classList.remove("is-mobile", "is-phone");
+				for (const property of [
+					"--safe-area-inset-top", "--safe-area-inset-right",
+					"--safe-area-inset-bottom", "--safe-area-inset-left",
+				]) document.body.style.removeProperty(property);
+			});
+			await page.setViewportSize({ width: 1280, height: 960 });
+		}
+	});
+}
+
 async function executeCommand(page: Page, commandId: string) {
 	const executed = await page.evaluate((id) => {
 		const obsidianApp = (
@@ -173,6 +247,7 @@ async function main(): Promise<void> {
 		testSession = await startTagFolderTestSession();
 		await seedLookupNotes(testSession);
 		await verifyLookupWorkflow(testSession);
+		await verifyPhoneLayout(testSession);
 		console.log("TagFolder note lookup passed in real Obsidian");
 	} finally {
 		if (testSession) await stopTagFolderTestSession(testSession);

test/e2e-obsidian/note-lookup.mts

@@ -1,3 +1,16 @@
+## 0.18.19-beta.2
+
+14th July, 2026
+
+I have finally implemented a feature I have wanted for a very long time. I hope you will all enjoy it too.
+
+### Fixes
+
+-   Fixed the note lookup dialogue on iPhone so that its title and Close control remain below the status area.
+-   Limited the selected-tag field on phones to two rows, with additional tags scrolling inside the field, so that the note filter and results receive more space.
+-   Reduced the selected-tag field's corner radius on phones while retaining Obsidian's standard pill treatment for individual tags.
+-   Truncated long tag labels and prevented the selected-tag field from scrolling horizontally on narrow screens.
+
 ## 0.18.19-beta.1
 
 14th July, 2026

updates.md

@@ -1,5 +1,6 @@
 {
     "0.18.14": "1.7.2",
     "0.18.18": "1.7.2",
-    "0.18.19-beta.1": "1.7.2"
+    "0.18.19-beta.1": "1.7.2",
+    "0.18.19-beta.2": "1.7.2"
 }