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.

1 files changed, 11 insertions, 12 deletions

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>
 	);
 }