diff --git a/playwright/e2e/right-panel/right-panel.spec.ts b/playwright/e2e/right-panel/right-panel.spec.ts index c4e7b5f066..0fbd306d86 100644 --- a/playwright/e2e/right-panel/right-panel.spec.ts +++ b/playwright/e2e/right-panel/right-panel.spec.ts @@ -81,10 +81,12 @@ test.describe("RightPanel", () => { await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-leave-room.png"); }); - test("should handle clicking add widgets", async ({ page, app }) => { + test("should handle clicking add widgets", { tag: "@screenshot" }, async ({ page, app }) => { await viewRoomSummaryByName(page, app, ROOM_NAME); await page.getByRole("menuitem", { name: "Extensions" }).click(); + await expect(page.getByTestId("right-panel")).toMatchScreenshot("with-extensions.png"); + await page.getByRole("button", { name: "Add extensions" }).click(); await expect(page.locator(".mx_IntegrationManager")).toBeVisible(); }); diff --git a/playwright/snapshots/right-panel/right-panel.spec.ts/with-extensions-linux.png b/playwright/snapshots/right-panel/right-panel.spec.ts/with-extensions-linux.png new file mode 100644 index 0000000000..8333d55b46 Binary files /dev/null and b/playwright/snapshots/right-panel/right-panel.spec.ts/with-extensions-linux.png differ diff --git a/res/css/views/right_panel/_ExtensionsCard.pcss b/res/css/views/right_panel/_ExtensionsCard.pcss index 0dbfc056cd..c98fa3e9dc 100644 --- a/res/css/views/right_panel/_ExtensionsCard.pcss +++ b/res/css/views/right_panel/_ExtensionsCard.pcss @@ -7,12 +7,11 @@ Please see LICENSE files in the repository root for full details. */ .mx_ExtensionsCard { - --cpd-separator-inset: var(--cpd-space-4x); - --cpd-separator-spacing: var(--cpd-space-4x); - + --cpd-separator-spacing: var(--cpd-space-6x); + --AddExtension-overlap: -76px; .mx_AutoHideScrollbar { padding: 0 var(--cpd-space-4x); - margin-top: var(--cpd-space-3x); + margin-top: var(--cpd-space-6x); box-sizing: border-box; /* Styling for the "Add extensions" button */ @@ -128,6 +127,11 @@ Please see LICENSE files in the repository root for full details. .mx_EmptyState::before { /* Overlap the Add extensions button */ - top: -76px; + top: var(--AddExtension-overlap); + } + + .mx_EmptyState { + /* Stop empty state scrolling */ + height: calc(100% + var(--AddExtension-overlap)); } } diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index f67ebbadb8..a040786a69 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -282,7 +282,7 @@ export default class RightPanel extends React.Component { } return ( -