Make the text copy button use IconButton (#34224)

* Make the text copy button use IconButton

This obviously should be a shared component, but design is looking at
what it will actually look like long term, so until then, let's at
least make it use compound's IconButton so it gets the hover background
state, and sort out the padding & margins.

Requires https://github.com/element-hq/compound-web/pull/528

* snapshots & add aria-label

* more snapshots

* Remove unnecessary width & height

update other screenshots with expected changes

* One more screenshot

* This really shouldn't be necessary: see what test fails

* Fix test to look in screen for the labels

Because the labels from the tooltip don't go in the container, they
get added to the dom at the top level in a floaty bit.

* update snapshots again

* Fix button size

and also add comment to the other place where we fudge the padding

* Update snapshots

* Align to center

* Screenshots

packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx

@@ -191,7 +191,7 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
                     {canOnlyStartChat ? (
                         <IconButton
                             size="28px"
-                            style={{ padding: "4px" }}
+                            style={{ padding: "4px" }} // Work around miscalculated padding on 28px button: https://github.com/element-hq/compound/issues/409
                             onClick={(e) => vm.createChatRoom(e.nativeEvent)}
                             tooltip={_t("action|start_chat")}
                         >