[v3-1-test] feat: make clipboard hover (#56382) (#56484)

(cherry picked from commit 0dca308)

Co-authored-by: LI,JHE-CHEN <103923510+RoyLee1224@users.noreply.github.com>
Co-authored-by: Brent Bovenzi <brent@astronomer.io>

Author: 3 people

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>
               );