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 details fallback width

Browse source
This commit is contained in:
callumalpass 2026-05-25 00:59:18 +10:00
parent f0f527a2b3
commit a9c5a41d7c
3 changed files with 72 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/releases/unreleased.md
View file

@ -40,3 +40,5 @@ Example:
- Thanks to @martin-forge for reporting and contributing the fix.
- (#1938) Fixed partial HTTP API task updates rewriting native tags with `#` prefixes or duplicate task tags.
- Thanks to @joseluisgonzalezdelgado-ctrl for reporting.
- (#1939) Fixed the mobile task Details field rendering as a small nested textarea when the embedded editor falls back on iPhone.
- Thanks to @g-arthurvanderbilt for reporting.

27
styles/task-modal.css
View file

@ -63,6 +63,30 @@
flex: 1 1 auto;
}
.tn-task-modal__markdown-editor--details .details-editor-fallback {
display: block;
width: 100%;
min-height: inherit;
height: 100%;
max-height: 400px;
box-sizing: border-box;
padding: var(--size-4-2);
border: none;
border-radius: 0;
background: transparent;
color: var(--text-normal);
font-family: var(--font-text);
font-size: var(--font-ui-medium);
line-height: var(--line-height-normal);
resize: none;
overflow-y: auto;
}
.tn-task-modal__markdown-editor--details .details-editor-fallback:focus {
outline: none;
box-shadow: none;
}
/* Style the editor content */
.tn-task-modal__markdown-editor--details .cm-content {
padding-left: var(--size-4-2);
@ -761,7 +785,8 @@ body.is-mobile .tasknotes-plugin.minimalist-task-modal .modal-split-right {
body.is-mobile .tasknotes-plugin .tn-task-modal__markdown-editor--details,
body.is-mobile .tasknotes-plugin .tn-task-modal__markdown-editor--details .task-details-editor,
body.is-mobile .tasknotes-plugin .tn-task-modal__markdown-editor--details .cm-editor {
body.is-mobile .tasknotes-plugin .tn-task-modal__markdown-editor--details .cm-editor,
body.is-mobile .tasknotes-plugin .tn-task-modal__markdown-editor--details .details-editor-fallback {
min-height: 140px;
max-height: 32vh;
}

44
tests/unit/issues/issue-1939-mobile-details-fallback-width.test.ts Normal file
View file

@ -0,0 +1,44 @@
/**
* Issue #1939: when the embedded details editor falls back to a textarea on
* mobile, the fallback should fill the details field instead of rendering as a
* small native textarea inside it.
*
* @see https://github.com/callumalpass/tasknotes/issues/1939
*/
import * as fs from "fs";
import * as path from "path";
const cssFilePath = path.resolve(__dirname, "../../../styles/task-modal.css");
describe("Issue #1939: mobile details editor fallback width", () => {
it("sizes the fallback textarea to fill the details editor wrapper", () => {
const cssContent = fs.readFileSync(cssFilePath, "utf-8");
const fallbackBlock = extractCssBlock(
cssContent,
".tn-task-modal__markdown-editor--details .details-editor-fallback"
);
expect(fallbackBlock).toContain("display: block");
expect(fallbackBlock).toContain("width: 100%");
expect(fallbackBlock).toContain("height: 100%");
expect(fallbackBlock).toContain("box-sizing: border-box");
expect(fallbackBlock).toContain("border: none");
expect(fallbackBlock).toContain("resize: none");
});
it("uses the same mobile height cap as the CodeMirror details editor", () => {
const cssContent = fs.readFileSync(cssFilePath, "utf-8");
expect(cssContent).toMatch(
/body\.is-mobile \.tasknotes-plugin \.tn-task-modal__markdown-editor--details,[^{]*\.details-editor-fallback\s*\{[^}]*min-height:\s*140px;[^}]*max-height:\s*32vh;/s
);
});
});
function extractCssBlock(css: string, selector: string): string {
const escapedSelector = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const regex = new RegExp(`${escapedSelector}\\s*\\{([^}]*?)\\}`, "s");
const match = css.match(regex);
return match ? match[1] : "";
}