diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
index 7b1b5a7a6d..7baec1ad2f 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/RelationInput.js
@@ -24,18 +24,13 @@ import { RELATION_ITEM_HEIGHT } from './constants';
 import { usePrev } from '../../hooks';
 
 const LinkEllipsis = styled(Link)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inherit;
-`;
+  display: block;
 
-const BoxEllipsis = styled(Box)`
   > span {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: inherit;
+    display: block;
   }
 `;
 
@@ -322,7 +317,7 @@ const RelationInput = ({
                   }
                   style={style}
                 >
-                  <BoxEllipsis minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
+                  <Box minWidth={0} paddingTop={1} paddingBottom={1} paddingRight={4}>
                     <Tooltip description={mainField ?? `${id}`}>
                       {href ? (
                         <LinkEllipsis to={href} disabled={disabled}>
@@ -334,7 +329,7 @@ const RelationInput = ({
                         </Typography>
                       )}
                     </Tooltip>
-                  </BoxEllipsis>
+                  </Box>
 
                   {publicationState && (
                     <Status variant={statusColor} showBullet={false} size="S">
diff --git a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
index 085a24a6bf..604817cee5 100644
--- a/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
+++ b/packages/core/admin/admin/src/content-manager/components/RelationInput/tests/__snapshots__/RelationInput.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Content-Manager || RelationInput should render and match snapshot 1`] = `
-.c36 {
+.c35 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -49,7 +49,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   min-width: 0px;
 }
 
-.c23 {
+.c22 {
   background: #eaf5ff;
   padding-top: 4px;
   padding-right: 8px;
@@ -60,16 +60,16 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   border: 1px solid #b8e1ff;
 }
 
-.c26 {
+.c25 {
   padding-left: 16px;
 }
 
-.c28 {
+.c27 {
   color: #666687;
   width: 12px;
 }
 
-.c31 {
+.c30 {
   background: #eafbe7;
   padding-top: 4px;
   padding-right: 8px;
@@ -80,7 +80,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   border: 1px solid #c6f0c2;
 }
 
-.c34 {
+.c33 {
   padding-top: 8px;
 }
 
@@ -165,20 +165,20 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   color: #4945ff;
 }
 
-.c22 {
+.c21 {
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c25 {
+.c24 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #006096;
 }
 
-.c30 {
+.c29 {
   font-size: 0.875rem;
   line-height: 1.43;
   display: block;
@@ -188,14 +188,14 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   color: #4945ff;
 }
 
-.c33 {
+.c32 {
   font-size: 0.875rem;
   line-height: 1.43;
   font-weight: 600;
   color: #2f6846;
 }
 
-.c35 {
+.c34 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #666687;
@@ -210,7 +210,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   margin-top: 4px;
 }
 
-.c29 path {
+.c28 path {
   fill: #666687;
 }
 
@@ -300,15 +300,15 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   width: 0.5625rem;
 }
 
-.c24 .c5 {
+.c23 .c5 {
   color: #0c75af;
 }
 
-.c32 .c5 {
+.c31 .c5 {
   color: #328048;
 }
 
-.c20 {
+.c19 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -324,31 +324,31 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   outline: none;
 }
 
-.c20 svg path {
+.c19 svg path {
   -webkit-transition: fill 150ms ease-out;
   transition: fill 150ms ease-out;
   fill: currentColor;
 }
 
-.c20 svg {
+.c19 svg {
   font-size: 0.625rem;
 }
 
-.c20 .c5 {
+.c19 .c5 {
   -webkit-transition: color 150ms ease-out;
   transition: color 150ms ease-out;
   color: currentColor;
 }
 
-.c20:hover {
+.c19:hover {
   color: #7b79ff;
 }
 
-.c20:active {
+.c19:active {
   color: #271fe0;
 }
 
-.c20:after {
+.c19:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -363,11 +363,11 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   border: 2px solid transparent;
 }
 
-.c20:focus-visible {
+.c19:focus-visible {
   outline: none;
 }
 
-.c20:focus-visible:after {
+.c19:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -407,26 +407,23 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
   bottom: 0;
 }
 
-.c21 {
+.c20 {
+  display: block;
+}
+
+.c20 > span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  display: inherit;
+  display: block;
 }
 
-.c19 > span {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inherit;
-}
-
-.c27 svg path {
+.c26 svg path {
   fill: #8e8ea9;
 }
 
-.c27:hover svg path,
-.c27:focus svg path {
+.c26:hover svg path,
+.c26:focus svg path {
   fill: #666687;
 }
 
@@ -585,18 +582,18 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c16 c17"
                 >
                   <div
-                    class="c18 c19"
+                    class="c18"
                   >
                     <span>
                       <a
                         aria-current="page"
                         aria-describedby="tooltip-1"
-                        class="c20 c21 active"
+                        class="c19 c20 active"
                         href="/"
                         tabindex="0"
                       >
                         <span
-                          class="c5 c22"
+                          class="c5 c21"
                         >
                           Relation 1
                         </span>
@@ -604,26 +601,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                     </span>
                   </div>
                   <div
-                    class="c23 c24"
+                    class="c22 c23"
                   >
                     <span
-                      class="c5 c25"
+                      class="c5 c24"
                     >
                       Draft
                     </span>
                   </div>
                 </div>
                 <div
-                  class="c26"
+                  class="c25"
                 >
                   <button
                     aria-label="Remove"
-                    class="c27"
+                    class="c26"
                     data-testid="remove-relation-1"
                     type="button"
                   >
                     <svg
-                      class="c28 c29"
+                      class="c27 c28"
                       fill="none"
                       height="1em"
                       viewBox="0 0 24 24"
@@ -650,12 +647,12 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c16 c17"
                 >
                   <div
-                    class="c18 c19"
+                    class="c18"
                   >
                     <span>
                       <span
                         aria-describedby="tooltip-3"
-                        class="c5 c30"
+                        class="c5 c29"
                         tabindex="0"
                       >
                         Relation 2
@@ -663,26 +660,26 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                     </span>
                   </div>
                   <div
-                    class="c31 c32"
+                    class="c30 c31"
                   >
                     <span
-                      class="c5 c33"
+                      class="c5 c32"
                     >
                       Published
                     </span>
                   </div>
                 </div>
                 <div
-                  class="c26"
+                  class="c25"
                 >
                   <button
                     aria-label="Remove"
-                    class="c27"
+                    class="c26"
                     data-testid="remove-relation-2"
                     type="button"
                   >
                     <svg
-                      class="c28 c29"
+                      class="c27 c28"
                       fill="none"
                       height="1em"
                       viewBox="0 0 24 24"
@@ -709,12 +706,12 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   class="c16 c17"
                 >
                   <div
-                    class="c18 c19"
+                    class="c18"
                   >
                     <span>
                       <span
                         aria-describedby="tooltip-5"
-                        class="c5 c30"
+                        class="c5 c29"
                         tabindex="0"
                       >
                         Relation 3
@@ -723,16 +720,16 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
                   </div>
                 </div>
                 <div
-                  class="c26"
+                  class="c25"
                 >
                   <button
                     aria-label="Remove"
-                    class="c27"
+                    class="c26"
                     data-testid="remove-relation-3"
                     type="button"
                   >
                     <svg
-                      class="c28 c29"
+                      class="c27 c28"
                       fill="none"
                       height="1em"
                       viewBox="0 0 24 24"
@@ -753,10 +750,10 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
       </div>
     </div>
     <div
-      class="c34"
+      class="c33"
     >
       <p
-        class="c5 c35"
+        class="c5 c34"
         id="1-hint"
       >
         this is a description
@@ -764,7 +761,7 @@ exports[`Content-Manager || RelationInput should render and match snapshot 1`] =
     </div>
   </div>
   <div
-    class="c36"
+    class="c35"
   >
     <p
       aria-live="polite"