fix(TMC-26238): Fix JSON object viewer style on safari with word-break (

#5209)

.changeset/quick-bugs-exercise.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-components': patch
+---
+
+TMC-26238 - Fix JSON object viewer style on safari with word-break

packages/components/src/ObjectViewer/JSONLike/JSONLike.module.scss

@@ -1,4 +1,3 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 
 @mixin chevron($color) {
@@ -80,6 +79,7 @@
 				max-width: 100%;
 				display: flex;
 				align-items: center;
+				flex: 1;
 
 				&:focus {
 					.value {
@@ -99,18 +99,18 @@
 		.complex-item {
 			flex: 1 1 auto;
 			border-left: solid 1px tokens.$coral-color-neutral-border-weak;
-			margin-left: $padding-smaller;
+			margin-left: tokens.$coral-spacing-xxs;
 			max-width: 100%;
 		}
 
 		.key {
-			padding-left: $padding-smaller;
+			padding-left: tokens.$coral-spacing-xxs;
 			color: tokens.$coral-color-neutral-text-weak;
 		}
 
 		.value {
 			color: tokens.$coral-color-accent-text-strong;
-			margin-left: $padding-smaller;
+			margin-left: tokens.$coral-spacing-xxs;
 			white-space: nowrap;
 			text-overflow: ellipsis;
 
@@ -130,18 +130,18 @@
 			color: tokens.$coral-color-neutral-text-weak;
 			opacity: 0.75;
 			display: inline;
-			margin-right: $padding-normal;
-			margin-left: $padding-smaller;
+			margin-right: tokens.$coral-spacing-xs;
+			margin-left: tokens.$coral-spacing-xxs;
 			vertical-align: text-bottom;
 		}
 
 		.badge {
 			top: -0.0625rem;
-			margin-left: $padding-small;
+			margin-left: tokens.$coral-spacing-xs;
 			background-color: tokens.$coral-color-accent-background;
 			color: tokens.$coral-color-accent-text;
 			font-size: 0.625rem;
-			padding: calc(#{$padding-smaller} / 2) $padding-smaller;
+			padding: calc(tokens.$coral-spacing-xxs / 2) tokens.$coral-spacing-xxs;
 			display: inline-table;
 		}
 	}

packages/components/src/ObjectViewer/List/List.module.scss

@@ -1,11 +1,10 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 
 // List styles
 .container {
 	> li {
-		padding-top: $padding-smaller;
-		padding-bottom: $padding-smaller;
+		padding-top: tokens.$coral-spacing-xxs;
+		padding-bottom: tokens.$coral-spacing-xxs;
 		border-bottom: 1px solid tokens.$coral-color-neutral-border;
 	}
 }

packages/components/src/ObjectViewer/Table/Table.module.scss

@@ -1,49 +1,35 @@
 /* stylelint-disable scss/selector-no-redundant-nesting-selector */
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
 @use '~@talend/design-tokens/lib/tokens';
 
 .table {
-	font-size: 12px;
-
-	td {
-		line-height: 25px;
-	}
-
 	.nativevalue {
-		font-family: $font-family-monospace;
-		font-size: $font-size-small;
+		font: tokens.$coral-data-m;
 		color: tokens.$coral-color-neutral-text;
 		padding: 0;
 	}
 
-	&:global(.table-hover) > tbody > tr:hover {
-		font-weight: initial;
-	}
-
 	&:global(.table) > thead > tr {
 		background-color: tokens.$coral-color-accent-background-strong;
 		color: tokens.$coral-color-accent-text-weak;
-		font-family: 'Source Sans Pro';
 
 		& > th {
-			font-weight: $font-weight-bold;
+			font: tokens.$coral-heading-s;
 		}
 
 		& > td {
-			padding: $padding-smaller;
+			padding: tokens.$coral-spacing-xxs;
 		}
 	}
 
 	&:global(.table) > tbody > tr > td {
-		padding: $padding-smaller;
+		padding: tokens.$coral-spacing-xxs;
 
 		:global(.btn) {
 			text-transform: none;
 		}
 	}
 
 	:global(.btn-link) {
-		font-family: 'Inconsolata';
 		font-size: 12px;
 		color: tokens.$coral-color-neutral-text-weak;
 		padding: 0;