From e913525d13d083cfa8fe5967ff22caac314099e2 Mon Sep 17 00:00:00 2001
From: Joep31 <joep@kendew-agency.com>
Date: Tue, 27 Jan 2026 10:31:02 +0100
Subject: [PATCH] refactor: allow comment overlay native div props

---
 src/components/comment-overlay.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/comment-overlay.tsx b/src/components/comment-overlay.tsx
index fa23dad..91b9324 100644
--- a/src/components/comment-overlay.tsx
+++ b/src/components/comment-overlay.tsx
@@ -1,11 +1,21 @@
-import { type CSSProperties, type ReactNode, useRef, useState } from "react";
+import {
+  type CSSProperties,
+  HTMLProps,
+  type ReactNode,
+  useRef,
+  useState,
+} from "react";
 import { useComments } from "../contexts/comment-context";
 import type { Position } from "../types";
 import { getRelativePos, normalizeRect } from "../utils/position";
 
 const DRAG_THRESHOLD = 4;
 
-export const CommentOverlay = ({ children }: { children: ReactNode }) => {
+interface CommentOverlayProps extends HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export const CommentOverlay = ({ children, ...rest }: CommentOverlayProps) => {
   const {
     overlayState,
     registerComment,
@@ -109,7 +119,7 @@ export const CommentOverlay = ({ children }: { children: ReactNode }) => {
   if (overlayState === "inactive") return children;
 
   return (
-    <div data-overlay style={{ position: "relative" }}>
+    <div data-overlay style={{ position: "relative", ...rest.style }} {...rest}>
       <div
         ref={overlayRef}
         // onClick={(e) => handleClick(e)}