From a04863179f676e287b4cfae15db844232ee50cb7 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Sat, 15 Aug 2026 22:19:37 +0200
Subject: [PATCH] FIX - correct Clock control states

Remove the empty title reservation from World Clock and Timer views. Switch running stopwatch and timer actions to the danger treatment and lock both layout and color behavior with contract tests.
---
 frontend/src/assets/main.css                  |  3 ++
 .../src/views/apps/ClockApp.contract.test.ts  | 31 +++++++++++++++++++
 frontend/src/views/apps/ClockApp.vue          | 17 ++++++++--
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/views/apps/ClockApp.contract.test.ts

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index ba542f4..84d8af8 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4389,6 +4389,9 @@ button {
   overflow-y: auto;
   padding: 0;
 }
+.clock-navbar__empty-inner {
+  height: 0;
+}
 .phone-call-content {
   min-height: 0;
   flex: 1;
diff --git a/frontend/src/views/apps/ClockApp.contract.test.ts b/frontend/src/views/apps/ClockApp.contract.test.ts
new file mode 100644
index 0000000..4b9637c
--- /dev/null
+++ b/frontend/src/views/apps/ClockApp.contract.test.ts
@@ -0,0 +1,31 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const clockView = readFileSync(
+  new URL('./ClockApp.vue', import.meta.url),
+  'utf8',
+)
+const mainCss = readFileSync(
+  new URL('../../assets/main.css', import.meta.url),
+  'utf8',
+)
+
+describe('Clock app controls', () => {
+  it('removes the empty navigation row from world clock and timer titles', () => {
+    expect(clockView).toContain("tab === 'world' || tab === 'timer'")
+    expect(clockView).toContain("'clock-navbar__empty-inner'")
+    expect(mainCss).toMatch(
+      /\.clock-navbar__empty-inner\s*\{[^}]*height:\s*0;/s,
+    )
+  })
+
+  it('uses the danger color while stopwatch and timer controls are running', () => {
+    expect(clockView).toMatch(
+      /clock\.stopwatchStartedAt === null[\s\S]*?positiveActionColors[\s\S]*?: dangerActionColors/,
+    )
+    expect(clockView).toMatch(
+      /clock\.timerStartedAt === null[\s\S]*?positiveActionColors[\s\S]*?: dangerActionColors/,
+    )
+  })
+})
diff --git a/frontend/src/views/apps/ClockApp.vue b/frontend/src/views/apps/ClockApp.vue
index 0a54b56..f91818e 100644
--- a/frontend/src/views/apps/ClockApp.vue
+++ b/frontend/src/views/apps/ClockApp.vue
@@ -248,6 +248,11 @@ onBeforeUnmount(() => {
       <k-navbar
         v-if="tab !== 'stopwatch'"
         :title="phone.t(`Apps.clock.tabs.${tab}`)"
+        :inner-class="
+          tab === 'world' || tab === 'timer'
+            ? 'clock-navbar__empty-inner'
+            : ''
+        "
         large
         transparent
         class="clock-navbar"
@@ -351,7 +356,11 @@ onBeforeUnmount(() => {
             </k-button>
             <k-button
               rounded
-              :colors="positiveActionColors"
+              :colors="
+                clock.stopwatchStartedAt === null
+                  ? positiveActionColors
+                  : dangerActionColors
+              "
               class="clock-action-button"
               @click="
                 clock.stopwatchStartedAt === null
@@ -460,7 +469,11 @@ onBeforeUnmount(() => {
             </k-button>
             <k-button
               rounded
-              :colors="positiveActionColors"
+              :colors="
+                clock.timerStartedAt === null
+                  ? positiveActionColors
+                  : dangerActionColors
+              "
               class="clock-action-button"
               :disabled="clock.timerStartedAt === null && timerValue <= 0"
               @click="