From 4242c271deeb431ea2f3cfe108081d06054801c6 Mon Sep 17 00:00:00 2001
From: zhouzhou626 <255877794+zhouzhou626@users.noreply.github.com>
Date: Wed, 20 May 2026 03:05:41 +0800
Subject: [PATCH] Fix long tag wrapping in task cards

---
 docs/releases/unreleased.md                   |  6 +++
 styles/task-card-bem.css                      | 14 +++++++
 ...e-1904-task-card-long-tag-wrapping.test.ts | 42 +++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 tests/unit/issues/issue-1904-task-card-long-tag-wrapping.test.ts

diff --git a/docs/releases/unreleased.md b/docs/releases/unreleased.md
index aa121469..63b5e19b 100644
--- a/docs/releases/unreleased.md
+++ b/docs/releases/unreleased.md
@@ -23,3 +23,9 @@ Example:
 ```
 
 -->
+
+## Fixed
+
+- (#1904) Fixed long tags in task cards wrapping instead of forcing horizontal scrolling in TaskNotes Bases views and note cards
+  - Long tag pills can now wrap across lines and break within very long tag names on narrow screens
+  - Thanks to @3zra47 for reporting
diff --git a/styles/task-card-bem.css b/styles/task-card-bem.css
index f40b0461..11017390 100644
--- a/styles/task-card-bem.css
+++ b/styles/task-card-bem.css
@@ -147,6 +147,20 @@
     text-decoration: none;
 }
 
+.tasknotes-plugin .task-card__metadata-property--tags {
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.tasknotes-plugin .task-card__metadata-property--tags :where(.tag) {
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    white-space: normal;
+}
+
 .tasknotes-plugin .task-card__metadata-property :where(.tag:hover) {
     background-color: var(--tag-background-hover, var(--background-modifier-hover));
     border-color: var(--tag-border-color-hover, var(--background-modifier-border-hover));
diff --git a/tests/unit/issues/issue-1904-task-card-long-tag-wrapping.test.ts b/tests/unit/issues/issue-1904-task-card-long-tag-wrapping.test.ts
new file mode 100644
index 00000000..e22693f3
--- /dev/null
+++ b/tests/unit/issues/issue-1904-task-card-long-tag-wrapping.test.ts
@@ -0,0 +1,42 @@
+/**
+ * Issue #1904: long tags in task cards should wrap instead of forcing
+ * horizontal scrolling in Bases views and embedded note cards.
+ *
+ * @see https://github.com/callumalpass/tasknotes/issues/1904
+ */
+
+import fs from "fs";
+import path from "path";
+
+function readRepoFile(relativePath: string): string {
+	return fs.readFileSync(path.resolve(__dirname, "../../../", relativePath), "utf8");
+}
+
+function extractCssBlock(css: string, selector: string): string {
+	const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	const match = css.match(new RegExp(`${escapedSelector}\\s*\\{([^}]*)\\}`));
+	return match?.[1] ?? "";
+}
+
+describe("Issue #1904: task card long tag wrapping", () => {
+	it("allows tag metadata and long tag pills to wrap within card width", () => {
+		const css = readRepoFile("styles/task-card-bem.css");
+		const tagsPropertyBlock = extractCssBlock(
+			css,
+			".tasknotes-plugin .task-card__metadata-property--tags"
+		);
+		const tagBlock = extractCssBlock(
+			css,
+			".tasknotes-plugin .task-card__metadata-property--tags :where(.tag)"
+		);
+
+		expect(tagsPropertyBlock).toContain("flex-wrap: wrap");
+		expect(tagsPropertyBlock).toContain("align-items: flex-start");
+		expect(tagBlock).toContain("flex: 0 1 auto");
+		expect(tagBlock).toContain("min-width: 0");
+		expect(tagBlock).toContain("max-width: 100%");
+		expect(tagBlock).toContain("overflow-wrap: anywhere");
+		expect(tagBlock).toContain("word-break: break-word");
+		expect(tagBlock).toContain("white-space: normal");
+	});
+});