From c07a92b0d8dea97621db4f26227865eaca14d0a9 Mon Sep 17 00:00:00 2001
From: Afonso Jorge Ramos <afonsojorgeramos@gmail.com>
Date: Thu, 17 Sep 2026 10:45:24 +0200
Subject: [PATCH] fix(ziro): contain playback timestamps without blocking
 clicks

Keep the timestamp parents positioned and preserve Spotify's native width
so absolute child spans neither cover the viewport nor collapse onto the
seek bar. Update the regression assertion and bump Ziro to 0.1.4.

Fixes #20
---
 scripts/ziro-theme.test.mts | 15 +++++++++------
 themes/ziro/index.css       |  3 +--
 themes/ziro/metadata.json   |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/scripts/ziro-theme.test.mts b/scripts/ziro-theme.test.mts
index 2bfbd2a9..34f8c517 100644
--- a/scripts/ziro-theme.test.mts
+++ b/scripts/ziro-theme.test.mts
@@ -11,11 +11,14 @@ describe("ziro current-client compatibility", () => {
 		assert.doesNotMatch(css, /\.main-nowPlayingView-contextItemInfo::before/);
 	});
 
-	it("uses the current playback bar flow for both timestamps", () => {
-		assert.match(
-			css,
-			/\.playback-bar__progress-time-elapsed,\s*\.main-playbackBarRemainingTime-container\s*\{[^}]*position:\s*static\s*;[^}]*margin:\s*0\s*;[^}]*width:\s*auto\s*;/s,
-		);
+	it("keeps both timestamp containers positioned so their absolute children cannot cover the viewport", () => {
+		const rule = css.match(
+			/\.playback-bar__progress-time-elapsed,\s*\.main-playbackBarRemainingTime-container\s*\{([^}]*)\}/s,
+		)?.[1];
+		assert.ok(rule, "both timestamps must share a containing-block rule");
+		assert.match(rule, /position:\s*relative\s*;/);
+		assert.match(rule, /margin:\s*0\s*;/);
+		assert.doesNotMatch(rule, /\bwidth\s*:/, "preserve Spotify's width for the absolute time spans");
 		assert.match(css, /\.playback-bar__progress-time-elapsed::after\s*\{[^}]*content:\s*none\s*;/s);
 		assert.doesNotMatch(
 			css,
@@ -24,6 +27,6 @@ describe("ziro current-client compatibility", () => {
 	});
 
 	it("ships as a patch release", () => {
-		assert.equal(metadata.version, "0.1.3");
+		assert.equal(metadata.version, "0.1.4");
 	});
 });
diff --git a/themes/ziro/index.css b/themes/ziro/index.css
index 8af31903..98ccab4c 100644
--- a/themes/ziro/index.css
+++ b/themes/ziro/index.css
@@ -129,9 +129,8 @@
 .playback-bar__progress-time-elapsed,
 .main-playbackBarRemainingTime-container {
 	color: var(--spice-text);
-	position: static;
+	position: relative;
 	margin: 0;
-	width: auto;
 }
 .playback-bar__progress-time-elapsed::after {
 	content: none;
diff --git a/themes/ziro/metadata.json b/themes/ziro/metadata.json
index 0afab098..70b5a2c1 100644
--- a/themes/ziro/metadata.json
+++ b/themes/ziro/metadata.json
@@ -1,7 +1,7 @@
 {
 	"name": "ziro",
 	"kind": "theme",
-	"version": "0.1.3",
+	"version": "0.1.4",
 	"authors": ["schnensch0"],
 	"description": "Soft rounded design inspired by the Zorin GTK themes",
 	"entries": {