diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js
index 0dcf472c80..c0c57e64be 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/index.js
@@ -5,6 +5,7 @@ import { useIntl } from 'react-intl';
import { Typography } from '@strapi/design-system/Typography';
import { Box } from '@strapi/design-system/Box';
import { Badge } from '@strapi/design-system/Badge';
+import { Flex } from '@strapi/design-system/Flex';
import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
import { Loader } from '@strapi/design-system/Loader';
import styled from 'styled-components';
@@ -38,8 +39,8 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
const [isOpen, setIsOpen] = useState(false);
const Label = (
- <>
- {value.count}{' '}
+
+ {value.count}
{formatMessage(
{
id: 'content-manager.containers.ListPage.items',
@@ -47,7 +48,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
},
{ number: value.count }
)}
- >
+
);
const notify = () => {
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap
index 7bfbf3a1b7..ec6536a4c6 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/RelationMultiple/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the snapshot 1`] = `
-.c11 {
+.c12 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@@ -13,18 +13,36 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
width: 1px;
}
-.c6 {
+.c7 {
background: #f6f6f9;
padding: 4px;
border-radius: 4px;
min-width: 20px;
}
-.c9 {
+.c10 {
padding-left: 8px;
}
-.c7 {
+.c6 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: nowrap;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ gap: 4px;
+}
+
+.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -50,7 +68,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
color: #32324d;
}
-.c8 {
+.c9 {
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
@@ -191,7 +209,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
fill: #8e8ea9;
}
-.c10 {
+.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@@ -202,7 +220,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
align-items: center;
}
-.c10 svg {
+.c11 svg {
height: 4px;
width: 6px;
}
@@ -230,23 +248,27 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
class="c4 c5"
>
-
- 1
-
+
+ 1
+
+
+ item
-
- item