diff --git a/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png b/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png
index ba0d783961..4e4823da5b 100644
Binary files a/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png and b/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png b/apps/web/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png
index e4f9bf4b13..4a66d14863 100644
Binary files a/apps/web/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png and b/apps/web/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png differ
diff --git a/apps/web/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png b/apps/web/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png
index cb3f9f8618..24d7fdd823 100644
Binary files a/apps/web/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png and b/apps/web/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png differ
diff --git a/apps/web/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png b/apps/web/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png
index 13ba504919..3cac48d7b5 100644
Binary files a/apps/web/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png and b/apps/web/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png
index 573d63416d..26f582684f 100644
Binary files a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png and b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png b/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png
index 7cd35b0050..adae285fa5 100644
Binary files a/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png and b/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png b/apps/web/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png
index ce50be25a2..dc74cd8746 100644
Binary files a/apps/web/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png and b/apps/web/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
index afce0e5b04..1f728f8e0a 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
index 62c9b95d5f..42bf92f8b8 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-bubble-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-bubble-linux.png
index a913d4ab19..bbb73259b7 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-bubble-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-bubble-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-modern-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-modern-linux.png
index b2167e0a12..1c705faab8 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-modern-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-modern-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png
index 60678f3bb4..e33c1dec97 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png
index cc2dc4a0a7..238fd2d560 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png
index 068aa2901f..21001e22c2 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png
index 1acda5968e..843ff02c18 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png
index 3b221183fb..59943fdb20 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png
index 73f7f02d65..9747f1a1fe 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png b/apps/web/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png
index efdd7e3cba..8c3a6c8260 100644
Binary files a/apps/web/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png and b/apps/web/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
index e5b81c1973..3d1d02f663 100644
Binary files a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png
index 79a9efe5cf..ea0bed423b 100644
Binary files a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png and b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png
index efec129b55..6ae6f97c44 100644
Binary files a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png and b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
index 2519cee3ef..bf65dbb7b8 100644
Binary files a/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png b/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png
index 95657048ac..f850033eac 100644
Binary files a/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png and b/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png b/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png
index f5f3fa0382..2b758ad0a2 100644
Binary files a/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png and b/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png b/apps/web/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png
index 7a64332f1b..b357260cac 100644
Binary files a/apps/web/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png and b/apps/web/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png b/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png
index c12d1a8808..6fdbcd3404 100644
Binary files a/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png and b/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png
index 52fe99b90a..996aa42073 100644
Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png
index 4bd9805665..3cc32f05fd 100644
Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png
index 1551195fd5..6a8c2967f9 100644
Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-checked-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-checked-linux.png
index d533dceeac..37aea0cc53 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-checked-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-checked-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-unchecked-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-unchecked-linux.png
index 5995b7a928..a6ad88ffd3 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-unchecked-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-unchecked-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png
index a7fced9c8b..5f2630c187 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png
index c2f39b5855..627e24e647 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png differ
diff --git a/apps/web/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png b/apps/web/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png
index 747ffb15ff..69a02378b5 100644
Binary files a/apps/web/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png and b/apps/web/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png differ
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index c4d3a02d0f..1213f4401b 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -122,13 +122,13 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
@@ -160,7 +160,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -220,13 +220,13 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
@@ -258,7 +258,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -319,13 +319,13 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
@@ -357,7 +357,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -439,13 +439,13 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 tabindex="0"
               >
                 <form
-                  class="_root_19upo_16"
+                  class="_root_1o4d9_17"
                 >
                   <div
-                    class="_inline-field_19upo_32"
+                    class="_inline-field_1o4d9_33"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_153f2_10"
@@ -478,7 +478,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     />
                   </div>
                 </form>
@@ -541,13 +541,13 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             View
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
@@ -579,7 +579,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -712,13 +712,13 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
@@ -750,7 +750,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -810,13 +810,13 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
@@ -848,7 +848,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -909,13 +909,13 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
@@ -947,7 +947,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
index 8a6e4afc48..a61dfe7fb1 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
@@ -26,16 +26,16 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
       </h1>
     </div>
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <p>
         Are you sure you want to decline the invitation to join "foo"?
       </p>
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_udcm8_10"
@@ -52,16 +52,16 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="react-use-id-1"
           >
             Ignore user
           </label>
           <span
-            class="_message_19upo_85 _help-message_19upo_91"
+            class="_message_1o4d9_86 _help-message_1o4d9_92"
             id="radix-react-use-id-2"
           >
             You will not see any messages or room invites from this user.
@@ -69,10 +69,10 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
         </div>
       </div>
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_udcm8_10"
@@ -89,16 +89,16 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="react-use-id-3"
           >
             Report room
           </label>
           <span
-            class="_message_19upo_85 _help-message_19upo_91"
+            class="_message_1o4d9_86 _help-message_1o4d9_92"
             id="radix-react-use-id-4"
           >
             Report this room to your account provider.
@@ -107,10 +107,10 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
       </div>
       <div
         aria-disabled="false"
-        class="_field_19upo_26"
+        class="_field_1o4d9_27"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="mx_DeclineAndBlockInviteDialog_reason"
         >
           Reason
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
index 08e69ab370..f0cfd12994 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
       class="mx_Dialog_content"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
           class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -116,10 +116,10 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
           </p>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -137,16 +137,16 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="react-use-id-1"
             >
               Enable end-to-end encryption
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
               id="radix-react-use-id-2"
             >
               You can't disable this later. Bridges & most bots won't work yet.
@@ -162,10 +162,10 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
             Show advanced
           </summary>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -182,16 +182,16 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="react-use-id-3"
               >
                 Block anyone not part of server.org from ever joining this room.
               </label>
               <span
-                class="_message_19upo_85 _help-message_19upo_91"
+                class="_message_1o4d9_86 _help-message_1o4d9_92"
                 id="radix-react-use-id-4"
               >
                 You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.
@@ -277,7 +277,7 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
       class="mx_Dialog_content"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
           class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -365,10 +365,10 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
           </p>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -386,16 +386,16 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="react-use-id-1"
             >
               Enable end-to-end encryption
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
               id="radix-react-use-id-2"
             >
               You can't disable this later. Bridges & most bots won't work yet.
