admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

JSON Visualizer: ensure labels are 24px tall as all other elements (#11535)

Browse Source 
## 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)
This commit is contained in:
Baptiste Devessier
2025-04-11 18:25:29 +02:00
committed by GitHub
parent 162c6bcaa3
commit 897684f995
2 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-ui/src/json-visualizer/components/JsonNestedNode.tsx
View File

@ -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)

4
packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx
View File

@ -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 = ({