diff --git a/e2e/test/scenarios/admin/datamodel/datamodel.cy.spec.js b/e2e/test/scenarios/admin/datamodel/datamodel.cy.spec.js
index 57e232cc2ea6842bc3d492d042c63c78895891f5..aa99c116ee67d0b5a43c996ff43af7feed1f2a9e 100644
--- a/e2e/test/scenarios/admin/datamodel/datamodel.cy.spec.js
+++ b/e2e/test/scenarios/admin/datamodel/datamodel.cy.spec.js
@@ -817,7 +817,9 @@ describe("scenarios > admin > datamodel > segments", () => {
       cy.wait(["@metadata", "@metadata", "@metadata"]);
 
       cy.get("@emptyStateMessage").should("not.exist");
-      cy.findByRole("heading", { name: "Foo" }).should("be.visible");
+      cy.findByTestId("data-reference-list-item")
+        .findByText("Foo")
+        .should("be.visible");
     });
 
     it("should update that segment", () => {
diff --git a/frontend/src/metabase/components/List/List.module.css b/frontend/src/metabase/components/List/List.module.css
index 14cf392ef27be30e846bc5620b1b39d3d7530ab0..619482bd386dea6fa694cc2071660822f56ac3d6 100644
--- a/frontend/src/metabase/components/List/List.module.css
+++ b/frontend/src/metabase/components/List/List.module.css
@@ -49,17 +49,22 @@
   position: relative;
   align-items: center;
   display: flex;
+  gap: var(--padding-1);
 }
 
 .itemBody {
-  max-width: 100%;
-  flex: 1 0 auto;
+  display: flex 1 1 auto;
+  overflow: hidden;
 }
 
 .itemTitle {
   composes: textBold from "style";
   max-width: 100%;
-  overflow: hidden;
+  font-size: 1rem;
+
+  &:hover {
+    color: var(--mb-color-brand);
+  }
 }
 
 .itemSubtitle {
@@ -69,7 +74,6 @@
 }
 
 .leftIcons {
-  composes: mr2 from "style";
   align-self: flex-start;
   flex-shrink: 0;
   flex-direction: row;
diff --git a/frontend/src/metabase/components/ListItem/ListItem.jsx b/frontend/src/metabase/components/ListItem/ListItem.jsx
index 173299a0b58b3a675ccd7f5acd3cc04e697542a7..b9e7f11d8b0447025840989b73931c0e6bd5a632 100644
--- a/frontend/src/metabase/components/ListItem/ListItem.jsx
+++ b/frontend/src/metabase/components/ListItem/ListItem.jsx
@@ -5,10 +5,11 @@ import { memo } from "react";
 
 import Card from "metabase/components/Card";
 import S from "metabase/components/List/List.module.css";
+import { Ellipsified } from "metabase/core/components/Ellipsified";
 import CS from "metabase/css/core/index.css";
 import { Icon } from "metabase/ui";
 
-import { ListItemLink, ListItemName, Root } from "./ListItem.styled";
+import { ListItemLink, Root } from "./ListItem.styled";
 
 const ListItem = ({
   "data-testid": dataTestId,
@@ -23,6 +24,7 @@ const ListItem = ({
     <Card
       hoverable
       className={cx(CS.mb2, CS.p3, CS.bgWhite, CS.rounded, CS.bordered)}
+      data-testid="data-reference-list-item"
     >
       <div className={cx(S.item)}>
         <div className={S.itemIcons}>
@@ -30,9 +32,7 @@ const ListItem = ({
         </div>
         <div className={S.itemBody}>
           <div className={S.itemTitle}>
-            <ListItemName tooltip={name} tooltipMaxWidth="100%">
-              <h3>{name}</h3>
-            </ListItemName>
+            <Ellipsified tooltip={name}>{name}</Ellipsified>
           </div>
           {(description || placeholder) && (
             <div className={cx(S.itemSubtitle)}>
diff --git a/frontend/src/metabase/components/ListItem/ListItem.styled.tsx b/frontend/src/metabase/components/ListItem/ListItem.styled.tsx
index a2d1b008c92c0158945f688abe5fed53b2642d96..03c73d02ceadb341a0824f71275784d878b100ab 100644
--- a/frontend/src/metabase/components/ListItem/ListItem.styled.tsx
+++ b/frontend/src/metabase/components/ListItem/ListItem.styled.tsx
@@ -1,9 +1,6 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Link } from "react-router";
-
-import { Ellipsified } from "metabase/core/components/Ellipsified";
-
 interface Props {
   disabled?: boolean;
 }
@@ -24,12 +21,3 @@ export const ListItemLink = styled(Link)`
     color: var(--mb-color-brand);
   }
 `;
-
-export const ListItemName = styled(Ellipsified)`
-  max-width: 100%;
-  overflow: hidden;
-
-  &:hover {
-    color: var(--mb-color-brand);
-  }
-`;