Update to compound-web 9.0.1 (#33095)

* Update to compound-web 9.0.1

There are a couple of breaking changes in v9, leading to the changes in
`BugReportDialog` and `EncryptionCard`.

Most of these updates, however, are snapshot updates, due to changes in the CSS
class names in compound web (which happens due to updates in the CSS content in
those classes; `postcss-modules` generates class names based on the hash of the
CSS).

* update playwright screenshots
This commit is contained in:
Richard van der Hoff
2026-04-13 10:16:34 +00:00
committed by GitHub
parent 17efc81f0b
commit eef8cad229
64 changed files with 307 additions and 291 deletions
@@ -86,7 +86,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
class="mx_EventTile_avatar"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="2"
data-testid="avatar-img"
data-type="round"
@@ -180,7 +180,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
class="mx_EventTile_avatar"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="2"
data-testid="avatar-img"
data-type="round"
@@ -277,7 +277,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
class="mx_EventTile_avatar"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="2"
data-testid="avatar-img"
data-type="round"
@@ -354,7 +354,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
</form>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -270,7 +270,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
</div>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -549,7 +549,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
</div>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -719,7 +719,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
</form>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -3,7 +3,7 @@
exports[`<ChangeRecoveryKey /> flow to change the recovery key should display the recovery key 1`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -31,13 +31,13 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -48,7 +48,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Change recovery key
</span>
@@ -62,8 +62,9 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="primary"
data-size="lg"
>
<svg
fill="currentColor"
@@ -165,7 +166,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user to enter the recovery key 1`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -193,13 +194,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -210,7 +211,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Get recovery key
</span>
@@ -224,8 +225,9 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="primary"
data-size="lg"
>
<svg
fill="currentColor"
@@ -324,7 +326,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user to enter the recovery key 2`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -352,13 +354,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -369,7 +371,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Get recovery key
</span>
@@ -383,8 +385,9 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="primary"
data-size="lg"
>
<svg
fill="currentColor"
@@ -505,7 +508,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display information about the recovery key 1`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -533,13 +536,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -550,7 +553,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Get recovery key
</span>
@@ -564,8 +567,9 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="primary"
data-size="lg"
>
<svg
fill="currentColor"
@@ -622,7 +626,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the recovery key 1`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -650,13 +654,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -667,7 +671,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Get recovery key
</span>
@@ -681,8 +685,9 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="primary"
data-size="lg"
>
<svg
fill="currentColor"
@@ -3,7 +3,7 @@
exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -31,13 +31,13 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -48,7 +48,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Delete key storage
</span>
@@ -62,8 +62,9 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8 _destructive_1r8kr_34"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="critical"
data-size="lg"
>
<svg
fill="currentColor"
@@ -89,7 +90,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
>
Deleting key storage will remove your cryptographic identity and message keys from the server and turn off the following security features:
<ul
class="_visual-list_1mgc1_8"
class="_visual-list_6zpfn_8"
>
<li
class="_visual-list-item_1nc1y_8"
@@ -9,8 +9,9 @@ exports[`<EncryptionCard /> should render 1`] = `
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="primary"
data-size="lg"
>
<svg
fill="currentColor"
@@ -3,7 +3,7 @@
exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant correctly 1`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -31,13 +31,13 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -48,7 +48,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Reset encryption
</span>
@@ -62,8 +62,9 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8 _destructive_1r8kr_34"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="critical"
data-size="lg"
>
<svg
fill="currentColor"
@@ -88,7 +89,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
class="_visual-list_1mgc1_8"
class="_visual-list_6zpfn_8"
>
<li
class="_visual-list-item_1nc1y_8"
@@ -186,7 +187,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correctly 1`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -214,13 +215,13 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -231,7 +232,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Reset encryption
</span>
@@ -245,8 +246,9 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8 _destructive_1r8kr_34"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="critical"
data-size="lg"
>
<svg
fill="currentColor"
@@ -271,7 +273,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
class="_visual-list_1mgc1_8"
class="_visual-list_6zpfn_8"
>
<li
class="_visual-list-item_1nc1y_8"
@@ -369,7 +371,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
exports[`<ResetIdentityPanel /> should reset the encryption when the continue button is clicked 1`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -397,13 +399,13 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -414,7 +416,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Reset encryption
</span>
@@ -428,8 +430,9 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8 _destructive_1r8kr_34"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="critical"
data-size="lg"
>
<svg
fill="currentColor"
@@ -454,7 +457,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
class="_visual-list_1mgc1_8"
class="_visual-list_6zpfn_8"
>
<li
class="_visual-list-item_1nc1y_8"
@@ -555,7 +558,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
exports[`<ResetIdentityPanel /> should reset the encryption when the continue button is clicked 2`] = `
<DocumentFragment>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -583,13 +586,13 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -600,7 +603,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Reset encryption
</span>
@@ -614,8 +617,9 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8 _destructive_1r8kr_34"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="critical"
data-size="lg"
>
<svg
fill="currentColor"
@@ -640,7 +644,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
class="_visual-list_1mgc1_8"
class="_visual-list_6zpfn_8"
>
<li
class="_visual-list-item_1nc1y_8"
@@ -986,7 +986,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
/>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -2268,7 +2268,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
</div>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -2296,7 +2296,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
</ul>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -17,7 +17,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
>
<span
aria-label="Profile picture"
class="_avatar_zysgz_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar"
class="_avatar_7h2br_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar"
data-color="4"
data-testid="avatar-img"
data-type="round"
@@ -26,7 +26,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
>
<img
alt=""
class="_image_zysgz_43"
class="_image_7h2br_43"
data-type="round"
height="42px"
loading="lazy"
@@ -123,7 +123,7 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
class="mx_PeopleRoomSettingsTab_knock"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar mx_PeopleRoomSettingsTab_avatar _avatar-imageless_7h2br_55"
data-color="4"
data-testid="avatar-img"
data-type="round"
@@ -139,7 +139,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</form>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -229,7 +229,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="mx_EventTile_avatar"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="2"
data-testid="avatar-img"
data-type="round"
@@ -323,7 +323,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="mx_EventTile_avatar"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="2"
data-testid="avatar-img"
data-type="round"
@@ -420,7 +420,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
class="mx_EventTile_avatar"
>
<span
class="_avatar_zysgz_8 mx_BaseAvatar _avatar-imageless_zysgz_55"
class="_avatar_7h2br_8 mx_BaseAvatar _avatar-imageless_7h2br_55"
data-color="2"
data-testid="avatar-img"
data-type="round"
@@ -497,7 +497,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
</form>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"
@@ -232,7 +232,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
class="mx_SettingsTab_sections"
>
<nav
class="_breadcrumb_1xygz_8"
class="_breadcrumb_t96w3_8"
>
<button
aria-label="Back"
@@ -260,13 +260,13 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
</div>
</button>
<ol
class="_pages_1xygz_17"
class="_pages_t96w3_17"
>
<li>
<a
class="_link_1v5rz_8"
class="_link_k9ljz_8"
data-kind="primary"
data-size="small"
data-size="sm"
rel="noreferrer noopener"
role="button"
tabindex="0"
@@ -277,7 +277,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
<li>
<span
aria-current="page"
class="_last-page_1xygz_30"
class="_last-page_t96w3_30"
>
Reset encryption
</span>
@@ -291,8 +291,9 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
class="mx_EncryptionCard_header"
>
<div
class="_content_1r8kr_8 _destructive_1r8kr_34"
data-size="large"
class="_big-icon_1ssbv_8"
data-kind="critical"
data-size="lg"
>
<svg
fill="currentColor"
@@ -317,7 +318,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
>
<ul
class="_visual-list_1mgc1_8"
class="_visual-list_6zpfn_8"
>
<li
class="_visual-list-item_1nc1y_8"
@@ -1660,7 +1660,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
</form>
</div>
<div
class="_separator_cqpyv_8"
class="_separator_13qwf_8"
data-kind="primary"
data-orientation="horizontal"
role="separator"