diff --git a/e2e/test/scenarios/actions/reproductions/31587-bottom-corner-radius-action-buttons.cy.spec.js b/e2e/test/scenarios/actions/reproductions/31587-bottom-corner-radius-action-buttons.cy.spec.js new file mode 100644 index 0000000000000000000000000000000000000000..609405942faf67c311b80b51de58f9eea4c324ba --- /dev/null +++ b/e2e/test/scenarios/actions/reproductions/31587-bottom-corner-radius-action-buttons.cy.spec.js @@ -0,0 +1,70 @@ +import { + editDashboard, + restore, + saveDashboard, + setActionsEnabledForDB, + visitDashboard, +} from "e2e/support/helpers"; +import { SAMPLE_DB_ID } from "e2e/support/cypress_data"; + +const viewports = [ + [768, 800], + [1024, 800], + [1440, 800], +]; +describe("metabase#31587", () => { + viewports.forEach(([width, height]) => { + describe(`Testing on resolution ${width} x ${height}`, () => { + beforeEach(() => { + restore(); + cy.signInAsAdmin(); + setActionsEnabledForDB(SAMPLE_DB_ID); + cy.viewport(width, height); + }); + it("should not allow action buttons to overflow when editing dashboard", () => { + visitDashboard(1); + editDashboard(); + cy.button("Add action").click(); + + cy.findByTestId("dashboard-parameters-and-cards").within(() => { + const actionButtonContainer = cy.findByTestId( + "action-button-full-container", + ); + const dashCard = cy.contains(".DashCard", "Click Me"); + + actionButtonContainer.then(actionButtonElem => { + dashCard.then(dashCardElem => { + expect(actionButtonElem[0].scrollHeight).to.eq( + dashCardElem[0].scrollHeight, + ); + }); + }); + }); + }); + + it("should not allow action buttons to overflow when viewing info sidebar", () => { + visitDashboard(1); + editDashboard(); + cy.findByLabelText("Add action").click(); + + saveDashboard(); + cy.icon("info").click(); + + cy.findByTestId("dashboard-parameters-and-cards").within(() => { + const actionButtonContainer = cy.findByTestId( + "action-button-full-container", + ); + const dashCard = cy.contains(".DashCard", "Click Me"); + + actionButtonContainer.then(actionButtonElem => { + dashCard.then(dashCardElem => { + expect(actionButtonElem[0].scrollHeight).to.eq( + dashCardElem[0].scrollHeight, + ); + }); + }); + }); + }); + }); + }); +}); diff --git a/frontend/src/metabase/actions/components/ActionViz/Action.tsx b/frontend/src/metabase/actions/components/ActionViz/Action.tsx index 3cf8f06ddcfc7a942d651416668464d1f7a325f5..5f5ce47d717afd7a48c43b4d08e621d6e8cb0335 100644 --- a/frontend/src/metabase/actions/components/ActionViz/Action.tsx +++ b/frontend/src/metabase/actions/components/ActionViz/Action.tsx @@ -145,7 +145,7 @@ function ActionFn(props: ActionProps) { return ( <Tooltip tooltip={tooltip}> - <FullContainer> + <FullContainer data-testid="action-button-full-container"> <ActionButtonView disabled icon="bolt" diff --git a/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx b/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx index 98a7006dcc6434954de9763d1bb901cbc1849332..1dfc29d15efc076ea25b08570705550ac65b0bae 100644 --- a/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx +++ b/frontend/src/metabase/actions/components/ActionViz/ActionButton.styled.tsx @@ -7,7 +7,9 @@ export const StyledButton = styled(Button)<{ isFullHeight?: boolean; focus?: boolean; }>` + padding: 0; height: ${({ isFullHeight }) => (isFullHeight ? "100%" : "auto")}; + ${({ focus }) => focus ? `