From 06559d7794986aa55b5572443ff88063d8f9c87b Mon Sep 17 00:00:00 2001
From: mpcgird <mihai.popescu.dev@gmail.com>
Date: Tue, 17 Feb 2026 00:11:56 +0200
Subject: [PATCH 1/3] Limit text selection to the code block

---
 apps/webapp/app/components/code/CodeBlock.tsx | 81 +++++++++++--------
 1 file changed, 48 insertions(+), 33 deletions(-)

diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index 431a02ba35c..d2e844297e9 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -217,6 +217,19 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [isWrapped, setIsWrapped] = useState(false);
 
+    const handleCodeMouseDown = useCallback((e: React.MouseEvent) => {
+      if (e.button !== 0) return;
+      const el = e.currentTarget as HTMLElement;
+      document.documentElement.style.userSelect = "none";
+      el.style.userSelect = "text";
+      const restore = () => {
+        document.documentElement.style.userSelect = "";
+        el.style.userSelect = "";
+        document.removeEventListener("mouseup", restore);
+      };
+      document.addEventListener("mouseup", restore);
+    }, []);
+
     const onCopied = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
         event.preventDefault();
@@ -334,42 +347,44 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
             )}
           </div>
 
-          {shouldHighlight ? (
-            <HighlightCode
-              theme={theme}
-              code={code}
-              language={language}
-              showLineNumbers={showLineNumbers}
-              highlightLines={highlightLines}
-              maxLineWidth={maxLineWidth}
-              className="px-2 py-3"
-              preClassName="text-xs"
-              isWrapped={isWrapped}
-              searchTerm={searchTerm}
-            />
-          ) : (
-            <div
-              dir="ltr"
-              className={cn(
-                "px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
-                !isWrapped && "overflow-x-auto",
-                isWrapped && "overflow-y-auto"
-              )}
-              style={{
-                maxHeight,
-              }}
-            >
-              <pre
+          <div onMouseDown={handleCodeMouseDown}>
+            {shouldHighlight ? (
+              <HighlightCode
+                theme={theme}
+                code={code}
+                language={language}
+                showLineNumbers={showLineNumbers}
+                highlightLines={highlightLines}
+                maxLineWidth={maxLineWidth}
+                className="px-2 py-3"
+                preClassName="text-xs"
+                isWrapped={isWrapped}
+                searchTerm={searchTerm}
+              />
+            ) : (
+              <div
+                dir="ltr"
                 className={cn(
-                  "relative mr-2 p-2 font-mono text-xs leading-relaxed",
-                  isWrapped && "[&_span]:whitespace-pre-wrap [&_span]:break-words"
+                  "px-2 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
+                  !isWrapped && "overflow-x-auto",
+                  isWrapped && "overflow-y-auto"
                 )}
-                dir="ltr"
+                style={{
+                  maxHeight,
+                }}
               >
-                {highlightSearchText(code, searchTerm)}
-              </pre>
-            </div>
-          )}
+                <pre
+                  className={cn(
+                    "relative mr-2 p-2 font-mono text-xs leading-relaxed",
+                    isWrapped && "[&_span]:whitespace-pre-wrap [&_span]:break-words"
+                  )}
+                  dir="ltr"
+                >
+                  {highlightSearchText(code, searchTerm)}
+                </pre>
+              </div>
+            )}
+          </div>
         </div>
 
         <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>

From 611b7deecd60c3d7c7fd2f1505aa2b1e34ba86df Mon Sep 17 00:00:00 2001
From: mpcgird <mihai.popescu.dev@gmail.com>
Date: Tue, 17 Feb 2026 00:41:00 +0200
Subject: [PATCH 2/3] Added same logic for modal

