fix pomodoro vertical split layout

docs/releases/unreleased.md

@@ -26,6 +26,8 @@ Example:
 
 ## Fixed
 
+- (#1957) Fixed the Pomodoro timer layout in vertically split panes so the timer header and progress circle remain reachable when the pane is short.
+  - Thanks to @sumiyalairu03 for reporting.
 - (#1956) Fixed Google Calendar sync so completing a recurring task updates the linked event title with the completion checkmark.
   - Thanks to @jacksoluke for reporting.
 - (#1953) Fixed inline task conversion so source-line wikilinks no longer create nested wikilinks in the replacement link text.

styles/pomodoro-view.css

@@ -16,7 +16,7 @@
     min-width: 0;
     min-height: 0;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     background: var(--tn-bg-primary);
 
 	button {
@@ -502,6 +502,16 @@
     box-sizing: border-box;
 }
 
+/* Center the timer group only when there is spare height. Auto margins collapse
+   when the pane is shorter than the content, keeping the top scrollable. */
+.tasknotes-plugin.pomodoro-view > .pomodoro-view__timer-section {
+    margin-top: auto;
+}
+
+.tasknotes-plugin.pomodoro-view > .pomodoro-view__stats-section {
+    margin-bottom: auto;
+}
+
 /* Statistics Grid */
 .tasknotes-plugin .pomodoro-view__stats {
     display: flex;

tests/unit/issues/issue-1957-pomodoro-vertical-split-layout.test.ts

@@ -0,0 +1,35 @@
+import fs from "fs";
+import path from "path";
+
+function readPomodoroCss(): string {
+	return fs.readFileSync(
+		path.resolve(__dirname, "../../../styles/pomodoro-view.css"),
+		"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 #1957: Pomodoro vertical split layout", () => {
+	it("avoids unsafe vertical centering when the Pomodoro pane overflows", () => {
+		const css = readPomodoroCss();
+		const rootBlock = extractCssBlock(css, ".tasknotes-plugin.pomodoro-view");
+		const timerSectionBlock = extractCssBlock(
+			css,
+			".tasknotes-plugin.pomodoro-view > .pomodoro-view__timer-section"
+		);
+		const statsSectionBlock = extractCssBlock(
+			css,
+			".tasknotes-plugin.pomodoro-view > .pomodoro-view__stats-section"
+		);
+
+		expect(rootBlock).toContain("justify-content: flex-start;");
+		expect(rootBlock).not.toContain("justify-content: center;");
+		expect(timerSectionBlock).toContain("margin-top: auto;");
+		expect(statsSectionBlock).toContain("margin-bottom: auto;");
+	});
+});