From be4b784ce009e324eae7d543fe95e2649d8f6d7a Mon Sep 17 00:00:00 2001
From: Mike Shi <mike@hyperdx.io>
Date: Mon, 26 Jan 2026 18:35:52 -0800
Subject: [PATCH] fix: Make JSON line hover visible in inline panel (#1646)

Old:
<img width="727" height="437" alt="image" src="https://github.com/user-attachments/assets/bba6926f-4eaf-45d2-9ab3-65720afc03a7" />


New:
<img width="1970" height="1010" alt="image" src="https://github.com/user-attachments/assets/c1a3d413-d28d-43ef-8572-524adbe696e8" />
---
 .changeset/six-tips-carry.md                      | 5 +++++
 packages/app/src/components/HyperJson.module.scss | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/six-tips-carry.md

diff --git a/.changeset/six-tips-carry.md b/.changeset/six-tips-carry.md
new file mode 100644
index 00000000..19173072
--- /dev/null
+++ b/.changeset/six-tips-carry.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: Make JSON line hover visible in inline panel
diff --git a/packages/app/src/components/HyperJson.module.scss b/packages/app/src/components/HyperJson.module.scss
index b661d4d4..40d42a52 100644
--- a/packages/app/src/components/HyperJson.module.scss
+++ b/packages/app/src/components/HyperJson.module.scss
@@ -35,7 +35,7 @@
   overflow: hidden;
 
   &:hover {
-    background-color: var(--color-bg-muted);
+    background-color: var(--color-bg-highlighted);
 
     .lineMenu {
       display: flex;