@@ -403,10 +403,10 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -423,16 +423,16 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="react-use-id-3"
             >
               Encrypt state events
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
               id="radix-react-use-id-4"
             >
               Enables experimental support for encrypting state events, which hides metadata such as room names and topics from the server. This metadata will also be hidden from people joining rooms later, and people whose clients do not support MSC4362.
@@ -517,7 +517,7 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
       class="mx_Dialog_content"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
           class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -607,10 +607,10 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
           </p>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -628,16 +628,16 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="react-use-id-1"
             >
               Enable end-to-end encryption
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
               id="radix-react-use-id-2"
             >
               You can't disable this later. Bridges & most bots won't work yet.
@@ -645,10 +645,10 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -665,16 +665,16 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="react-use-id-3"
             >
               Encrypt state events
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
               id="radix-react-use-id-4"
             >
               Enables experimental support for encrypting state events, which hides metadata such as room names and topics from the server. This metadata will also be hidden from people joining rooms later, and people whose clients do not support MSC4362.
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap
index 6fb5a6a3b1..b97c6ec42c 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap
@@ -34,13 +34,13 @@ exports[`CreateSectionDialog renders the dialog 1`] = `
         Sections are only for you
       </span>
       <form
-        class="_root_19upo_16 mx_CreateSectionDialog_form"
+        class="_root_1o4d9_17 mx_CreateSectionDialog_form"
       >
         <div
-          class="_field_19upo_26"
+          class="_field_1o4d9_27"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="radix-react-use-id-1"
           >
              
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index 7fb5de5cb5..2a4176fafa 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -137,7 +137,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         </button>
       </div>
       <form
-        class="_root_19upo_16 mx_DevTools_toggleForm"
+        class="_root_1o4d9_17 mx_DevTools_toggleForm"
       >
         <h2
           class="mx_DevTools_toolHeading"
@@ -145,10 +145,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           Options
         </h2>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -165,10 +165,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="mx_SettingsFlag_vY7Q4uEh9K38"
             >
               Developer mode
@@ -176,10 +176,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -196,10 +196,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="mx_SettingsFlag_QgU2PomxwKpa"
             >
               Show hidden events in timeline
@@ -207,10 +207,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -227,10 +227,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="mx_SettingsFlag_6hpi3YEetmBG"
             >
               Enable widget screenshots on supported widgets
@@ -238,10 +238,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -258,16 +258,16 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="mx_SettingsFlag_4yVCeEefiPqp"
             >
               Disable bandwidth-heavy features
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
               id="radix-react-use-id-2"
             >
               <span>
@@ -283,13 +283,13 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         </div>
       </form>
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_field_19upo_26"
+          class="_field_1o4d9_27"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="radix-react-use-id-3"
           >
             Element Call URL
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
index 3186e05330..ce5006bd46 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -164,13 +164,13 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
       </span>
     </div>
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32 mx_ExportDialog_attachments-checkbox"
+        class="_inline-field_1o4d9_33 mx_ExportDialog_attachments-checkbox"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
@@ -199,10 +199,10 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="include-attachments"
           >
             Include Attachments
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index 3c53daae7a..9cb7bc3fee 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -76,13 +76,13 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
           class="mx_ManageRestrictedJoinRuleDialog_entry"
         >
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
@@ -112,10 +112,10 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               >
                 <label
-                  class="_label_19upo_59"
+                  class="_label_1o4d9_60"
                   for="checkbox_vY7Q4uEh9K"
                 >
                   <div>
@@ -137,7 +137,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                   </div>
                 </label>
                 <span
-                  class="_message_19upo_85 _help-message_19upo_91"
+                  class="_message_1o4d9_86 _help-message_1o4d9_92"
                   id="react-use-id-1"
                 >
                   0 members
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
index 139222a338..ad47ec2860 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
@@ -26,14 +26,14 @@ exports[`ReportRoomDialog displays admin message 1`] = `
       </h1>
     </div>
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
       id="mx_ReportEventDialog"
     >
       <div
-        class="_field_19upo_26"
+        class="_field_1o4d9_27"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="mx_ReportRoomDialog_reason"
         >
           Describe the reason
@@ -43,7 +43,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
           rows="5"
         />
         <span
-          class="_message_19upo_85 _help-message_19upo_91"
+          class="_message_1o4d9_86 _help-message_1o4d9_92"
           id="radix-react-use-id-1"
         >
           Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
@@ -66,10 +66,10 @@ exports[`ReportRoomDialog displays admin message 1`] = `
 
       </p>
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_udcm8_10"
@@ -86,10 +86,10 @@ exports[`ReportRoomDialog displays admin message 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="react-use-id-2"
           >
             Leave room
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/WidgetOpenIDPermissionsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/WidgetOpenIDPermissionsDialog-test.tsx.snap
index 42b34dfcbf..e401633e8c 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/WidgetOpenIDPermissionsDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/WidgetOpenIDPermissionsDialog-test.tsx.snap
@@ -43,13 +43,13 @@ exports[`WidgetOpenIDPermissionsDialog should render 1`] = `
         class="mx_Dialog_buttons_additive"
       >
         <form
-          class="_root_19upo_16"
+          class="_root_1o4d9_17"
         >
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -66,10 +66,10 @@ exports[`WidgetOpenIDPermissionsDialog should render 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="react-use-id-1"
               >
                 Remember this
diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
index fd86031f2d..ce61e31540 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
@@ -690,13 +690,13 @@ exports[`<Users /> should render a user list 1`] = `
     </div>
     No results found
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_udcm8_10"
@@ -714,10 +714,10 @@ exports[`<Users /> should render a user list 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="react-use-id-1"
           >
             Only joined users
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
index a2d7a8662b..20a0ca7cfd 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
@@ -6,13 +6,13 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
     class="mx_LabelledCheckbox"
   >
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
@@ -43,10 +43,10 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="checkbox_vY7Q4uEh9K"
           >
             <span
@@ -56,7 +56,7 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
             </span>
           </label>
           <span
-            class="_message_19upo_85 _help-message_19upo_91"
+            class="_message_1o4d9_86 _help-message_1o4d9_92"
             id="react-use-id-1"
           >
             this is a byline
