Fix: Link card spacing isn't quite right on the new grid (#31715)

e2e/support/helpers/e2e-dashboard-helpers.js

@@ -171,3 +171,7 @@ export function resizeDashboardCard({ card, x, y }) {
       .trigger("mouseup", { force: true });
   });
 }
+
+export function createLinkCard() {
+  cy.icon("link").click();
+}

e2e/test/scenarios/dashboard/dashboard-card-resizing.cy.spec.js

 import _ from "underscore";
 import {
+  createLinkCard,
   editDashboard,
+  getDashboardCard,
+  popover,
   resizeDashboardCard,
   restore,
   saveDashboard,
@@ -185,6 +188,15 @@ const TEST_QUESTIONS = [
   createMockMapQuestion(),
 ];
 
+const TEST_DASHBOARD_NAME = "Test Dashboard";
+const TEST_QUESTION_NAME = "Test Question";
+
+const viewports = [
+  [768, 800],
+  [1024, 800],
+  [1440, 800],
+];
+
 describe("scenarios > dashboard card resizing", () => {
   beforeEach(() => {
     restore();
@@ -277,4 +289,84 @@ describe("scenarios > dashboard card resizing", () => {
       });
     });
   });
+
+  describe("metabase#31701 - preventing link dashboard card overflows", () => {
+    viewports.forEach(([width, height]) => {
+      describe(`Testing on resolution ${width} x ${height}`, () => {
+        beforeEach(() => {
+          restore();
+          cy.signInAsAdmin();
+          cy.intercept("GET", "/api/search*").as("search");
+          cy.viewport(width, height);
+        });
+
+        it("should not allow links to overflow when editing dashboard", () => {
+          createLinkDashboard();
+          const entityCard = getDashboardCard(0);
+          const customCard = getDashboardCard(1);
+
+          const editLinkContainer = cy.findByTestId("entity-edit-display-link");
+          const linkContainer = cy.findByTestId("custom-edit-text-link");
+
+          assertLinkCardOverflow(editLinkContainer, entityCard);
+          assertLinkCardOverflow(linkContainer, customCard);
+        });
+
+        it("should not allow links to overflow when viewing saved dashboard", () => {
+          createLinkDashboard();
+          saveDashboard();
+          const entityCard = getDashboardCard(0);
+          const customCard = getDashboardCard(1);
+
+          const editLinkContainer = cy.findByTestId("entity-view-display-link");
+          const linkContainer = cy.findByTestId("custom-view-text-link");
+
+          assertLinkCardOverflow(editLinkContainer, entityCard);
+          assertLinkCardOverflow(linkContainer, customCard);
+        });
+      });
+    });
+  });
 });
+
+const createLinkDashboard = () => {
+  cy.createQuestion({
+    name: TEST_QUESTION_NAME,
+    query: {
+      "source-table": ORDERS_ID,
+    },
+  });
+
+  cy.createDashboard({
+    name: TEST_DASHBOARD_NAME,
+  }).then(({ body: { id: dashId } }) => {
+    visitDashboard(dashId);
+  });
+
+  editDashboard();
+  createLinkCard();
+  createLinkCard();
+
+  const entityCard = getDashboardCard(0);
+  const customCard = getDashboardCard(1);
+
+  entityCard.click().type(TEST_QUESTION_NAME);
+  popover().within(() => {
+    cy.findAllByTestId("search-result-item-name").first().trigger("click");
+  });
+  customCard.click().type(TEST_QUESTION_NAME);
+
+  closeLinkSearchDropdown();
+};
+
+const assertLinkCardOverflow = (card1, card2) => {
+  card1.then(linkElem => {
+    card2.then(dashCardElem => {
+      expect(linkElem[0].scrollHeight).to.eq(dashCardElem[0].scrollHeight);
+    });
+  });
+};
+
+const closeLinkSearchDropdown = () => {
+  cy.findByTestId("dashboard-parameters-and-cards").click(0, 0);
+};

frontend/src/metabase/visualizations/visualizations/LinkViz/EntityDisplay.styled.tsx

 import styled from "@emotion/styled";
+import Ellipsified from "metabase/core/components/Ellipsified";
 
 export const EntityDisplayContainer = styled.div`
   width: 100%;
@@ -13,5 +14,9 @@ export const LeftContainer = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.5rem;
+`;
+
+export const EllipsifiedEntityContainer = styled(Ellipsified)`
+  flex: 1;
 `;

frontend/src/metabase/visualizations/visualizations/LinkViz/EntityDisplay.tsx

 import { t } from "ttag";
 
