From b437d8113c7a72f9e5f65633b69bb8fbe5faab56 Mon Sep 17 00:00:00 2001
From: callumalpass <callumalpass@gmail.com>
Date: Thu, 28 May 2026 14:56:44 +1000
Subject: [PATCH] fix pomodoro vertical split layout

---
 docs/releases/unreleased.md                   |  2 ++
 styles/pomodoro-view.css                      | 12 ++++++-
 ...957-pomodoro-vertical-split-layout.test.ts | 35 +++++++++++++++++++
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 tests/unit/issues/issue-1957-pomodoro-vertical-split-layout.test.ts

diff --git a/docs/releases/unreleased.md b/docs/releases/unreleased.md
index b19c02c3..7f8339e5 100644
--- a/docs/releases/unreleased.md
+++ b/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.
diff --git a/styles/pomodoro-view.css b/styles/pomodoro-view.css
index 4451c082..be5c8c35 100644
--- a/styles/pomodoro-view.css
+++ b/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;
diff --git a/tests/unit/issues/issue-1957-pomodoro-vertical-split-layout.test.ts b/tests/unit/issues/issue-1957-pomodoro-vertical-split-layout.test.ts
new file mode 100644
index 00000000..f1a66812
--- /dev/null
+++ b/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;");
+	});
+});