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;