From 0d5faf9fa59a2aede61c81fa9c56dec0ff440849 Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Wed, 16 Oct 2024 13:57:16 +0300
Subject: [PATCH] update highlighting

---
 .../src/components/CodeBlock/Line/index.tsx   | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx b/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
index be755b05cb790..54fb96f91f363 100644
--- a/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
@@ -205,21 +205,17 @@ export const CodeBlockLine = ({
     isTokenHighlighted: boolean
     offset: number
   }) => (
-    <span
-      className={clsx(
-        isTokenHighlighted && "cursor-default",
-        isTokenHighlighted &&
-          !animateTokenHighlights &&
-          "lg:bg-medusa-alpha-white-alpha-6 lg:border lg:border-medusa-alpha-white-alpha-12 lg:rounded-docs_xs",
-        animateTokenHighlights && isTokenHighlighted && "relative"
-      )}
-    >
-      {animateTokenHighlights && isTokenHighlighted && (
+    <span className={clsx(isTokenHighlighted && "relative")}>
+      {isTokenHighlighted && (
         <span
           className={clsx(
-            "animate-fast animate-growWidth animation-fill-forwards",
+            animateTokenHighlights && [
+              "animate-fast animate-growWidth animation-fill-forwards",
+            ],
+            !animateTokenHighlights && "w-full",
             "absolute left-0 top-0 h-full z-0",
-            "lg:bg-medusa-alpha-white-alpha-6 lg:border lg:border-medusa-alpha-white-alpha-12 lg:rounded-docs_xs"
+            "lg:bg-medusa-alpha-white-alpha-6 lg:border lg:border-medusa-alpha-white-alpha-12",
+            "lg:rounded-docs_xs scale-x-[1.05]"
           )}
         />
       )}
@@ -234,7 +230,7 @@ export const CodeBlockLine = ({
             key={tokenKey}
             className={clsx(
               tokenClassName,
-              isTokenHighlighted && animateTokenHighlights && "relative z-[1]"
+              isTokenHighlighted && "relative z-[1]"
             )}
             {...rest}
           />