diff --git a/docs/releases/unreleased.md b/docs/releases/unreleased.md index 3c1e863f..55186274 100644 --- a/docs/releases/unreleased.md +++ b/docs/releases/unreleased.md @@ -35,5 +35,6 @@ When a change has user-facing documentation, include a canonical tasknotes.dev l ## Fixed - (#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. - (#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. diff --git a/styles/task-card-bem.css b/styles/task-card-bem.css index 3af0966e..46aebee1 100644 --- a/styles/task-card-bem.css +++ b/styles/task-card-bem.css @@ -1679,7 +1679,20 @@ body.is-mobile .tasknotes-plugin .task-card--layout-inline .task-card__title-tex } body.is-mobile .tasknotes-plugin .task-card--layout-inline .task-card__metadata { - display: none; + display: inline-flex; + align-items: center; + gap: 0.35em; + flex: 1 1 auto; + min-width: 0; + max-width: min(52vw, 24em); + margin-left: 0.25em; + overflow-x: auto; + overflow-y: hidden; + scrollbar-width: none; + white-space: nowrap; + vertical-align: middle; + position: static; + top: auto; } body.is-mobile .tasknotes-plugin .task-card--layout-inline .task-card__status-dot { diff --git a/tests/unit/issues/issue-190-mobile-task-widget-touch-targets.test.ts b/tests/unit/issues/issue-190-mobile-task-widget-touch-targets.test.ts index 9aa77137..c665a266 100644 --- a/tests/unit/issues/issue-190-mobile-task-widget-touch-targets.test.ts +++ b/tests/unit/issues/issue-190-mobile-task-widget-touch-targets.test.ts @@ -48,7 +48,7 @@ describe("Issue #190: mobile task widget touch targets", () => { /body\.is-mobile \.tasknotes-plugin \.task-card--layout-inline \.task-card__content\s*\{[^}]*flex-direction:\s*row;/s ); expect(css).toMatch( - /body\.is-mobile \.tasknotes-plugin \.task-card--layout-inline \.task-card__metadata\s*\{[^}]*display:\s*none;/s + /body\.is-mobile \.tasknotes-plugin \.task-card--layout-inline \.task-card__metadata\s*\{[^}]*display:\s*inline-flex;[^}]*max-width:\s*min\(52vw,\s*24em\);[^}]*overflow-x:\s*auto;/s ); expect(css).toMatch( /body\.is-mobile \.tasknotes-plugin \.task-card--layout-inline \.task-card__priority-dot\s*\{[^}]*width:\s*var\(--tn-mobile-inline-indicator-size\);[^}]*height:\s*var\(--tn-mobile-inline-indicator-size\);[^}]*padding:\s*5px;[^}]*background-clip:\s*content-box;/s diff --git a/tests/unit/issues/issue-1984-mobile-inline-overlay-properties.test.ts b/tests/unit/issues/issue-1984-mobile-inline-overlay-properties.test.ts new file mode 100644 index 00000000..1582f8b7 --- /dev/null +++ b/tests/unit/issues/issue-1984-mobile-inline-overlay-properties.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 #1984: mobile inline task overlay properties", () => { + it("keeps configured inline metadata visible on Obsidian mobile", () => { + const css = readRepoFile("styles/task-card-bem.css"); + + expect(css).toMatch( + /body\.is-mobile \.tasknotes-plugin \.task-card--layout-inline \.task-card__metadata\s*\{[^}]*display:\s*inline-flex;[^}]*max-width:\s*min\(52vw,\s*24em\);[^}]*overflow-x:\s*auto;/s + ); + expect(css).not.toMatch( + /body\.is-mobile \.tasknotes-plugin \.task-card--layout-inline \.task-card__metadata\s*\{[^}]*display:\s*none;/s + ); + }); +});