From 3d948ee71344c0cf9bd80c00e8b446fef59b2d6e Mon Sep 17 00:00:00 2001
From: callumalpass <callumalpass@gmail.com>
Date: Sat, 30 May 2026 07:31:22 +1000
Subject: [PATCH] fix mobile inline task overlay collapse

---
 docs/releases/unreleased.md                   |  4 ++++
 styles/task-card-bem.css                      |  4 ++++
 ...le-inline-task-overlay-containment.test.ts | 24 +++++++++++++++++++
 3 files changed, 32 insertions(+)
 create mode 100644 tests/unit/issues/issue-1968-mobile-inline-task-overlay-containment.test.ts

diff --git a/docs/releases/unreleased.md b/docs/releases/unreleased.md
index aa121469..06523178 100644
--- a/docs/releases/unreleased.md
+++ b/docs/releases/unreleased.md
@@ -23,3 +23,7 @@ Example:
 ```
 
 -->
+
+## Fixed
+
+- (#1968) Fixed inline task link overlays collapsing on Obsidian mobile, which could hide the task title and leave a tall empty gap after the widget. Thanks to @renatomen for reporting and diagnosing the containment issue.
diff --git a/styles/task-card-bem.css b/styles/task-card-bem.css
index a63dc9f9..cc680247 100644
--- a/styles/task-card-bem.css
+++ b/styles/task-card-bem.css
@@ -1445,6 +1445,10 @@ body.is-mobile .tasknotes-plugin .task-card:not(.task-card--layout-inline):not(.
     /* Use inline display to respect line boundaries */
     display: inline;
 
+    /* Inline overlays size from their content; card container queries are for block cards. */
+    container-type: normal;
+    container-name: none;
+
     /* Minimal padding - no indentation needed in inline mode */
     padding: 2px 0;
     margin: 0;
diff --git a/tests/unit/issues/issue-1968-mobile-inline-task-overlay-containment.test.ts b/tests/unit/issues/issue-1968-mobile-inline-task-overlay-containment.test.ts
new file mode 100644
index 00000000..346411aa
--- /dev/null
+++ b/tests/unit/issues/issue-1968-mobile-inline-task-overlay-containment.test.ts
@@ -0,0 +1,24 @@
+import fs from "fs";
+import path from "path";
+
+const repoRoot = path.resolve(__dirname, "../../..");
+
+function readRepoFile(relativePath: string): string {
+	return fs.readFileSync(path.join(repoRoot, relativePath), "utf8");
+}
+
+describe("Issue #1968: mobile inline task overlay containment", () => {
+	it("keeps card container queries off inline task overlays", () => {
+		const css = readRepoFile("styles/task-card-bem.css");
+
+		expect(css).toMatch(
+			/\.tasknotes-plugin \.task-card\s*\{[^}]*container:\s*tn-task-card \/ inline-size;/s
+		);
+		expect(css).toMatch(
+			/\.tasknotes-plugin \.task-card--layout-inline\s*\{[^}]*container-type:\s*normal;[^}]*container-name:\s*none;/s
+		);
+		expect(css).toMatch(
+			/body\.is-mobile \.tasknotes-plugin \.task-card--layout-inline\s*\{[^}]*display:\s*inline-flex;[^}]*max-width:\s*100%;/s
+		);
+	});
+});