diff --git a/packages/session-ui/src/components/basic-tool.css b/packages/session-ui/src/components/basic-tool.css index 04b89d063e58..21c06bed967d 100644 --- a/packages/session-ui/src/components/basic-tool.css +++ b/packages/session-ui/src/components/basic-tool.css @@ -252,13 +252,25 @@ justify-content: center; flex-shrink: 0; color: var(--v2-text-text-faint); - margin-left: auto; + margin-inline-start: auto; + opacity: 0; + transform: translateX(-4px); transition: opacity 0.15s ease, - color 0.15s ease; + color 0.15s ease, + transform 0.15s ease; - @media (hover: hover) { - opacity: 0; + :dir(rtl) & { + transform: translateX(4px); + } + + @media (hover: none) { + opacity: 1; + transform: none; + } + + @media (prefers-reduced-motion: reduce) { + transition: none; } } @@ -285,6 +297,7 @@ [data-component="task-tool-action"] { opacity: 1; + transform: none; } } } diff --git a/packages/session-ui/src/tools/tool-renderer.tsx b/packages/session-ui/src/tools/tool-renderer.tsx index 02e8021cd7b3..5f16eb72bde1 100644 --- a/packages/session-ui/src/tools/tool-renderer.tsx +++ b/packages/session-ui/src/tools/tool-renderer.tsx @@ -1398,13 +1398,13 @@ ToolRegistry.register({ {subtitle()} + +
+ +
+
- -
- -
-
)