From 118871d4e3fa1fcdea7a48fd5c0d4ec4aae5b2f9 Mon Sep 17 00:00:00 2001
From: callumalpass <callumalpass@gmail.com>
Date: Tue, 2 Jun 2026 02:19:02 +1000
Subject: [PATCH] fix mobile chevron status overlap

---
 docs/releases/unreleased.md                   |  1 +
 styles/task-card-bem.css                      |  2 +-
 ...ue-1947-mobile-left-chevron-layout.test.ts |  2 +-
 ...mobile-left-chevron-status-overlap.test.ts | 21 +++++++++++++++++++
 4 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 tests/unit/issues/issue-1979-mobile-left-chevron-status-overlap.test.ts

diff --git a/docs/releases/unreleased.md b/docs/releases/unreleased.md
index 0c0dbc39..5a76a6fc 100644
--- a/docs/releases/unreleased.md
+++ b/docs/releases/unreleased.md
@@ -36,6 +36,7 @@ When a change has user-facing documentation, include a canonical tasknotes.dev l
 
 - (#1980) Added mobile bottom spacing to Agenda Calendar views so the last visible tasks can scroll above Obsidian's bottom navigation bar. Thanks to @Jomo94 for reporting and sharing the screenshot.
 - (#1984) Fixed mobile task link overlays hiding configured inline task card properties such as scheduled date, due date, contexts, and projects. Thanks to @stil-sudo for reporting.
+- (#1979) Kept the left-positioned subtask chevron from overlapping the task status control on mobile task cards. Thanks to @Jomo94 for reporting and sharing the screenshot.
 - (#1903) Reduced the Edit Task modal's mobile action-button footer so Open note, Archive, Delete, Save, and Cancel take two rows instead of three on iPhone-sized screens. Thanks to @3zra47 for the original report and @krzyfu for the follow-up about the button area crowding the editor.
 - (#1982) Preserved scroll position in TaskNotes Bases after task edits and data refreshes, avoiding jumps back to the top on mobile. Thanks to @3zra47 for reporting.
 - (#1978) Restored Obsidian editor shortcuts such as insert link, headings, and list toggles inside the Edit Task modal's Details editor. Thanks to @krzyfu for reporting this.
diff --git a/styles/task-card-bem.css b/styles/task-card-bem.css
index 46aebee1..46bab587 100644
--- a/styles/task-card-bem.css
+++ b/styles/task-card-bem.css
@@ -662,7 +662,7 @@ body.is-mobile .tasknotes-plugin .task-card__chevron svg {
 }
 
 body.is-mobile .tasknotes-plugin .task-card.task-card--chevron-left .task-card__chevron {
-    left: var(--tn-spacing-xs);
+    left: calc(-1 * var(--tn-mobile-task-card-menu-size) - var(--tn-spacing-xs));
     width: 32px;
     height: 32px;
 }
diff --git a/tests/unit/issues/issue-1947-mobile-left-chevron-layout.test.ts b/tests/unit/issues/issue-1947-mobile-left-chevron-layout.test.ts
index d4035c81..6e6f543c 100644
--- a/tests/unit/issues/issue-1947-mobile-left-chevron-layout.test.ts
+++ b/tests/unit/issues/issue-1947-mobile-left-chevron-layout.test.ts
@@ -12,7 +12,7 @@ describe("Issue #1947: mobile left-chevron task cards", () => {
 		const css = readRepoFile("styles/task-card-bem.css");
 
 		expect(css).toMatch(
-			/body\.is-mobile \.tasknotes-plugin \.task-card\.task-card--chevron-left \.task-card__chevron\s*\{[^}]*left:\s*var\(--tn-spacing-xs\);[^}]*width:\s*32px;[^}]*height:\s*32px;/s
+			/body\.is-mobile \.tasknotes-plugin \.task-card\.task-card--chevron-left \.task-card__chevron\s*\{[^}]*left:\s*calc\(-1 \* var\(--tn-mobile-task-card-menu-size\) - var\(--tn-spacing-xs\)\);[^}]*width:\s*32px;[^}]*height:\s*32px;/s
 		);
 		expect(css).toMatch(
 			/body\.is-mobile \.tasknotes-plugin \.task-card\.task-card--chevron-left:not\(\.task-card--layout-inline\):not\(\.task-card--layout-compact\)\s*\{[^}]*padding-left:\s*calc\(var\(--tn-mobile-task-card-menu-size\) \+ var\(--tn-spacing-sm\)\);/s
diff --git a/tests/unit/issues/issue-1979-mobile-left-chevron-status-overlap.test.ts b/tests/unit/issues/issue-1979-mobile-left-chevron-status-overlap.test.ts
new file mode 100644
index 00000000..7e0e57ac
--- /dev/null
+++ b/tests/unit/issues/issue-1979-mobile-left-chevron-status-overlap.test.ts
@@ -0,0 +1,21 @@
+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 #1979: mobile left-chevron status overlap", () => {
+	it("keeps the left subtask chevron in the reserved gutter instead of on top of the status indicator", () => {
+		const css = readRepoFile("styles/task-card-bem.css");
+
+		expect(css).toMatch(
+			/body\.is-mobile \.tasknotes-plugin \.task-card\.task-card--chevron-left \.task-card__chevron\s*\{[^}]*left:\s*calc\(-1 \* var\(--tn-mobile-task-card-menu-size\) - var\(--tn-spacing-xs\)\);/s
+		);
+		expect(css).toMatch(
+			/body\.is-mobile \.tasknotes-plugin \.task-card\.task-card--chevron-left:not\(\.task-card--layout-inline\):not\(\.task-card--layout-compact\)\s*\{[^}]*padding-left:\s*calc\(var\(--tn-mobile-task-card-menu-size\) \+ var\(--tn-spacing-sm\)\);/s
+		);
+	});
+});