-import Ellipsified from "metabase/core/components/Ellipsified";
 import { Icon } from "metabase/core/components/Icon";
 import { color } from "metabase/lib/colors";
 import { isEmpty } from "metabase/lib/validate";
 
-import { EntityDisplayContainer, LeftContainer } from "./EntityDisplay.styled";
+import {
+  EllipsifiedEntityContainer,
+  EntityDisplayContainer,
+  LeftContainer,
+} from "./EntityDisplay.styled";
 import { WrappedUnrestrictedLinkEntity } from "./types";
 
 export const EntityDisplay = ({
@@ -19,7 +22,7 @@ export const EntityDisplay = ({
     <EntityDisplayContainer>
       <LeftContainer>
         <Icon color={color("brand")} name={getSearchIconName(entity)} />
-        <Ellipsified>{entity?.name}</Ellipsified>
+        <EllipsifiedEntityContainer>{entity?.name}</EllipsifiedEntityContainer>
       </LeftContainer>
       {showDescription && entity?.description && (
         <Icon
@@ -36,7 +39,7 @@ export const RestrictedEntityDisplay = () => (
   <EntityDisplayContainer>
     <LeftContainer>
       <Icon name="key" color={color("text-light")} />
-      <Ellipsified>{t`Sorry, you don't have permission to see this link.`}</Ellipsified>
+      <EllipsifiedEntityContainer>{t`Sorry, you don't have permission to see this link.`}</EllipsifiedEntityContainer>
     </LeftContainer>
   </EntityDisplayContainer>
 );
@@ -49,7 +52,9 @@ export const UrlLinkDisplay = ({ url }: { url?: string }) => {
     <EntityDisplayContainer>
       <LeftContainer>
         <Icon color={color("brand")} name={urlIcon} />
-        <Ellipsified>{!isEmpty(url) ? url : t`Choose a link`}</Ellipsified>
+        <EllipsifiedEntityContainer>
+          {!isEmpty(url) ? url : t`Choose a link`}
+        </EllipsifiedEntityContainer>
       </LeftContainer>
     </EntityDisplayContainer>
   );

frontend/src/metabase/visualizations/visualizations/LinkViz/LinkViz.styled.tsx

@@ -5,7 +5,7 @@ import { Icon } from "metabase/core/components/Icon";
 import RecentsList from "metabase/nav/components/RecentsList";
 
 export const DisplayLinkCardWrapper = styled.div`
-  padding: 0.5rem;
+  padding: 0 0.5rem;
   display: flex;
   width: 100%;
   height: 100%;
@@ -14,7 +14,7 @@ export const DisplayLinkCardWrapper = styled.div`
 `;
 
 export const EditLinkCardWrapper = styled.div`
-  padding: 0.5rem 1rem;
+  padding: 0 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -25,9 +25,8 @@ export const EditLinkCardWrapper = styled.div`
 
 export const CardLink = styled(Link)`
   width: 100%;
-  padding: 0.5rem;
+  padding: 0 0.5rem;
   display: flex;
-  width: 100%;
   height: 100%;
   min-width: 0;
   gap: 0.5rem;

frontend/src/metabase/visualizations/visualizations/LinkViz/LinkViz.tsx

@@ -114,7 +114,7 @@ function LinkViz({
 
     if (isEditing) {
       return (
-        <EditLinkCardWrapper>
+        <EditLinkCardWrapper data-testid="entity-edit-display-link">
           <EntityDisplay entity={wrappedEntity} showDescription={false} />
         </EditLinkCardWrapper>
       );
@@ -125,6 +125,7 @@ function LinkViz({
     return (
       <DisplayLinkCardWrapper>
         <CardLink
+          data-testid="entity-view-display-link"
           to={wrappedEntity.getUrl()}
           target={target}
           rel="noreferrer"
@@ -138,7 +139,7 @@ function LinkViz({
 
   if (isEditing) {
     return (
-      <EditLinkCardWrapper>
+      <EditLinkCardWrapper data-testid="custom-edit-text-link">
         <TippyPopover
           visible={inputIsFocused && !isUrlString(url)}
           content={
@@ -173,7 +174,7 @@ function LinkViz({
   }
 
   return (
-    <DisplayLinkCardWrapper>
+    <DisplayLinkCardWrapper data-testid="custom-view-text-link">
       <CardLink to={url ?? ""} target="_blank" rel="noreferrer">
         <UrlLinkDisplay url={url} />
       </CardLink>