Fix: <detail> HTML elements clickable area too wide. (#11666)

* Fix: Details element wide clickable area

* LogoutDialog-test.tsx snapshot updated

* Fixed open state clickable area for dropdowns

* Advanced changed to advanced

---------

Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
Co-authored-by: Florian Duros <florianduros@element.io>

test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap

@@ -13,7 +13,9 @@ exports[`<SecureBackupPanel /> handles error fetching backup 1`] = `
     Unable to load key backup status
   </div>
   <details>
-    <summary>
+    <summary
+      class="mx_SecureBackupPanel_advanced"
+    >
       Advanced
     </summary>
     <table
@@ -89,7 +91,9 @@ exports[`<SecureBackupPanel /> suggests connecting session to key backup when ba
     Connect this session to key backup before signing out to avoid losing any keys that may only be on this session.
   </div>
   <details>
-    <summary>
+    <summary
+      class="mx_SecureBackupPanel_advanced"
+    >
       Advanced
     </summary>
     <table

test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap

@@ -51,7 +51,9 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                 />
               </div>
               <details>
-                <summary>
+                <summary
+                  class="mx_SecureBackupPanel_advanced"
+                >
                   Advanced
                 </summary>
                 <table
@@ -165,7 +167,9 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                 />
               </div>
               <details>
-                <summary>
+                <summary
+                  class="mx_CrossSigningPanel_advanced"
+                >
                   Advanced
                 </summary>
                 <table