From 7dc40e6613c5b3066adc30de176792d970b0de18 Mon Sep 17 00:00:00 2001 From: Manan Sadana Date: Thu, 12 Oct 2023 14:20:49 +0530 Subject: [PATCH] Fix: 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 Co-authored-by: Florian Duros --- res/css/_components.pcss | 1 + res/css/views/dialogs/_CreateRoomDialog.pcss | 1 + res/css/views/dialogs/_LogoutDialog.pcss | 19 +++++++++++++++++++ .../views/room_settings/_AliasSettings.pcss | 1 + .../views/settings/_CrossSigningPanel.pcss | 4 ++++ .../views/settings/_SecureBackupPanel.pcss | 4 ++++ .../tabs/user/_HelpUserSettingsTab.pcss | 15 ++------------- src/components/views/dialogs/LogoutDialog.tsx | 2 +- .../views/settings/CrossSigningPanel.tsx | 2 +- .../views/settings/SecureBackupPanel.tsx | 2 +- .../tabs/user/HelpUserSettingsTab.tsx | 4 +++- .../__snapshots__/LogoutDialog-test.tsx.snap | 8 ++++++-- .../SecureBackupPanel-test.tsx.snap | 8 ++++++-- .../SecurityUserSettingsTab-test.tsx.snap | 8 ++++++-- 14 files changed, 56 insertions(+), 23 deletions(-) create mode 100644 res/css/views/dialogs/_LogoutDialog.pcss diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 4414a422d5..4297b9f190 100644 --- a/res/css/_components.pcss +++ b/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"; diff --git a/res/css/views/dialogs/_CreateRoomDialog.pcss b/res/css/views/dialogs/_CreateRoomDialog.pcss index dabddf01cf..def912f253 100644 --- a/res/css/views/dialogs/_CreateRoomDialog.pcss +++ b/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 { diff --git a/res/css/views/dialogs/_LogoutDialog.pcss b/res/css/views/dialogs/_LogoutDialog.pcss new file mode 100644 index 0000000000..3c07674971 --- /dev/null +++ b/res/css/views/dialogs/_LogoutDialog.pcss @@ -0,0 +1,19 @@ +/* +Copyright 2023 Manan Sadana + +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; +} diff --git a/res/css/views/room_settings/_AliasSettings.pcss b/res/css/views/room_settings/_AliasSettings.pcss index cd38416292..8cd081ebe0 100644 --- a/res/css/views/room_settings/_AliasSettings.pcss +++ b/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 { diff --git a/res/css/views/settings/_CrossSigningPanel.pcss b/res/css/views/settings/_CrossSigningPanel.pcss index 1b5f7d1f74..c00c9dfdcd 100644 --- a/res/css/views/settings/_CrossSigningPanel.pcss +++ b/res/css/views/settings/_CrossSigningPanel.pcss @@ -38,3 +38,7 @@ limitations under the License. margin-inline-end: 10px; } } + +.mx_CrossSigningPanel_advanced { + width: fit-content; +} diff --git a/res/css/views/settings/_SecureBackupPanel.pcss b/res/css/views/settings/_SecureBackupPanel.pcss index 5ff3cba404..38250e9776 100644 --- a/res/css/views/settings/_SecureBackupPanel.pcss +++ b/res/css/views/settings/_SecureBackupPanel.pcss @@ -46,3 +46,7 @@ limitations under the License. } } } + +.mx_SecureBackupPanel_advanced { + width: fit-content; +} diff --git a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss b/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss index c03de9f36c..b5e5f39b07 100644 --- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss +++ b/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; } diff --git a/src/components/views/dialogs/LogoutDialog.tsx b/src/components/views/dialogs/LogoutDialog.tsx index b316682a79..f6d8af0c89 100644 --- a/src/components/views/dialogs/LogoutDialog.tsx +++ b/src/components/views/dialogs/LogoutDialog.tsx @@ -195,7 +195,7 @@ export default class LogoutDialog extends React.Component {
- {_t("common|advanced")} + {_t("common|advanced")}

diff --git a/src/components/views/settings/CrossSigningPanel.tsx b/src/components/views/settings/CrossSigningPanel.tsx index 93b133301c..6588690254 100644 --- a/src/components/views/settings/CrossSigningPanel.tsx +++ b/src/components/views/settings/CrossSigningPanel.tsx @@ -258,7 +258,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> { <> {summarisedStatus}
- {_t("common|advanced")} + {_t("common|advanced")} diff --git a/src/components/views/settings/SecureBackupPanel.tsx b/src/components/views/settings/SecureBackupPanel.tsx index 1a63164106..4a379508c7 100644 --- a/src/components/views/settings/SecureBackupPanel.tsx +++ b/src/components/views/settings/SecureBackupPanel.tsx @@ -384,7 +384,7 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> { {_t("settings|security|backup_keys_description")} {statusDescription}
- {_t("common|advanced")} + {_t("common|advanced")}
{_t("settings|security|cross_signing_public_keys")}
diff --git a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx index 475f6ee00d..1b4ed9694e 100644 --- a/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx @@ -349,7 +349,9 @@ export default class HelpUserSettingsTab extends React.Component )}
- {_t("common|access_token")} + + {_t("common|access_token")} + {_t("setting|help_about|access_token_detail")} this.context.getAccessToken()}> {this.context.getAccessToken()} diff --git a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap b/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap index 0e4a2763a3..bac31d1d81 100644 --- a/test/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap +++ b/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
- + Advanced

@@ -151,7 +153,9 @@ exports[`LogoutDialog Prompts user to set up backup if there is no backup on the

- + Advanced

diff --git a/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap index 47a6c83f79..fa3a5fbb91 100644 --- a/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/SecureBackupPanel-test.tsx.snap @@ -13,7 +13,9 @@ exports[` handles error fetching backup 1`] = ` Unable to load key backup status

- + Advanced
{_t("settings|security|backup_key_stored_status")}
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.
- + Advanced
renders security section 1`] = ` />
- + Advanced
renders security section 1`] = ` />
- + Advanced