Fix extensions panel style (element-hq#29273)

* Stop empty state scrolling

* Fix separator inset, separator vertical spacing and margin above the add extensions button

* Add screenshot for add extensions button spacing

* Add variable for add extensions overlap

* use data-testid

* Fix snapshots

Author: david-langley

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

playwright/snapshots/right-panel/right-panel.spec.ts/with-extensions-linux.png

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

res/css/views/right_panel/_ExtensionsCard.pcss

@@ -282,7 +282,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>
         );

src/components/structures/RightPanel.tsx

@@ -2121,6 +2121,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
       >
         <aside
           class="mx_RightPanel"
+          data-testid="right-panel"
           id="mx_RightPanel"
         >
           <div

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -4,6 +4,7 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
 <DocumentFragment>
   <aside
     class="mx_RightPanel"
+    data-testid="right-panel"
     id="mx_RightPanel"
   >
     <div