From 564174632ccda751555a1e4128c3b897bbc1b86f Mon Sep 17 00:00:00 2001
From: Douglas Fabris <devfabris@gmail.com>
Date: Wed, 6 Mar 2024 15:40:18 -0300
Subject: [PATCH] fix(fuselage): `MessageToolbarWrapper` visibility (#1310)

---
 .changeset/early-cycles-serve.md              |  5 +++++
 .../MessageToolbar/MessageToolbar.styles.scss | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/early-cycles-serve.md

diff --git a/.changeset/early-cycles-serve.md b/.changeset/early-cycles-serve.md
new file mode 100644
index 0000000000..f86d090825
--- /dev/null
+++ b/.changeset/early-cycles-serve.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): `MessageToolbarWrapper` visibility
diff --git a/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss b/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss
index 1543b3be9a..d80c987179 100644
--- a/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss
+++ b/packages/fuselage/src/components/Message/MessageToolbar/MessageToolbar.styles.scss
@@ -9,6 +9,8 @@
   margin-inline: lengths.margin(20);
   padding: lengths.padding(2);
 
+  opacity: 0;
+
   border: lengths.border-width(default) solid colors.stroke(extra-light);
   border-radius: theme(
     'message-toolbar-border-radius',
@@ -19,17 +21,26 @@
   &__wrapper {
     display: none;
 
-    @at-root .rcx-message:hover &,
-      &--visible {
+    .rcx-message:hover &,
+    .rcx-message:focus-within & {
       display: inline-block;
     }
 
-    @at-root .rcx-message:focus-within &,
-      &--visible {
+    &--visible {
       display: inline-block;
+
+      .rcx-message-toolbar {
+        opacity: 1;
+      }
     }
   }
 
+  .rcx-message:hover &,
+  .rcx-message:has(:focus-visible) &,
+  .rcx-message:focus-visible & {
+    opacity: 1;
+  }
+
   @at-root .rcx-message & {
     position: absolute;
     z-index: 10;