@@ -74,13 +74,13 @@ exports[`<LabelledCheckbox /> should render with byline of undefined 1`] = `
     class="mx_LabelledCheckbox"
   >
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
@@ -110,10 +110,10 @@ exports[`<LabelledCheckbox /> should render with byline of undefined 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="checkbox_vY7Q4uEh9K"
           >
             <span
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
index 30322e287f..bd80e562ec 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`<SettingsField /> should render with the default label 1`] = `
 <DocumentFragment>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_field_19upo_26"
+      class="_field_1o4d9_27"
     >
       <label
-        class="_label_19upo_59"
+        class="_label_1o4d9_60"
         for="radix-react-use-id-1"
       >
         Element Call URL
diff --git a/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap b/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
index 12c021f1a2..2089ee8544 100644
--- a/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
@@ -19,13 +19,13 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.
   </p>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_udcm8_10"
@@ -42,10 +42,10 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="react-use-id-1"
         >
           Enable live location sharing
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
index 7e44b77369..4428800769 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
@@ -19,14 +19,14 @@ exports[`<LayoutSwitcher /> should render 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_19upo_16 mx_LayoutSwitcher_LayoutSelector"
+        class="_root_1o4d9_17 mx_LayoutSwitcher_LayoutSelector"
       >
         <div
-          class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+          class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
         >
           <label
             aria-label="Modern"
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="radix-react-use-id-1"
           >
             <div
@@ -117,11 +117,11 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           </label>
         </div>
         <div
-          class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+          class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
         >
           <label
             aria-label="Message bubbles"
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="radix-react-use-id-2"
           >
             <div
@@ -211,11 +211,11 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           </label>
         </div>
         <div
-          class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+          class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
         >
           <label
             aria-label="IRC (experimental)"
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="radix-react-use-id-3"
           >
             <div
@@ -309,13 +309,13 @@ exports[`<LayoutSwitcher /> should render 1`] = `
         </div>
       </form>
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -335,16 +335,16 @@ exports[`<LayoutSwitcher /> should render 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="radix-react-use-id-5"
             >
               Show compact text and messages
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
               id="radix-react-use-id-4"
             >
               Modern layout must be selected to use this feature.
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
index 747f93d543..012088d663 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`<Notifications /> main notification switches renders only enable notifications switch when notifications are disabled 1`] = `
 <div>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_udcm8_10"
@@ -26,16 +26,16 @@ exports[`<Notifications /> main notification switches renders only enable notifi
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="react-use-id-1"
         >
           Enable notifications for this account
         </label>
         <span
-          class="_message_19upo_85 _help-message_19upo_91"
+          class="_message_1o4d9_86 _help-message_1o4d9_92"
           id="radix-react-use-id-2"
         >
           Turn off to disable notifications on all your devices and sessions
