From dcdb394938121586fa378afd0a6f9f41ac04469a Mon Sep 17 00:00:00 2001
From: Balint Gabor <127662+gbalint@users.noreply.github.com>
Date: Wed, 13 Dec 2023 14:59:51 +0100
Subject: [PATCH] Only show Resolve/Unresolve button in comments tab on mouse
 hover (#4649)

* Only show Resolve/Unresolve button on mouse hover

* Revert "Only show Resolve/Unresolve button on mouse hover"

This reverts commit e7fd9222848d26c9c9d499782d64002757c57382.

* Use css not javascript

* Remove unnecessary rule
---
 .../inspector/sections/comment-section.tsx      | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/inspector/sections/comment-section.tsx b/editor/src/components/inspector/sections/comment-section.tsx
index 6569bb37058a..1d924a1a1c42 100644
--- a/editor/src/components/inspector/sections/comment-section.tsx
+++ b/editor/src/components/inspector/sections/comment-section.tsx
@@ -1,3 +1,6 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
 import '@liveblocks/react-comments/styles.css'
 import React from 'react'
 import {
@@ -179,6 +182,7 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
   return (
     <div
       ref={ref}
+      className={'thread-preview'}
       key={comment.id}
       onClick={onClick}
       style={{
@@ -240,7 +244,18 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
         )}
         {unless(repliesCount > 0, <div />)}
         {when(readByMe === 'unread', 'Unread')}
-        <Button highlight spotlight style={{ padding: '0 6px' }} onClick={onResolveThread}>
+        <Button
+          highlight
+          spotlight
+          css={{
+            visibility: 'hidden',
+            '.thread-preview:hover &': {
+              visibility: 'visible',
+            },
+            padding: '0 6px',
+          }}
+          onClick={onResolveThread}
+        >
           {thread.metadata.resolved ? 'Unresolve' : 'Resolve'}
         </Button>
       </div>