From fcf954573618201e1a87ebf6d2987b0ef0e1d587 Mon Sep 17 00:00:00 2001
From: XYSK-lilong007 <267018309+XYSK-lilong007@users.noreply.github.com>
Date: Thu, 12 Mar 2026 01:21:44 +0800
Subject: [PATCH 1/2] fix: use native textarea scrolling for raw config editor

---
 .../src/components/config/raw-json-panel.tsx  | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/web/frontend/src/components/config/raw-json-panel.tsx b/web/frontend/src/components/config/raw-json-panel.tsx
index f67bd89f5..5f195f744 100644
--- a/web/frontend/src/components/config/raw-json-panel.tsx
+++ b/web/frontend/src/components/config/raw-json-panel.tsx
@@ -22,7 +22,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card"
-import { ScrollArea } from "@/components/ui/scroll-area"
 import { Textarea } from "@/components/ui/textarea"
 
 export function RawJsonPanel() {
@@ -142,17 +141,15 @@ export function RawJsonPanel() {
               </div>
             )}
             <div className="bg-muted/30 relative rounded-lg border">
-              <ScrollArea className="h-[calc(100vh-20rem)] min-h-[200px]">
-                <Textarea
-                  value={effectiveEditorValue}
-                  onChange={(e) => {
-                    setEditorValue(e.target.value)
-                    setIsDirty(true)
-                  }}
-                  className="min-h-[200px] resize-none border-0 bg-transparent px-4 py-3 font-mono text-sm shadow-none focus-visible:ring-0"
-                  placeholder={t("pages.config.json_placeholder")}
-                />
-              </ScrollArea>
+              <Textarea
+                value={effectiveEditorValue}
+                onChange={(e) => {
+                  setEditorValue(e.target.value)
+                  setIsDirty(true)
+                }}
+                className="h-[calc(100vh-20rem)] min-h-[200px] w-full resize-none overflow-auto border-0 bg-transparent px-4 py-3 font-mono text-sm shadow-none focus-visible:ring-0"
+                placeholder={t("pages.config.json_placeholder")}
+              />
             </div>
             <div className="flex justify-end space-x-2">
               <Button

From b5bd434ddba599c678ed9a8d08efba15e396949f Mon Sep 17 00:00:00 2001
From: Alix-007 <llagy007@gmail.com>
Date: Thu, 12 Mar 2026 14:51:52 +0800
Subject: [PATCH 2/2] fix(web): allow horizontal scroll in raw json editor
 (#1386)

Co-authored-by: XYSK-lilong007 <267018309+XYSK-lilong007@users.noreply.github.com>
Co-authored-by: wenjie <meetwenjie@gmail.com>
---
 web/frontend/src/components/config/raw-json-panel.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/frontend/src/components/config/raw-json-panel.tsx b/web/frontend/src/components/config/raw-json-panel.tsx
index 5f195f744..b8a059506 100644
--- a/web/frontend/src/components/config/raw-json-panel.tsx
+++ b/web/frontend/src/components/config/raw-json-panel.tsx
@@ -147,7 +147,8 @@ export function RawJsonPanel() {
                   setEditorValue(e.target.value)
                   setIsDirty(true)
                 }}
-                className="h-[calc(100vh-20rem)] min-h-[200px] w-full resize-none overflow-auto border-0 bg-transparent px-4 py-3 font-mono text-sm shadow-none focus-visible:ring-0"
+                wrap="off"
+                className="min-h-[200px] resize-none overflow-x-auto border-0 bg-transparent px-4 py-3 font-mono text-sm whitespace-pre shadow-none [overflow-wrap:normal] focus-visible:ring-0"
                 placeholder={t("pages.config.json_placeholder")}
               />
             </div>