From d972d31223cb4f19dfd5e6ec0fe1e342bc3be0f2 Mon Sep 17 00:00:00 2001
From: cashmere <cashmere@autistici.org>
Date: Sun, 2 Aug 2026 19:59:46 +0200
Subject: fix: un-nest buttons in timeline to resolve hydration errors

Bookmark markers rendered inside the ruler <button>, and the effects
badge inside the timeline element's main <button>. Both are invalid
HTML and triggered React hydration errors once the effects panel was
enabled. Bookmarks now sit as siblings of the ruler button (wheel
handling moved to the shared wrapper), and the effects badge renders
absolutely positioned next to the element button like the resize
handles, with a spacer keeping the header layout.
---
 .../timeline/bookmarks/components/bookmarks.tsx    | 23 +++++++++++-----------
 1 file changed, 11 insertions(+), 12 deletions(-)

(limited to 'apps/web/src/timeline/bookmarks')

diff --git a/apps/web/src/timeline/bookmarks/components/bookmarks.tsx b/apps/web/src/timeline/bookmarks/components/bookmarks.tsx
index 43ba4ffc..d0a7863d 100644
--- a/apps/web/src/timeline/bookmarks/components/bookmarks.tsx
+++ b/apps/web/src/timeline/bookmarks/components/bookmarks.tsx
@@ -85,6 +85,7 @@ export function TimelineBookmarksRow({
 		<div
 			className="relative flex-1 overflow-hidden"
 			style={{ height: TIMELINE_BOOKMARK_ROW_HEIGHT_PX }}
+			onWheel={handleWheel}
 		>
 			<button
 				className="relative w-full cursor-default select-none border-0 bg-transparent p-0"
@@ -94,7 +95,6 @@ export function TimelineBookmarksRow({
 				}}
 				aria-label="Timeline ruler"
 				type="button"
-				onWheel={handleWheel}
 				onClick={(event) => {
 					if (!event.currentTarget.contains(event.target as Node)) return;
 					handleTimelineContentClick(event);
@@ -104,17 +104,16 @@ export function TimelineBookmarksRow({
 					handleRulerMouseDown(event);
 					handleRulerTrackingMouseDown(event);
 				}}
-			>
-				{bookmarks.map((bookmark) => (
-					<TimelineBookmark
-						key={`bookmark-${bookmark.time}`}
-						bookmark={bookmark}
-						zoomLevel={zoomLevel}
-						dragState={dragState}
-						onBookmarkMouseDown={onBookmarkMouseDown}
-					/>
-				))}
-			</button>
+			/>
+			{bookmarks.map((bookmark) => (
+				<TimelineBookmark
+					key={`bookmark-${bookmark.time}`}
+					bookmark={bookmark}
+					zoomLevel={zoomLevel}
+					dragState={dragState}
+					onBookmarkMouseDown={onBookmarkMouseDown}
+				/>
+			))}
 		</div>
 	);
 }
-- 
cgit v1.3.1