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>

res/css/_components.pcss

@@ -144,6 +144,7 @@
 @import "./views/dialogs/_JoinRuleDropdown.pcss";
 @import "./views/dialogs/_LeaveSpaceDialog.pcss";
 @import "./views/dialogs/_LocationViewDialog.pcss";
+@import "./views/dialogs/_LogoutDialog.pcss";
 @import "./views/dialogs/_ManageRestrictedJoinRuleDialog.pcss";
 @import "./views/dialogs/_MessageEditHistoryDialog.pcss";
 @import "./views/dialogs/_ModalWidgetDialog.pcss";

res/css/views/dialogs/_CreateRoomDialog.pcss

@@ -22,6 +22,7 @@ limitations under the License.
         font-weight: var(--cpd-font-weight-semibold);
         cursor: pointer;
         color: $accent;
+        width: fit-content;
 
         /* list-style doesn't do it for webkit */
         &::-webkit-details-marker {

res/css/views/dialogs/_LogoutDialog.pcss

@@ -0,0 +1,19 @@
+/*
+Copyright 2023 Manan Sadana <manancodes.dev@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_LogoutDialog_ExportKeyAdvanced {
+    width: fit-content;
+}

res/css/views/room_settings/_AliasSettings.pcss

@@ -19,6 +19,7 @@ limitations under the License.
     color: $accent;
     font-weight: var(--cpd-font-weight-semibold);
     list-style: none;
+    width: fit-content;
 
     /* list-style doesn't do it for webkit */
     &::-webkit-details-marker {

res/css/views/settings/_CrossSigningPanel.pcss

@@ -38,3 +38,7 @@ limitations under the License.
         margin-inline-end: 10px;
     }
 }
+
+.mx_CrossSigningPanel_advanced {
+    width: fit-content;
+}

res/css/views/settings/_SecureBackupPanel.pcss

@@ -46,3 +46,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_SecureBackupPanel_advanced {
+    width: fit-content;
+}

res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss

@@ -15,17 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_HelpUserSettingsTab {
+.mx_HelpUserSettingsTab_accessTokenDetails {
-    code {
+    width: fit-content;
-        word-break: break-all;
-        user-select: all;
-    }
-
-    details {
-        margin: $spacing-16 auto;
-
-        summary {
-            margin-bottom: $spacing-16;
-        }
-    }
 }

src/components/views/dialogs/LogoutDialog.tsx

@@ -195,7 +195,7 @@ export default class LogoutDialog extends React.Component<IProps, IState> {
                     <button onClick={this.onLogoutConfirm}>{_t("auth|logout_dialog|skip_key_backup")}</button>
                 </DialogButtons>
                 <details>
-                    <summary>{_t("common|advanced")}</summary>
+                    <summary className="mx_LogoutDialog_ExportKeyAdvanced">{_t("common|advanced")}</summary>
                     <p>
                         <button onClick={this.onExportE2eKeysClicked}>{_t("auth|logout_dialog|megolm_export")}</button>
                     </p>

src/components/views/settings/CrossSigningPanel.tsx

@@ -258,7 +258,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
             <>
                 {summarisedStatus}
                 <details>
-                    <summary>{_t("common|advanced")}</summary>
+                    <summary className="mx_CrossSigningPanel_advanced">{_t("common|advanced")}</summary>
                     <table className="mx_CrossSigningPanel_statusList">
                         <tr>
                             <th scope="row">{_t("settings|security|cross_signing_public_keys")}</th>

src/components/views/settings/SecureBackupPanel.tsx

@@ -384,7 +384,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
                 <SettingsSubsectionText>{_t("settings|security|backup_keys_description")}</SettingsSubsectionText>
                 {statusDescription}
                 <details>
-                    <summary>{_t("common|advanced")}</summary>
+                    <summary className="mx_SecureBackupPanel_advanced">{_t("common|advanced")}</summary>
                     <table className="mx_SecureBackupPanel_statusList">
                         <tr>
                             <th scope="row">{_t("settings|security|backup_key_stored_status")}</th>

src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx

@@ -349,7 +349,9 @@ export default class HelpUserSettingsTab extends React.Component<IProps, IState>
                         )}
                         <SettingsSubsectionText>
                             <details>
-                                <summary>{_t("common|access_token")}</summary>
+                                <summary className="mx_HelpUserSettingsTab_accessTokenDetails">
+                                    {_t("common|access_token")}
+                                </summary>
                                 <b>{_t("setting|help_about|access_token_detail")}</b>
                                 <CopyableText getTextToCopy={() => this.context.getAccessToken()}>
                                     {this.context.getAccessToken()}

test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap

@@ -66,7 +66,9 @@ exports[`LogoutDialog Prompts user to connect backup if there is a backup on the
         </span>
       </div>
       <details>
-        <summary>
+        <summary
+          class="mx_LogoutDialog_ExportKeyAdvanced"
+        >
           Advanced
         </summary>
         <p>
@@ -151,7 +153,9 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the
         </span>
       </div>
       <details>
-        <summary>
+        <summary
+          class="mx_LogoutDialog_ExportKeyAdvanced"
+        >
           Advanced
         </summary>
         <p>

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