obsidian-plugin/callumalpass_tasknotes
1
0
Fork 0
mirror of https://github.com/callumalpass/tasknotes.git synced 2026-07-22 12:50:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix mobile inline task overlay collapse

Browse source
This commit is contained in:
callumalpass 2026-05-30 07:31:22 +10:00
parent b6680de779
commit 3d948ee713
3 changed files with 32 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/releases/unreleased.md
View file

@ -23,3 +23,7 @@ Example:
```
-->
## Fixed
- (#1968) Fixed inline task link overlays collapsing on Obsidian mobile, which could hide the task title and leave a tall empty gap after the widget. Thanks to @renatomen for reporting and diagnosing the containment issue.

4
styles/task-card-bem.css
View file

@ -1445,6 +1445,10 @@ body.is-mobile .tasknotes-plugin .task-card:not(.task-card--layout-inline):not(.
/* Use inline display to respect line boundaries */
display: inline;
/* Inline overlays size from their content; card container queries are for block cards. */
container-type: normal;
container-name: none;
/* Minimal padding - no indentation needed in inline mode */
padding: 2px 0;
margin: 0;

24
tests/unit/issues/issue-1968-mobile-inline-task-overlay-containment.test.ts Normal file
View file

@ -0,0 +1,24 @@
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 #1968: mobile inline task overlay containment", () => {
it("keeps card container queries off inline task overlays", () => {
const css = readRepoFile("styles/task-card-bem.css");
expect(css).toMatch(
/\.tasknotes-plugin \.task-card\s*\{[^}]*container:\s*tn-task-card \/ inline-size;/s
);
expect(css).toMatch(
/\.tasknotes-plugin \.task-card--layout-inline\s*\{[^}]*container-type:\s*normal;[^}]*container-name:\s*none;/s
);
expect(css).toMatch(
/body\.is-mobile \.tasknotes-plugin \.task-card--layout-inline\s*\{[^}]*display:\s*inline-flex;[^}]*max-width:\s*100%;/s
);
});
});