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, 10 insertions, 3 deletions

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}