Merge branch 'develop' into langleyd/fix_room_sumary_style

playwright/e2e/right-panel/right-panel.spec.ts

@@ -77,10 +77,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();
         });

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

src/components/structures/RightPanel.tsx

@@ -280,7 +280,7 @@ export default class RightPanel extends React.Component<Props, IState> {
         }
 
         return (
-            <aside className="mx_RightPanel" id="mx_RightPanel">
+            <aside className="mx_RightPanel" id="mx_RightPanel" data-testid="right-panel">
                 {card}
             </aside>
         );