From 897684f995b60cfb6b225a864f340a7219d422bb Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Fri, 11 Apr 2025 18:25:29 +0200
Subject: [PATCH] JSON Visualizer: ensure labels are 24px tall as all other
 elements (#11535)

## Before

![CleanShot 2025-04-11 at 14 42
15@2x](https://github.com/user-attachments/assets/a4726342-212a-40b3-829f-40cae7724fec)

## After

![CleanShot 2025-04-11 at 14 42
27@2x](https://github.com/user-attachments/assets/e84a4d81-fdcc-422e-b294-55867a4bc5fb)
---
 .../src/json-visualizer/components/JsonNestedNode.tsx         | 3 ++-
 .../src/json-visualizer/components/internal/JsonNodeValue.tsx | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx b/packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx
index 7b6fbc814..6af495070 100644
--- a/packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx
+++ b/packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx
@@ -4,6 +4,7 @@ import { IconComponent } from '@ui/display';
 import { JsonArrow } from '@ui/json-visualizer/components/internal/JsonArrow';
 import { JsonList } from '@ui/json-visualizer/components/internal/JsonList';
 import { JsonNodeLabel } from '@ui/json-visualizer/components/internal/JsonNodeLabel';
+import { JsonNodeValue } from '@ui/json-visualizer/components/internal/JsonNodeValue';
 import { JsonNode } from '@ui/json-visualizer/components/JsonNode';
 import { useJsonTreeContextOrThrow } from '@ui/json-visualizer/hooks/useJsonTreeContextOrThrow';
 import { JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighlighting';
@@ -82,7 +83,7 @@ export const JsonNestedNode = ({
       depth={depth}
     >
       {elements.length === 0 ? (
-        <StyledEmptyState>{emptyElementsText}</StyledEmptyState>
+        <JsonNodeValue valueAsString={emptyElementsText} />
       ) : (
         elements.map(({ id, label, value }) => {
           const nextKeyPath = isNonEmptyString(keyPath)
diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx
index 9a8a82829..f3f0f06df 100644
--- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx
+++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx
@@ -5,12 +5,16 @@ import { JsonNodeHighlighting } from '@ui/json-visualizer/types/JsonNodeHighligh
 const StyledText = styled.span<{
   highlighting: JsonNodeHighlighting | undefined;
 }>`
+  align-items: center;
+  box-sizing: border-box;
   color: ${({ theme, highlighting }) =>
     highlighting === 'blue'
       ? theme.adaptiveColors.blue4
       : highlighting === 'red'
         ? theme.adaptiveColors.red4
         : theme.font.color.tertiary};
+  display: inline-flex;
+  height: 24px;
 `;
 
 export const JsonNodeValue = ({