cleanup data reference tooltips (#47747)

* cleanup data reference tooltips

* update test

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", () => {

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;

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)}>

frontend/src/metabase/components/ListItem/ListItem.styled.tsx

 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);
-  }
-`;