Improve invite dialog ui - Part 1 (#30764)

* refactor: move `humanize` in shared components

* feat: add `RichItem` component

* feat: add `RichList` component

* refactor: use `RichList` and `RichItem` in `InviteDialog`

* fix: exclude `InviteDialog` button to css override

* test: update selector in invite dialog

* test(e2e): update crypto test to use correct selector

* test(e2e): update invite dialog

* test: add test for `humanize.ts`

* fix: add space between the list and the input when the list is scrollable

* test(e2e): update screenshots

res/css/_common.pcss

@@ -602,6 +602,7 @@ legend {
         .mx_AccessibleButton,
         .mx_IdentityServerPicker button,
         .mx_AccessSecretStorageDialog button,
+        .mx_InviteDialog_section button,
         [class|="maplibregl"]
     ),
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
@@ -643,7 +644,8 @@ legend {
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
-        .mx_EncryptionUserSettingsTab button
+        .mx_EncryptionUserSettingsTab button,
+        .mx_InviteDialog_section button
     ):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):focus,