Merge pull request #14930 from strapi/fix/relation-multiple-wrap

CM: Fix RelationMultiple text wrapping

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 = (
-    <>
-      <Badge>{value.count}</Badge>{' '}
+    <Flex gap={1} wrap="nowrap">
+      <Badge>{value.count}</Badge>
       {formatMessage(
         {
           id: 'content-manager.containers.ListPage.items',
@@ -47,7 +48,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
         },
         { number: value.count }
       )}
-    </>
+    </Flex>
   );
 
   const notify = () => {

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"
         >
           <div
-            class="c0 c6 c7"
+            class="c0 c6"
+            wrap="nowrap"
           >
-            <span
-              class="c4 c8"
+            <div
+              class="c0 c7 c8"
             >
-              1
-            </span>
+              <span
+                class="c4 c9"
+              >
+                1
+              </span>
+            </div>
+            item
           </div>
-           
-          item
         </span>
         <div
           aria-hidden="true"
-          class="c0 c9"
+          class="c0 c10"
         >
           <span
-            class="c10"
+            class="c11"
           >
             <svg
               aria-hidden="true"
@@ -269,7 +291,7 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
     </div>
   </div>
   <div
-    class="c11"
+    class="c12"
   >
     <p
       aria-live="polite"