From f5a698ad6f22816ad9e980bd35b6a598b1984c42 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 27 Sep 2023 18:48:18 +0300
Subject: [PATCH] docs: fix code block's usage of z-index (#5238)

---
 .../docs-ui/src/components/CodeBlock/index.tsx   | 16 +++++++++++-----
 .../docs-ui/src/components/CopyButton/index.tsx  |  2 ++
 .../docs-ui/src/components/Tooltip/index.tsx     |  2 ++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/www/packages/docs-ui/src/components/CodeBlock/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
index 595343d0f1..79e8e20597 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
@@ -27,7 +27,6 @@ export const CodeBlock = ({
       className={clsx(
         "bg-medusa-code-bg-base relative mb-docs_1 rounded-docs_DEFAULT",
         "border-medusa-code-border w-full max-w-full border",
-        "xs:after:content-[''] xs:after:rounded xs:after:absolute xs:after:right-0 xs:after:top-0 xs:after:w-[calc(10%+24px)] xs:after:h-full xs:after:bg-code-fade",
         collapsed && "max-h-[400px] overflow-auto",
         className
       )}
@@ -97,12 +96,19 @@ export const CodeBlock = ({
             </pre>
             <div
               className={clsx(
-                "absolute z-[1] hidden gap-docs_1 md:flex",
-                tokens.length === 1 && "right-docs_0.75 top-[10px]",
-                tokens.length > 1 && "right-docs_1 top-docs_1"
+                "absolute hidden gap-docs_1 md:flex",
+                "xs:rounded xs:absolute xs:right-0 xs:top-0 xs:w-[calc(10%+24px)] xs:h-full xs:bg-code-fade"
               )}
             >
-              <CopyButton text={source} tooltipClassName="font-base">
+              <CopyButton
+                text={source}
+                tooltipClassName="font-base"
+                className={clsx(
+                  "absolute",
+                  tokens.length === 1 && "right-docs_0.75 top-[10px]",
+                  tokens.length > 1 && "right-docs_1 top-docs_1"
+                )}
+              >
                 <SquareTwoStackSolid className="text-medusa-code-icon" />
               </CopyButton>
             </div>
diff --git a/www/packages/docs-ui/src/components/CopyButton/index.tsx b/www/packages/docs-ui/src/components/CopyButton/index.tsx
index 2194227bf8..5e17709def 100644
--- a/www/packages/docs-ui/src/components/CopyButton/index.tsx
+++ b/www/packages/docs-ui/src/components/CopyButton/index.tsx
@@ -16,6 +16,7 @@ export const CopyButton = ({
   buttonClassName = "",
   tooltipClassName = "",
   children,
+  className,
 }: CopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false)
   const copyTimeout = useRef<number>(0)
@@ -34,6 +35,7 @@ export const CopyButton = ({
     <Tooltip
       text={isCopied ? `Copied!` : `Copy to Clipboard`}
       tooltipClassName={tooltipClassName}
+      className={className}
     >
       <span
         className={clsx("cursor-pointer", buttonClassName)}
diff --git a/www/packages/docs-ui/src/components/Tooltip/index.tsx b/www/packages/docs-ui/src/components/Tooltip/index.tsx
index f01341f840..1de6bc5890 100644
--- a/www/packages/docs-ui/src/components/Tooltip/index.tsx
+++ b/www/packages/docs-ui/src/components/Tooltip/index.tsx
@@ -21,6 +21,7 @@ export const Tooltip = ({
   children,
   html = "",
   tooltipChildren,
+  className,
   ...tooltipProps
 }: TooltipProps) => {
   const [elementId, setElementId] = useState<string>("")
@@ -38,6 +39,7 @@ export const Tooltip = ({
         data-tooltip-content={text}
         data-tooltip-html={html}
         data-tooltip-id={elementId}
+        className={className}
       >
         {children}
       </span>