From d7f99e7ce02cc61865ef4d1be07743254255579d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Tue, 13 May 2025 17:41:46 -0300
Subject: [PATCH] fix: json selection not visible (#8028)

* Fixed json selection not appearing and selection color

* Added h full to json viewer
---
 .../core/jsonOutputComponent/json-output-view.tsx         | 2 +-
 src/frontend/src/style/classes.css                        | 5 +++++
 src/frontend/src/style/index.css                          | 8 ++++----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/core/jsonOutputComponent/json-output-view.tsx b/src/frontend/src/components/core/jsonOutputComponent/json-output-view.tsx
index 1426df796..5a039d74f 100644
--- a/src/frontend/src/components/core/jsonOutputComponent/json-output-view.tsx
+++ b/src/frontend/src/components/core/jsonOutputComponent/json-output-view.tsx
@@ -24,7 +24,7 @@ const JsonOutputViewComponent: React.FC<JsonOutputViewComponentProps> = ({
   const initialFilter = output?.options?.filter;
 
   return (
-    <div className="flex flex-1 flex-col">
+    <div className="flex h-full flex-1 flex-col">
       <JsonEditor
         data={{ json: jsonData }}
         readOnly={true}
diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css
index ff84f4c24..bd7cca193 100644
--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@@ -395,6 +395,11 @@ input[type="search"]::-webkit-search-cancel-button {
   height: 38px !important;
 }
 
+.cm-selectionLayer {
+  z-index: 1 !important;
+  pointer-events: none !important;
+}
+
 .cm-button:hover {
   background-color: hsl(var(--border)) !important;
 }
diff --git a/src/frontend/src/style/index.css b/src/frontend/src/style/index.css
index 9f5af828a..9de41c570 100644
--- a/src/frontend/src/style/index.css
+++ b/src/frontend/src/style/index.css
@@ -53,8 +53,8 @@
     --jse-main-border: hsl(240, 6%, 90%);
     --jse-background-color: hsl(240, 5%, 96%);
     --jse-text-color: hsl(0, 0%, 0%);
-    --jse-selection-background-color: hsl(240, 5%, 96%);
-    --jse-selection-background-inactive-color: hsl(240, 6%, 90%);
+    --jse-selection-background-color: hsl(240, 4%, 46%, 0.2);
+    --jse-selection-background-inactive-color: hsl(240, 4%, 46%, 0.15);
     --jse-hover-background-color: hsl(240, 5%, 96%);
     --jse-active-line-background-color: hsl(240, 5%, 96%);
     --jse-search-match-background-color: hsl(240, 5%, 96%);
@@ -241,8 +241,8 @@
     --jse-main-border: hsl(240, 5%, 26%);
     --jse-background-color: hsl(240, 4%, 16%);
     --jse-text-color: hsl(0, 0%, 100%);
-    --jse-selection-background-color: hsl(240, 4%, 16%);
-    --jse-selection-background-inactive-color: hsl(240, 5%, 26%);
+    --jse-selection-background-color: hsl(240, 5%, 65%, 0.2);
+    --jse-selection-background-inactive-color: hsl(240, 5%, 65%, 0.15);
     --jse-hover-background-color: hsl(240, 4%, 16%);
     --jse-active-line-background-color: hsl(240, 4%, 16%);
     --jse-search-match-background-color: hsl(240, 4%, 16%);