From 48f92015e4e7cafbecb7c25dc1bc7e41af0e7f1b Mon Sep 17 00:00:00 2001
From: th <th@skilleven.de>
Date: Mon, 20 Apr 2026 14:13:33 +0200
Subject: [PATCH] 0.5.3: timeline name-col resize + playhead layering

- Track-name resize strip starts below the scrub bar and sits on the
  name-column side of the boundary, so scrubbing at time=0 is no
  longer intercepted by the resize hit area.
- Playhead (lane) and scrub handle get z-index 20 so they stay on top
  of the sticky track-name column (z-index 5) and the resize strip.
  The playhead stays fully visible at time=0 and when the lane is
  scrolled under the sticky column.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 package.json                |  2 +-
 src/components/Timeline.vue | 20 ++++++++++++++------
 src/version.ts              |  2 +-
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index c9dfb47..a1e7cf6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "animatr",
   "private": true,
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 0daa201..6c19301 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -1997,12 +1997,16 @@ onBeforeUnmount(() => {
 
 .name-col-resize {
   position: absolute;
-  top: 0;
+  /* Start below the scrub bar so the bar's hit area (scrubber/playhead)
+     is never shadowed by the resize strip. */
+  top: 28px;
   bottom: 0;
-  width: 8px;
-  transform: translateX(-4px);
+  width: 6px;
+  /* Hit area lies entirely inside the name-column side of the boundary
+     so the playhead sitting on the lane edge stays clickable. */
+  transform: translateX(-6px);
   cursor: ew-resize;
-  z-index: 15;
+  z-index: 3;
   touch-action: none;
 }
 
@@ -2011,7 +2015,7 @@ onBeforeUnmount(() => {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 4px;
+  right: 0;
   width: 1px;
   background: transparent;
   transition: background 120ms var(--ease);
@@ -2178,6 +2182,7 @@ onBeforeUnmount(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
+  z-index: 20;
 }
 
 .scrub-handle-head {
@@ -2476,7 +2481,10 @@ onBeforeUnmount(() => {
   background: var(--accent);
   pointer-events: none;
   transform: translateX(-0.5px);
-  z-index: 4;
+  /* Must render above the sticky track-name column (z-index 5) and the
+     resize strip (z-index 3) so the playhead stays visible at time=0 or
+     when scrolled. */
+  z-index: 20;
 }
 
 .kf-seg {
diff --git a/src/version.ts b/src/version.ts
index 7a96b46..238bd93 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1,2 +1,2 @@
-export const APP_VERSION = '0.5.2'
+export const APP_VERSION = '0.5.3'
 export const APP_NAME = 'RUWIO'