Add space to the bottom of the room summary actions below leave room (#29270)

* Add space to the bottom of the room summary actions below leave room

* 8x not 6x

* Spacing needs to be within the scoll content, add it to the bottom of the leave action

* Update RoomSummaryCard-test.tsx.snap

* Fix snapshot and add screenshot test

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

@@ -67,6 +67,15 @@ test.describe("RightPanel", () => {
             },
         );
 
+        test("should have padding under leave room", { tag: "@screenshot" }, async ({ page, app }) => {
+            await viewRoomSummaryByName(page, app, ROOM_NAME);
+
+            const leaveButton = await page.getByRole("menuitem", { name: "Leave Room" });
+            await leaveButton.scrollIntoViewIfNeeded();
+
+            await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-leave-room.png");
+        });
+
         test("should handle clicking add widgets", async ({ page, app }) => {
             await viewRoomSummaryByName(page, app, ROOM_NAME);
 

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -100,3 +100,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_RoomSummaryCard_roomName {
     margin: $spacing-12 0 $spacing-4;
 }
+
+.mx_RoomSummaryCard_leave {
+    margin: 0 0 var(--cpd-space-8x);
+}

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -441,6 +441,7 @@ const RoomSummaryCard: React.FC<IProps> = ({
                 <Separator />
 
                 <MenuItem
+                    className="mx_RoomSummaryCard_leave"
                     Icon={LeaveIcon}
                     kind="critical"
                     label={_t("action|leave_room")}

test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -610,7 +610,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
           role="separator"
         />
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="mx_RoomSummaryCard_leave _item_1x5l4_8 _interactive_1x5l4_26"
           data-kind="critical"
           role="menuitem"
         >
@@ -1228,7 +1228,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="mx_RoomSummaryCard_leave _item_1x5l4_8 _interactive_1x5l4_26"
           data-kind="critical"
           role="menuitem"
         >
@@ -1883,7 +1883,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
           role="separator"
         />
         <button
-          class="_item_1x5l4_8 _interactive_1x5l4_26"
+          class="mx_RoomSummaryCard_leave _item_1x5l4_8 _interactive_1x5l4_26"
           data-kind="critical"
           role="menuitem"
         >