---
 apps/webapp/app/components/code/CodeBlock.tsx | 56 +++++++++++--------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index d2e844297e9..d83a4f34048 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -2,7 +2,7 @@ import { ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 import { Clipboard, ClipboardCheck } from "lucide-react";
 import type { Language, PrismTheme } from "prism-react-renderer";
 import { Highlight, Prism } from "prism-react-renderer";
-import { forwardRef, ReactNode, useCallback, useEffect, useState } from "react";
+import { forwardRef, ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { TextWrapIcon } from "~/assets/icons/TextWrapIcon";
 import { cn } from "~/utils/cn";
 import { highlightSearchText } from "~/utils/logUtils";
@@ -217,6 +217,8 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [isWrapped, setIsWrapped] = useState(false);
 
+    const restoreRef = useRef<(() => void) | null>(null);
+
     const handleCodeMouseDown = useCallback((e: React.MouseEvent) => {
       if (e.button !== 0) return;
       const el = e.currentTarget as HTMLElement;
@@ -226,10 +228,16 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
         document.documentElement.style.userSelect = "";
         el.style.userSelect = "";
         document.removeEventListener("mouseup", restore);
+        restoreRef.current = null;
       };
+      restoreRef.current = restore;
       document.addEventListener("mouseup", restore);
     }, []);
 
+    useEffect(() => {
+      return () => restoreRef.current?.();
+    }, []);
+
     const onCopied = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {
         event.preventDefault();
@@ -405,28 +413,30 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
               </Button>
             </DialogHeader>
 
-            {shouldHighlight ? (
-              <HighlightCode
-                theme={theme}
-                code={code}
-                language={language}
-                showLineNumbers={showLineNumbers}
-                highlightLines={highlightLines}
-                maxLineWidth={maxLineWidth}
-                className="min-h-full"
-                preClassName="text-sm"
-                isWrapped={isWrapped}
-              />
-            ) : (
-              <div
-                dir="ltr"
-                className="overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-              >
-                <pre className="relative mr-2 p-2 font-mono text-base leading-relaxed" dir="ltr">
-                  {highlightSearchText(code, searchTerm)}
-                </pre>
-              </div>
-            )}
+            <div onMouseDown={handleCodeMouseDown}>
+              {shouldHighlight ? (
+                <HighlightCode
+                  theme={theme}
+                  code={code}
+                  language={language}
+                  showLineNumbers={showLineNumbers}
+                  highlightLines={highlightLines}
+                  maxLineWidth={maxLineWidth}
+                  className="min-h-full"
+                  preClassName="text-sm"
+                  isWrapped={isWrapped}
+                />
+              ) : (
+                <div
+                  dir="ltr"
+                  className="overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+                >
+                  <pre className="relative mr-2 p-2 font-mono text-base leading-relaxed" dir="ltr">
+                    {highlightSearchText(code, searchTerm)}
+                  </pre>
+                </div>
+              )}
+            </div>
           </DialogContent>
         </Dialog>
       </>

From 99abbd8063bed250d4c19a2814c6214b60ed0aa9 Mon Sep 17 00:00:00 2001
From: mpcgird <mihai.popescu.dev@gmail.com>
Date: Tue, 17 Feb 2026 01:10:23 +0200
Subject: [PATCH 3/3] Added safety removal for event listener Fixed modal text
 overflowing

---
 apps/webapp/app/components/code/CodeBlock.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx
index d83a4f34048..36c119b9b68 100644
--- a/apps/webapp/app/components/code/CodeBlock.tsx
+++ b/apps/webapp/app/components/code/CodeBlock.tsx
@@ -228,10 +228,12 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
         document.documentElement.style.userSelect = "";
         el.style.userSelect = "";
         document.removeEventListener("mouseup", restore);
+        window.removeEventListener("blur", restore);
         restoreRef.current = null;
       };
       restoreRef.current = restore;
-      document.addEventListener("mouseup", restore);
+      document.addEventListener("mouseup", restore, { once: true });
+      window.addEventListener("blur", restore, { once: true });
     }, []);
 
     useEffect(() => {
@@ -413,7 +415,7 @@ export const CodeBlock = forwardRef<HTMLDivElement, CodeBlockProps>(
               </Button>
             </DialogHeader>
 
-            <div onMouseDown={handleCodeMouseDown}>
+            <div onMouseDown={handleCodeMouseDown} className="overflow-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
               {shouldHighlight ? (
                 <HighlightCode
                   theme={theme}