diff --git a/packages/ui/src/components/line-comment.css b/packages/ui/src/components/line-comment.css
index 52bd00030..36fb14c64 100644
--- a/packages/ui/src/components/line-comment.css
+++ b/packages/ui/src/components/line-comment.css
@@ -4,6 +4,10 @@
   z-index: var(--line-comment-z, 30);
 }
 
+[data-component="line-comment"][data-open] {
+  z-index: var(--line-comment-open-z, 100);
+}
+
 [data-component="line-comment"] [data-slot="line-comment-button"] {
   width: 20px;
   height: 20px;
diff --git a/packages/ui/src/components/line-comment.tsx b/packages/ui/src/components/line-comment.tsx
index a9e22036b..41462fa8e 100644
--- a/packages/ui/src/components/line-comment.tsx
+++ b/packages/ui/src/components/line-comment.tsx
@@ -25,6 +25,7 @@ export const LineCommentAnchor = (props: LineCommentAnchorProps) => {
       data-component="line-comment"
       data-variant={variant()}
       data-comment-id={props.id}
+      data-open={props.open ? "" : undefined}
       classList={{
         [props.class ?? ""]: !!props.class,
       }}