Fix: <detail> HTML elements clickable area too wide.

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 <[email protected]>
+
+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/tabs/user/_HelpUserSettingsTab.pcss

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

src/components/views/dialogs/LogoutDialog.tsx

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

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

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

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

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