@@ -44,13 +44,13 @@ exports[`<Notifications /> main notification switches renders only enable notifi
     </div>
   </form>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_udcm8_10"
@@ -68,10 +68,10 @@ exports[`<Notifications /> main notification switches renders only enable notifi
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="mx_SettingsFlag_testid_0"
         >
           Show all activity in the room list (dots or number of unread messages)
@@ -79,10 +79,10 @@ exports[`<Notifications /> main notification switches renders only enable notifi
       </div>
     </div>
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_udcm8_10"
@@ -100,10 +100,10 @@ exports[`<Notifications /> main notification switches renders only enable notifi
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="mx_SettingsFlag_testid_1"
         >
           Only show notifications in the thread activity centre
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
index 7476d79c6d..3e1bb4bd7a 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
@@ -23,13 +23,13 @@ exports[`<SetIdServer /> renders expected fields 1`] = `
       class="mx_SettingsFieldset_content"
     >
       <form
-        class="_root_19upo_16 mx_IdentityServerPicker"
+        class="_root_1o4d9_17 mx_IdentityServerPicker"
       >
         <div
-          class="_field_19upo_26"
+          class="_field_1o4d9_27"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="radix-react-use-id-1"
           >
             Enter a new identity server
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
index 95475ef06f..4a5827d859 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SetIntegrationManager should render manage integrations sections 1`] = `
 <form
-  class="_root_19upo_16 mx_SetIntegrationManager"
+  class="_root_1o4d9_17 mx_SetIntegrationManager"
   data-testid="mx_SetIntegrationManager"
 >
   <div
@@ -42,10 +42,10 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
     Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
   </div>
   <div
-    class="_inline-field_19upo_32"
+    class="_inline-field_1o4d9_33"
   >
     <div
-      class="_inline-field-control_19upo_44"
+      class="_inline-field-control_1o4d9_45"
     >
       <div
         class="_container_udcm8_10"
@@ -62,10 +62,10 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
       </div>
     </div>
     <div
-      class="_inline-field-body_19upo_38"
+      class="_inline-field-body_1o4d9_39"
     >
       <label
-        class="_label_19upo_59"
+        class="_label_1o4d9_60"
         for="react-use-id-1"
       >
         Enable the integration manager
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index 8150f40c65..dfb3bbe6d6 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -19,13 +19,13 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -44,10 +44,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="radix-react-use-id-1"
             >
               Match system theme
@@ -56,13 +56,13 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
         </div>
       </form>
       <form
-        class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_1o4d9_17 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -82,10 +82,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-2"
             >
               Light
@@ -93,10 +93,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -115,10 +115,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-3"
             >
               Dark
@@ -126,10 +126,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -148,10 +148,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-4"
             >
               High contrast
@@ -159,10 +159,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -181,10 +181,10 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-5"
             >
               Alice theme
@@ -196,13 +196,13 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
         class="mx_ThemeChoicePanel_CustomTheme"
       >
         <form
-          class="_root_19upo_16 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
+          class="_root_1o4d9_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
         >
           <div
-            class="_field_19upo_26"
+            class="_field_1o4d9_27"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="radix-react-use-id-6"
             >
               Add custom theme
@@ -220,7 +220,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               />
             </div>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
               id="radix-react-use-id-7"
             >
               Enter the URL of a custom theme you want to apply.
@@ -298,13 +298,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -323,10 +323,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="radix-react-use-id-1"
             >
               Match system theme
@@ -335,13 +335,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
         </div>
       </form>
       <form
-        class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_1o4d9_17 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -361,10 +361,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-2"
             >
               Light
@@ -372,10 +372,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -394,10 +394,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-3"
             >
               Dark
@@ -405,10 +405,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -427,10 +427,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-4"
             >
               High contrast
@@ -438,10 +438,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -460,10 +460,10 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-5"
             >
               Alice theme
@@ -475,13 +475,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
         class="mx_ThemeChoicePanel_CustomTheme"
       >
         <form
-          class="_root_19upo_16 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
+          class="_root_1o4d9_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
         >
           <div
-            class="_field_19upo_26"
+            class="_field_1o4d9_27"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="radix-react-use-id-6"
             >
               Add custom theme
@@ -499,7 +499,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
               />
             </div>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
               id="radix-react-use-id-7"
             >
               Enter the URL of a custom theme you want to apply.
@@ -577,13 +577,13 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -602,10 +602,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="radix-react-use-id-1"
             >
               Match system theme
@@ -614,13 +614,13 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
         </div>
       </form>
       <form
-        class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_1o4d9_17 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -640,10 +640,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-2"
             >
               Light
@@ -651,10 +651,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -673,10 +673,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-3"
             >
               Dark
@@ -684,10 +684,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -706,10 +706,10 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
               for="radix-react-use-id-4"
             >
               High contrast
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
index d081d461e2..574215b6cb 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
@@ -10,13 +10,13 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
       tabindex="0"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_153f2_10"
@@ -49,7 +49,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           />
         </div>
       </form>
@@ -76,13 +76,13 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
       tabindex="0"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_153f2_10"
@@ -114,7 +114,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           />
         </div>
       </form>
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
index 1b0f12247c..3d1342eab8 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
@@ -16,13 +16,13 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
     class="mx_SelectableDeviceTile"
   >
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32 mx_SelectableDeviceTile_checkbox"
+        class="_inline-field_1o4d9_33 mx_SelectableDeviceTile_checkbox"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
@@ -52,10 +52,10 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="device-tile-checkbox-my-device"
           >
             <div
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
index d9d8c210dd..318e424cda 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
@@ -201,7 +201,7 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys
 
 exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unverified devices settings 1`] = `
 <form
-  class="_root_19upo_16 mx_OtherSettings"
+  class="_root_1o4d9_17 mx_OtherSettings"
   data-testid="otherSettings"
 >
   <h3
@@ -210,10 +210,10 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
     Other people’s devices
   </h3>
   <div
-    class="_inline-field_19upo_32"
+    class="_inline-field_1o4d9_33"
   >
     <div
-      class="_inline-field-control_19upo_44"
+      class="_inline-field-control_1o4d9_45"
     >
       <div
         class="_container_udcm8_10"
@@ -234,16 +234,16 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
       </div>
     </div>
     <div
-      class="_inline-field-body_19upo_38"
+      class="_inline-field-body_1o4d9_39"
     >
       <label
-        class="_label_19upo_59"
+        class="_label_1o4d9_60"
         for="radix-react-use-id-2"
       >
         In encrypted rooms, only send messages to verified users
       </label>
       <span
-        class="_message_19upo_85 _help-message_19upo_91"
+        class="_message_1o4d9_86 _help-message_1o4d9_92"
         id="radix-react-use-id-1"
       >
         Warning: users who have not explicitly verified with you (e.g. using emoji) will not receive your encrypted messages. Also, unverified devices of verified users will not receive your encrypted messages. Changes require an application restart to take effect.
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
index 0888f835d0..e6f22f4273 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
@@ -251,13 +251,13 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       </span>
     </div>
     <form
-      class="_root_19upo_16 mx_KeyForm"
+      class="_root_1o4d9_17 mx_KeyForm"
     >
       <div
-        class="_field_19upo_26"
+        class="_field_1o4d9_27"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="radix-react-use-id-1"
         >
           Enter recovery key
@@ -411,14 +411,14 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       </span>
     </div>
     <form
-      class="_root_19upo_16 mx_KeyForm"
+      class="_root_1o4d9_17 mx_KeyForm"
     >
       <div
-        class="_field_19upo_26"
+        class="_field_1o4d9_27"
         data-invalid="true"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           data-invalid="true"
           for="radix-react-use-id-1"
         >
@@ -460,7 +460,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
           </button>
         </div>
         <span
-          class="_message_19upo_85 _error-message_19upo_95"
+          class="_message_1o4d9_86 _error-message_1o4d9_96"
           id="radix-react-use-id-3"
         >
           <svg
diff --git a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index 8dfe142d64..ddfacb3b4f 100644
--- a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -12,13 +12,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
         class="mx_SettingsSection_subSections"
       >
         <form
-          class="_root_19upo_16 mx_SettingsSubsection_content"
+          class="_root_1o4d9_17 mx_SettingsSubsection_content"
         >
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -37,10 +37,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="react-use-id-1"
               >
                 Enable notifications for this account
@@ -48,10 +48,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -68,10 +68,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_vY7Q4uEh9K38"
               >
                 Enable desktop notifications for this session
@@ -79,10 +79,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -99,10 +99,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_QgU2PomxwKpa"
               >
                 Show message preview in desktop notification
@@ -110,10 +110,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -131,10 +131,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_6hpi3YEetmBG"
               >
                 Enable audible notifications for this session
@@ -263,13 +263,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -300,10 +300,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_4yVCeEefiP"
                     >
                       <span
@@ -320,13 +320,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -357,10 +357,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_qpMRMwbPDm"
                     >
                       <span
@@ -377,13 +377,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -414,10 +414,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_fGtmGQvdMW"
                     >
                       <span
@@ -451,13 +451,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -488,10 +488,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_e954DVIAu5"
                     >
                       <span
@@ -508,13 +508,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -544,10 +544,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_CsiHRD7nyr"
                     >
                       <span
@@ -564,13 +564,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -601,10 +601,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_A2ohjWVJIP"
                     >
                       <span
@@ -659,13 +659,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -696,10 +696,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_auy1OmnTid"
                     >
                       <span
@@ -717,13 +717,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               id="mx_NotificationSettings2_MentionCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -754,10 +754,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_X4ePDS0OpW"
                     >
                       <span
@@ -774,13 +774,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -812,10 +812,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_wAHG75JNTN"
                     >
                       <span
@@ -825,7 +825,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       </span>
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-2"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
@@ -874,13 +874,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               />
             </div>
             <form
-              class="_root_19upo_16"
+              class="_root_1o4d9_17"
             >
               <div
-                class="_inline-field_19upo_32"
+                class="_inline-field_1o4d9_33"
               >
                 <div
-                  class="_inline-field-control_19upo_44"
+                  class="_inline-field-control_1o4d9_45"
                 >
                   <div
                     class="_container_udcm8_10"
@@ -898,10 +898,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field-body_19upo_38"
+                  class="_inline-field-body_1o4d9_39"
                 >
                   <label
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="mx_SettingsFlag_kNU64raTLcRs"
                   >
                     Show all activity in the room list (dots or number of unread messages)
@@ -909,10 +909,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field_19upo_32"
+                class="_inline-field_1o4d9_33"
               >
                 <div
-                  class="_inline-field-control_19upo_44"
+                  class="_inline-field-control_1o4d9_45"
                 >
                   <div
                     class="_container_udcm8_10"
@@ -930,10 +930,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field-body_19upo_38"
+                  class="_inline-field-body_1o4d9_39"
                 >
                   <label
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="mx_SettingsFlag_QRlYy75nfv5b"
                   >
                     Only show notifications in the thread activity centre
@@ -1037,13 +1037,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
         class="mx_SettingsSection_subSections"
       >
         <form
-          class="_root_19upo_16 mx_SettingsSubsection_content"
+          class="_root_1o4d9_17 mx_SettingsSubsection_content"
         >
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -1061,10 +1061,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="react-use-id-1"
               >
                 Enable notifications for this account
@@ -1072,10 +1072,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -1092,10 +1092,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_vY7Q4uEh9K38"
               >
                 Enable desktop notifications for this session
@@ -1103,10 +1103,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -1123,10 +1123,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_QgU2PomxwKpa"
               >
                 Show message preview in desktop notification
@@ -1134,10 +1134,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -1155,10 +1155,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_6hpi3YEetmBG"
               >
                 Enable audible notifications for this session
@@ -1284,13 +1284,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1320,10 +1320,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_OEPN1su1JY"
                     >
                       <span
@@ -1340,13 +1340,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1376,10 +1376,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_VtOyR5kbu3"
                     >
                       <span
@@ -1396,13 +1396,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1432,10 +1432,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_pEwuLn9Enn"
                     >
                       <span
@@ -1469,13 +1469,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1505,10 +1505,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_YuxfFEpOsz"
                     >
                       <span
@@ -1525,13 +1525,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1560,10 +1560,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_tWhQkBerF1"
                     >
                       <span
@@ -1580,13 +1580,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1616,10 +1616,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_ejc4GFes1U"
                     >
                       <span
@@ -1674,13 +1674,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1710,10 +1710,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_FzOK2nvfGF"
                     >
                       <span
@@ -1731,13 +1731,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               id="mx_NotificationSettings2_MentionCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1767,10 +1767,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_MldL2r2vbs"
                     >
                       <span
@@ -1787,13 +1787,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1824,10 +1824,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_SwicmKUiOB"
                     >
                       <span
@@ -1837,7 +1837,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       </span>
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-2"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
@@ -2100,13 +2100,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <form
-              class="_root_19upo_16"
+              class="_root_1o4d9_17"
             >
               <div
-                class="_inline-field_19upo_32"
+                class="_inline-field_1o4d9_33"
               >
                 <div
-                  class="_inline-field-control_19upo_44"
+                  class="_inline-field-control_1o4d9_45"
                 >
                   <div
                     class="_container_udcm8_10"
@@ -2124,10 +2124,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field-body_19upo_38"
+                  class="_inline-field-body_1o4d9_39"
                 >
                   <label
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="mx_SettingsFlag_kNU64raTLcRs"
                   >
                     Show all activity in the room list (dots or number of unread messages)
@@ -2135,10 +2135,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field_19upo_32"
+                class="_inline-field_1o4d9_33"
               >
                 <div
-                  class="_inline-field-control_19upo_44"
+                  class="_inline-field-control_1o4d9_45"
                 >
                   <div
                     class="_container_udcm8_10"
@@ -2156,10 +2156,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field-body_19upo_38"
+                  class="_inline-field-body_1o4d9_39"
                 >
                   <label
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="mx_SettingsFlag_QRlYy75nfv5b"
                   >
                     Only show notifications in the thread activity centre
@@ -2215,13 +2215,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                 class="mx_LabelledCheckbox"
               >
                 <form
-                  class="_root_19upo_16"
+                  class="_root_1o4d9_17"
                 >
                   <div
-                    class="_inline-field_19upo_32"
+                    class="_inline-field_1o4d9_33"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_153f2_10"
@@ -2250,10 +2250,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     >
                       <label
-                        class="_label_19upo_59"
+                        class="_label_1o4d9_60"
                         for="checkbox_dvqsxEaZtl"
                       >
                         <span
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 8b1fed3428..e8e82fe1df 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -32,13 +32,13 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
             >
               <form
-                class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
+                class="_root_1o4d9_17 mx_ThemeChoicePanel_ThemeSelectors"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
+                  class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_1ug7n_10"
@@ -58,10 +58,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+                      class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
                       for="radix-react-use-id-1"
                     >
                       Light
@@ -69,10 +69,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
+                  class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_1ug7n_10"
@@ -92,10 +92,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+                      class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
                       for="radix-react-use-id-2"
                     >
                       Dark
@@ -103,10 +103,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
+                  class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_1ug7n_10"
@@ -126,10 +126,10 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
+                      class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
                       for="radix-react-use-id-3"
                     >
                       High contrast
@@ -162,14 +162,14 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
             >
               <form
-                class="_root_19upo_16 mx_LayoutSwitcher_LayoutSelector"
+                class="_root_1o4d9_17 mx_LayoutSwitcher_LayoutSelector"
               >
                 <div
-                  class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                  class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <label
                     aria-label="Modern"
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="radix-react-use-id-4"
                   >
                     <div
@@ -260,11 +260,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </label>
                 </div>
                 <div
-                  class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                  class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <label
                     aria-label="Message bubbles"
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="radix-react-use-id-5"
                   >
                     <div
@@ -354,11 +354,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </label>
                 </div>
                 <div
-                  class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                  class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <label
                     aria-label="IRC (experimental)"
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="radix-react-use-id-6"
                   >
                     <div
@@ -452,13 +452,13 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -478,16 +478,16 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="radix-react-use-id-8"
                     >
                       Show compact text and messages
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="radix-react-use-id-7"
                     >
                       Modern layout must be selected to use this feature.
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
index 9f335ce25d..6e7aecbe86 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
@@ -16,7 +16,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
           class="mx_SettingsSection_subSections"
         >
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -69,7 +69,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -87,10 +87,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -107,10 +107,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_vY7Q4uEh9K38"
                     >
                       Show message previews
@@ -121,7 +121,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -139,10 +139,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -160,16 +160,16 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_QgU2PomxwKpa"
                     >
                       Show all rooms in Home
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="radix-react-use-id-1"
                     >
                       All rooms you're in will appear in Home.
@@ -180,7 +180,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -217,10 +217,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -238,10 +238,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_6hpi3YEetmBG"
                     >
                       Use Ctrl + F to search timeline
@@ -252,7 +252,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -308,10 +308,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -329,10 +329,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_4yVCeEefiPqp"
                     >
                       Show timestamps in 12 hour format (e.g. 2:30pm)
@@ -340,10 +340,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -361,10 +361,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_MRMwbPDmfGtm"
                     >
                       Always show message timestamps
@@ -372,10 +372,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -393,16 +393,16 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_GQvdMWe954DV"
                     >
                       Publish timezone on public profile
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="radix-react-use-id-2"
                     >
                       Requires your server to support MSC4133
@@ -413,7 +413,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -440,10 +440,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -462,16 +462,16 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_IAu5CsiHRD7n"
                     >
                       Send read receipts
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="radix-react-use-id-3"
                     >
                       Your server doesn't support disabling sending read receipts.
@@ -479,10 +479,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -501,10 +501,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_yrA2ohjWVJIP"
                     >
                       Send typing notifications
@@ -515,7 +515,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -533,10 +533,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -554,10 +554,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_auy1OmnTidX4"
                     >
                       Automatically replace plain text Emoji
@@ -565,10 +565,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -587,16 +587,16 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_ePDS0OpWwAHG"
                     >
                       Enable Markdown
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="radix-react-use-id-4"
                     >
                       <span>
@@ -610,10 +610,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -632,10 +632,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_75JNTNkNU64r"
                     >
                       Enable Emoji suggestions while typing
@@ -643,10 +643,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -664,10 +664,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_aTLcRsQRlYy7"
                     >
                       Use Ctrl + Enter to send a message
@@ -675,10 +675,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -696,10 +696,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_5nfv5bOEPN1s"
                     >
                       Surround selected text when typing special characters
@@ -707,10 +707,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -729,10 +729,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_u1JYVtOyR5kb"
                     >
                       Show stickers button
@@ -740,10 +740,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -762,10 +762,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_u3pEwuLn9Enn"
                     >
                       Insert a trailing colon after user mentions at the start of a message
@@ -776,7 +776,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -794,10 +794,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -815,10 +815,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_YuxfFEpOsztW"
                     >
                       Enable automatic language detection for syntax highlighting
@@ -826,10 +826,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -847,10 +847,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_hQkBerF1ejc4"
                     >
                       Expand code blocks by default
@@ -858,10 +858,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -880,10 +880,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_GFes1UFzOK2n"
                     >
                       Show line numbers in code blocks
@@ -894,7 +894,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -921,10 +921,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -942,10 +942,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_vfGFMldL2r2v"
                     >
                       Enable previews
@@ -953,10 +953,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -973,10 +973,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_bsSwicmKUiOB"
                     >
                       Enable previews in encrypted rooms
@@ -987,7 +987,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -1005,10 +1005,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1026,10 +1026,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_dvqsxEaZtl3A"
                     >
                       Autoplay GIFs
@@ -1037,10 +1037,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1058,10 +1058,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_NIiWzqsApP1c"
                     >
                       Autoplay videos
@@ -1072,7 +1072,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -1090,10 +1090,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1112,10 +1112,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_q1SIAPqLMVXh"
                     >
                       Show typing notifications
@@ -1123,10 +1123,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1145,10 +1145,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_dXFDGgBsKXay"
                     >
                       Show a placeholder for removed messages
@@ -1156,10 +1156,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1178,10 +1178,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_7Az0xw4Bs4Tt"
                     >
                       Show read receipts sent by other users
@@ -1189,10 +1189,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1211,10 +1211,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_8jmzPIlPoBCv"
                     >
                       Show join/leave messages (invites/removes/bans unaffected)
@@ -1222,10 +1222,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1244,10 +1244,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_enFRaTjdsFou"
                     >
                       Show display name changes
@@ -1255,10 +1255,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1277,10 +1277,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_bfwnd5rz4XNX"
                     >
                       Show chat effects (animations when receiving e.g. confetti)
@@ -1288,10 +1288,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1310,10 +1310,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_gs5uWEzYzZrS"
                     >
                       Show profile picture changes
@@ -1321,10 +1321,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1343,10 +1343,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_qWg7OgID1yRR"
                     >
                       Show avatars in user, room and event mentions
@@ -1354,10 +1354,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1376,10 +1376,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_pOPewl7rtMbV"
                     >
                       Enable big emoji in chat
@@ -1387,10 +1387,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1409,10 +1409,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_cmt3PZSyNp3v"
                     >
                       Jump to the bottom of the timeline when you send a message
@@ -1420,10 +1420,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1442,10 +1442,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_dJJz3lHUv9XX"
                     >
                       Show current profile picture and name for users in message history
@@ -1471,13 +1471,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
             >
               <form
-                class="_root_19upo_16 mx_MediaPreviewAccountSetting_Form"
+                class="_root_1o4d9_17 mx_MediaPreviewAccountSetting_Form"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1494,10 +1494,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="react-use-id-5"
                     >
                       Hide avatars of room and inviter
@@ -1506,27 +1506,27 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 </div>
                 <div
                   aria-label="Show media in timeline"
-                  class="_field_19upo_26"
+                  class="_field_1o4d9_27"
                   id="mx_media_previews"
                   role="radiogroup"
                 >
                   <label
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="radix-react-use-id-6"
                   >
                     Show media in timeline
                   </label>
                   <span
-                    class="_message_19upo_85 _help-message_19upo_91 mx_MediaPreviewAccountSetting_RadioHelp"
+                    class="_message_1o4d9_86 _help-message_1o4d9_92 mx_MediaPreviewAccountSetting_RadioHelp"
                     id="radix-react-use-id-7"
                   >
                     A hidden media can always be shown by tapping on it
                   </span>
                   <div
-                    class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_Radio"
+                    class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_Radio"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_1ug7n_10"
@@ -1542,10 +1542,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     >
                       <label
-                        class="_label_19upo_59"
+                        class="_label_1o4d9_60"
                         for="mx_media_previews_off"
                       >
                         Always hide
@@ -1553,10 +1553,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_Radio"
+                    class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_Radio"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_1ug7n_10"
@@ -1572,10 +1572,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     >
                       <label
-                        class="_label_19upo_59"
+                        class="_label_1o4d9_60"
                         for="mx_media_previews_private"
                       >
                         In private rooms
@@ -1583,10 +1583,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_Radio"
+                    class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_Radio"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_1ug7n_10"
@@ -1603,10 +1603,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     >
                       <label
-                        class="_label_19upo_59"
+                        class="_label_1o4d9_60"
                         for="mx_media_previews_on"
                       >
                         Always show
@@ -1616,13 +1616,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 </div>
               </form>
               <form
-                class="_root_19upo_16 mx_MediaPreviewAccountSetting_Form"
+                class="_root_1o4d9_17 mx_MediaPreviewAccountSetting_Form"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_ToggleSwitch"
+                  class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_ToggleSwitch"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1641,16 +1641,16 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="react-use-id-8"
                     >
                       Allow users to invite you to rooms
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="radix-react-use-id-9"
                     >
                       Your server does not implement this feature.
@@ -1667,7 +1667,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             />
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -1685,10 +1685,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1706,10 +1706,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_SBSSOZDRlzlA"
                     >
                       Show NSFW content
@@ -1720,7 +1720,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -1738,10 +1738,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1760,10 +1760,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_FLEpLCb0jpp6"
                     >
                       Prompt before sending invites to potentially invalid matrix IDs
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
index edab15ae0b..9dbaa827b2 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
@@ -35,7 +35,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
       class="mx_SettingsTab_sections"
     >
       <form
-        class="_root_19upo_16 mx_SetIntegrationManager"
+        class="_root_1o4d9_17 mx_SetIntegrationManager"
         data-testid="mx_SetIntegrationManager"
       >
         <div
@@ -75,10 +75,10 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
           Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -96,10 +96,10 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="react-use-id-1"
             >
               Enable the integration manager
@@ -216,13 +216,13 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                   class="mx_SettingsFieldset_content"
                 >
                   <form
-                    class="_root_19upo_16 mx_IdentityServerPicker"
+                    class="_root_1o4d9_17 mx_IdentityServerPicker"
                   >
                     <div
-                      class="_field_19upo_26"
+                      class="_field_1o4d9_27"
                     >
                       <label
-                        class="_label_19upo_59"
+                        class="_label_1o4d9_60"
                         for="radix-react-use-id-2"
                       >
                         Enter a new identity server
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 5406a2e10b..1e889c333e 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -445,13 +445,13 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
     tabindex="0"
   >
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
@@ -483,7 +483,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         />
       </div>
     </form>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
index 560c4d7720..07e50b5b43 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
@@ -39,13 +39,13 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
               class="mx_SettingsSubsection_content"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -77,10 +77,10 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_vY7Q4uEh9K"
                     >
                       <svg
@@ -98,7 +98,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       Home
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-1"
                     >
                       Home is useful for getting an overview of everything.
@@ -107,13 +107,13 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -144,16 +144,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_38QgU2Pomx"
                     >
                       Show all rooms
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-2"
                     >
                       Show all your rooms in Home, even if they're in a space.
@@ -162,13 +162,13 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -198,16 +198,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_wKpa6hpi3Y"
                     >
                       Rooms outside of a space
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-3"
                     >
                       Group all your rooms that aren't part of a space in one place.
@@ -216,13 +216,13 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -252,10 +252,10 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_EetmBG4yVC"
                     >
                       <svg
@@ -273,7 +273,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       Video rooms and conferences
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-4"
                     >
                       Group all private video rooms and conferences. In conferences you can invite people outside of matrix.
@@ -329,13 +329,13 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
               class="mx_SettingsSubsection_content"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -367,10 +367,10 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_vY7Q4uEh9K"
                     >
                       <svg
@@ -388,7 +388,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       Home
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-1"
                     >
                       Home is useful for getting an overview of everything.
@@ -397,13 +397,13 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -434,16 +434,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_38QgU2Pomx"
                     >
                       Show all rooms
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-2"
                     >
                       Show all your rooms in Home, even if they're in a space.
@@ -452,13 +452,13 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -488,16 +488,16 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_wKpa6hpi3Y"
                     >
                       Rooms outside of a space
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-3"
                     >
                       Group all your rooms that aren't part of a space in one place.
@@ -506,13 +506,13 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -542,10 +542,10 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_EetmBG4yVC"
                     >
                       <svg
@@ -563,7 +563,7 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       Video rooms and conferences
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="react-use-id-4"
                     >
                       Group all private video rooms and conferences.
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
index 743e4c67a6..ff003777e9 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
@@ -108,7 +108,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                 Anyone can join.
               </span>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div>
                   <div
@@ -122,10 +122,10 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -143,16 +143,16 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="react-use-id-1"
                     >
                       Preview space
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="radix-react-use-id-2"
                     >
                       Allow people to preview your space before they join.
@@ -234,13 +234,13 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                     </svg>
                   </div>
                   <form
-                    class="_root_19upo_16"
+                    class="_root_1o4d9_17"
                   >
                     <div
-                      class="_inline-field_19upo_32"
+                      class="_inline-field_1o4d9_33"
                     >
                       <div
-                        class="_inline-field-control_19upo_44"
+                        class="_inline-field-control_1o4d9_45"
                       >
                         <div
                           class="_container_udcm8_10"
@@ -258,16 +258,16 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                         </div>
                       </div>
                       <div
-                        class="_inline-field-body_19upo_38"
+                        class="_inline-field-body_1o4d9_39"
                       >
                         <label
-                          class="_label_19upo_59"
+                          class="_label_1o4d9_60"
                           for="react-use-id-3"
                         >
                           Publish this room to the public in matrix.org's room directory?
                         </label>
                         <span
-                          class="_message_19upo_85 _help-message_19upo_91"
+                          class="_message_1o4d9_86 _help-message_1o4d9_92"
                           id="radix-react-use-id-4"
                         >
                           You must have permission to set the main address to publish this room.
@@ -486,13 +486,13 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                 Anyone can join.
               </span>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -510,16 +510,16 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="react-use-id-1"
                     >
                       Preview space
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
                       id="radix-react-use-id-2"
                     >
                       Allow people to preview your space before they join.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3c6830d33a..ec11f432fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -212,11 +212,11 @@ catalogs:
       specifier: 1.60.0
       version: 1.60.0
     '@vector-im/compound-design-tokens':
-      specifier: 10.1.1
-      version: 10.1.1
+      specifier: 10.2.1
+      version: 10.2.1
     '@vector-im/compound-web':
-      specifier: 9.3.0
-      version: 9.3.0
+      specifier: 9.4.1
+      version: 9.4.1
     '@vitest/coverage-v8':
       specifier: 4.1.7
       version: 4.1.7
@@ -532,10 +532,10 @@ importers:
         version: 1.0.2
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 10.1.1(@types/react@19.2.14)(react@19.2.6)
+        version: 10.2.1(@types/react@19.2.14)(react@19.2.6)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.1(@types/react@19.2.14)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 9.4.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.2.1(@types/react@19.2.14)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@vector-im/matrix-wysiwyg':
         specifier: 2.40.0
         version: 2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.6)
@@ -1204,7 +1204,7 @@ importers:
         version: 1.16.0
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 10.1.1(@types/react@19.2.14)(react@19.2.6)
+        version: 10.2.1(@types/react@19.2.14)(react@19.2.6)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
@@ -1325,7 +1325,7 @@ importers:
         version: 8.59.4(eslint@8.57.1)(typescript@6.0.3)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.1(@types/react@19.2.14)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 9.4.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.2.1(@types/react@19.2.14)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@vitest/browser-playwright':
         specifier: ^4.0.17
         version: 4.1.7(playwright@1.60.0)(vite@8.0.14(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1(postcss@8.5.15))(terser@5.48.0)(yaml@2.8.4))(vitest@4.1.7)
@@ -6204,8 +6204,8 @@ packages:
   '@upsetjs/venn.js@2.0.0':
     resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
 
-  '@vector-im/compound-design-tokens@10.1.1':
-    resolution: {integrity: sha512-f2rdTilbPeOjrX7Mh9iTPcp5VergY7JLLWzKVjwMvpT0wtoFKwn59D1hwX2QInpiG70QTCxEdQFYLxQKvJQ74Q==}
+  '@vector-im/compound-design-tokens@10.2.1':
+    resolution: {integrity: sha512-N8to81u7qVYRgQiMr8Fr1mM+s6ZHRsiGpXLFJiHTP4YDyc7vXW6MBUVuUaUGFcbmxq76lqPaZt2AsnD2barn6Q==}
     peerDependencies:
       '@types/react': ^19.2.10
       react: ^17 || ^18 || ^19.0.0
@@ -6215,8 +6215,8 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@9.3.0':
-    resolution: {integrity: sha512-Elu4Uw8RbfP6JaudQYkVibALYT6qpwubqfKhteTxIPWBWzSYM+P5T+B1uX+ra+grNcXwXUt2xfMxpqYQsAHgYA==}
+  '@vector-im/compound-web@9.4.1':
+    resolution: {integrity: sha512-A1fuszsBSvdP1RDid1T6Ya4sr3A7LxQWDlIViK6LqfIMtjw9/JNgCo4z2n182DR8o88FsuRji+pmUhUVLzx2gQ==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
@@ -19058,12 +19058,12 @@ snapshots:
       d3-selection: 3.0.0
       d3-transition: 3.0.1(d3-selection@3.0.0)
 
-  '@vector-im/compound-design-tokens@10.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@vector-im/compound-design-tokens@10.2.1(@types/react@19.2.14)(react@19.2.6)':
     optionalDependencies:
       '@types/react': 19.2.14
       react: 19.2.6
 
-  '@vector-im/compound-web@9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.1(@types/react@19.2.14)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@vector-im/compound-web@9.4.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.2.1(@types/react@19.2.14)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
     dependencies:
       '@floating-ui/react': 0.27.17(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@fontsource/inconsolata': 5.2.8
@@ -19074,7 +19074,7 @@ snapshots:
       '@radix-ui/react-progress': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
       '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.6)
-      '@vector-im/compound-design-tokens': 10.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@vector-im/compound-design-tokens': 10.2.1(@types/react@19.2.14)(react@19.2.6)
       classnames: 2.5.1
       react: 19.2.6
       vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 3772fb30c0..7bb5a68f17 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -18,8 +18,8 @@ catalog:
     "@playwright/test": 1.60.0
     "playwright-core": 1.60.0
     # Compound
-    "@vector-im/compound-design-tokens": 10.1.1
-    "@vector-im/compound-web": 9.3.0
+    "@vector-im/compound-design-tokens": 10.2.1
+    "@vector-im/compound-web": 9.4.1
     # i18n
     matrix-web-i18n: 3.6.0
     # fonts