From 7a084e39f72ba53cf4f475eb5a1f59dbc5900a56 Mon Sep 17 00:00:00 2001
From: Hexrt <github@yoosec.com>
Date: Mon, 12 Sep 2022 20:55:38 +0800
Subject: [PATCH] fix: highlight red-dashed border display

---
 src/components/CustomNode/styles.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/CustomNode/styles.tsx b/src/components/CustomNode/styles.tsx
index 46093226..ab6f0610 100644
--- a/src/components/CustomNode/styles.tsx
+++ b/src/components/CustomNode/styles.tsx
@@ -31,6 +31,7 @@ export const StyledForeignObject = styled.foreignObject<{
   &.searched {
     border: 2px solid ${({ theme }) => theme.TEXT_POSITIVE};
     border-radius: 2px;
+    box-sizing: border-box;
   }
 
   .highlight {
@@ -69,7 +70,8 @@ export const StyledKey = styled.span<{
   font-size: ${({ parent }) => parent && "14px"};
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: ${({ parent }) => parent && "10px"};
+  padding: ${({ parent }) => parent && "7px"};
+  height: 18px;
 `;
 
 export const StyledRow = styled.span.attrs<{