(airflow) branch main updated: feat: make clipboard hover (#56382)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 0dca308dc58 feat: make clipboard hover (#56382)
0dca308dc58 is described below

commit 0dca308dc58a8025ab299fbc06dfa368e393e62d
Author: LI,JHE-CHEN <103923510+roylee1...@users.noreply.github.com>
AuthorDate: Wed Oct 8 13:44:12 2025 -0400

    feat: make clipboard hover (#56382)
---
 .../src/pages/TaskInstance/RenderedTemplates.tsx   | 45 ++++++++++++++--------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git 
a/airflow-core/src/airflow/ui/src/pages/TaskInstance/RenderedTemplates.tsx 
b/airflow-core/src/airflow/ui/src/pages/TaskInstance/RenderedTemplates.tsx
index c3848e192ad..c949107555c 100644
--- a/airflow-core/src/airflow/ui/src/pages/TaskInstance/RenderedTemplates.tsx
+++ b/airflow-core/src/airflow/ui/src/pages/TaskInstance/RenderedTemplates.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { Box, HStack, Table } from "@chakra-ui/react";
+import { Box, Table } from "@chakra-ui/react";
 import { useParams } from "react-router-dom";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
 import bash from "react-syntax-highlighter/dist/esm/languages/prism/bash";
@@ -61,24 +61,37 @@ export const RenderedTemplates = () => {
                 <Table.Row key={key}>
                   <Table.Cell>{key}</Table.Cell>
                   <Table.Cell>
-                    <HStack alignItems="flex-start">
-                      <Box flex="1">
-                        <Box as="pre" borderRadius="md" fontSize="sm" m={0} 
overflowX="auto" p={2}>
-                          <SyntaxHighlighter
-                            language={language}
-                            PreTag="div" // Prevents double <pre> nesting
-                            showLineNumbers
-                            style={style}
-                            wrapLongLines
-                          >
-                            {renderedValue}
-                          </SyntaxHighlighter>
-                        </Box>
+                    <Box
+                      css={{
+                        "&:hover .copy-button": {
+                          opacity: 1,
+                        },
+                      }}
+                    >
+                      <Box as="pre" borderRadius="md" fontSize="sm" m={0} 
overflowX="auto" p={2}>
+                        <SyntaxHighlighter
+                          language={language}
+                          PreTag="div" // Prevents double <pre> nesting
+                          showLineNumbers
+                          style={style}
+                          wrapLongLines
+                        >
+                          {renderedValue}
+                        </SyntaxHighlighter>
                       </Box>
-                      <ClipboardRoot value={renderedValue}>
+                      <ClipboardRoot
+                        className="copy-button"
+                        float="right"
+                        marginTop="-3.5rem"
+                        opacity={0}
+                        position="sticky"
+                        right={4}
+                        transition="opacity 0.2s ease-in-out"
+                        value={renderedValue}
+                      >
                         <ClipboardIconButton />
                       </ClipboardRoot>
-                    </HStack>
+                    </Box>
                   </Table.Cell>
                 </Table.Row>
               );