Fix long tag wrapping in task cards

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

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));

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");
+	});
+});