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 +++++++++++-----------
 .../src/timeline/components/timeline-element.tsx   | 13 +++++++++---
 2 files changed, 21 insertions(+), 15 deletions(-)

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

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>
 	);
 }
diff --git a/apps/web/src/timeline/components/timeline-element.tsx b/apps/web/src/timeline/components/timeline-element.tsx
index b25a7a28..5c412435 100644
--- a/apps/web/src/timeline/components/timeline-element.tsx
+++ b/apps/web/src/timeline/components/timeline-element.tsx
@@ -605,6 +605,12 @@ function ElementInner({
 				</div>
 			</div>
 
+			{FEATURES.effects &&
+				(element.type === "video" || element.type === "image") &&
+				hasElementEffects({ element }) && (
+					<EffectsButton element={element} track={track} />
+				)}
+
 			{isSelected && (
 				<>
 					<ResizeHandle
@@ -1074,7 +1080,8 @@ function EffectsButton({
 	return (
 		<button
 			type="button"
-			className="flex shrink-0 justify-center text-white cursor-pointer"
+			className="absolute top-1 left-1 z-10 flex shrink-0 justify-center text-white cursor-pointer"
+			aria-label="Open effects"
 			onMouseDown={(event) => event.stopPropagation()}
 			onClick={handleClick}
 		>
@@ -1135,7 +1142,7 @@ function VideoElementContent({
 				name={mediaAsset.name}
 				leading={
 					FEATURES.effects && hasElementEffects({ element }) ? (
-						<EffectsButton element={element} track={track} />
+						<div className="w-3" />
 					) : null
 				}
 				hasFade={true}
@@ -1184,7 +1191,7 @@ function ImageElementContent({
 				name={mediaAsset?.name}
 				leading={
 					FEATURES.effects && hasElementEffects({ element }) ? (
-						<EffectsButton element={element} track={track} />
+						<div className="w-3" />
 					) : null
 				}
 				hasFade={true}
-- 
cgit v1.3.1