Fix table pagination when there are cells with images (#22147)

frontend/src/metabase/visualizations/components/Table.css

@@ -16,7 +16,8 @@
 
 :local(.Table) th,
 :local(.Table) td {
-  padding: 0.72em;
+  height: 2.1875rem;
+  padding: 0 0.75rem;
   border-bottom: 1px solid color-mod(var(--color-border) alpha(-70%));
 }
 

frontend/test/metabase/scenarios/dashboard/dashboard_data_permissions.cy.spec.js

@@ -21,7 +21,7 @@ function filterDashboard(suggests = true) {
   }
   cy.contains("Add filter").click({ force: true });
   cy.contains("Aerodynamic Bronze Hat");
-  cy.contains(/Rows \d-\d of 96/);
+  cy.contains(/Rows \d-\d+ of 96/);
 }
 
 describe("support > permissions (metabase#8472)", () => {

frontend/test/metabase/scenarios/visualizations/reproductions/18996-table-image-pagination.cy.spec.js

+import { restore, visitDashboard } from "__support__/e2e/cypress";
+
+const questionDetails = {
+  name: "18996",
+  native: {
+    query: `
+select 1 "ID", 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/TEST.jpg/320px-TEST.jpg' "IMAGE", 123 "PRICE"
+union all select 2, 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/TEST.jpg/320px-TEST.jpg', 123
+union all select 3, 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/TEST.jpg/320px-TEST.jpg', 123
+union all select 4, 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/TEST.jpg/320px-TEST.jpg', 123
+union all select 5, null, 123
+union all select 6, '', 123
+union all select 7, 'non-exisiting', 123
+union all select 8, null, 123
+union all select 9, 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/TEST.jpg/320px-TEST.jpg', 123
+union all select 10, 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/TEST.jpg/320px-TEST.jpg', 123
+`,
+  },
+  display: "table",
+  visualization_settings: {
+    "table.cell_column": "ID",
+    "table.pivot_column": "PRICE",
+    column_settings: {
+      '["name","IMAGE"]': {
+        view_as: "image",
+      },
+    },
+  },
+};
+
+describe("issue 18996", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+  });
+
+  it("should navigate between pages in a table with images in a dashboard (metabase#18996)", () => {
+    cy.createNativeQuestionAndDashboard({
+      questionDetails,
+    }).then(({ body: { dashboard_id } }) => {
+      visitDashboard(dashboard_id);
+    });
+
+    cy.findByText(/Rows \d+-\d+ of 10/).should("be.visible");
+    cy.icon("triangle_right").click();
+    cy.findByText(/Rows \d+-\d+ of 10/).should("be.visible");
+  });
+});