fix mobile inline overlay properties

This commit is contained in:
callumalpass 2026-06-02 19:14:33 +10:00
parent 5010c3ad4f
commit ff99836d9e
4 changed files with 37 additions and 2 deletions

View file

@ -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.

View file

@ -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 {

View file

@ -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

View file

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