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

manancodes · 2023-09-25T18:49:55Z

Checklist

Tests written for new code (and old code if feasible)
Linter and other CI checks pass
Sign-off given on the changes (see [CONTRIBUTING.md] (https://github.com/matrix-org/matrix-react-sdk/blob/develop/CONTRIBUTING.md))

Fixes element-hq/element-web#25454
Signed-off-by: Manan Sadana manancodes.dev@gmail.com

I fixed it in some other places too, wherever I could test it.
Also some code has been removed from res/css/views/settings/tabs/user/_HelpUserSettingsTab.pcss which was not being used.

This was the behaviour before the fix:
Clickable area is too wide

And this is the behaviour after the fix:
On the text area is clicakable.

Type: defect

Here's what your changelog entry will look like:

🐛 Bug Fixes

Fix: HTML elements clickable area too wide. (#11666). Fixes <detail> HTML elements on settings tabs are clickable over the whole row element-hq/element-web#25454. Contributed by @manancodes.

into manancodes/Details_element_clickable_area_fix

…_fix

manancodes · 2023-10-05T19:37:04Z

All checks have passed. Do you want me to change anything in the code?

…_fix

florianduros

Hi!

First of all, thank you for your contribution. I am sorry for the review delay.

I tested, it works when the clickable element is not toggled but when it's toggled, the area is still too wide:

…://github.com/manancodes/matrix-react-sdk into manancodes/Details_element_clickable_area_fix

manancodes · 2023-10-11T17:05:57Z

I have fixed the width for the open state as well along with adding similar fix at a few more places.

…_fix

manancodes · 2023-10-11T17:16:35Z

Some tests were failing because somehow "common|advanced" was changed to "common|Advanced" . Most probably this happend during the merge. Fixed now

florianduros

Great thank you!

@stefanceriu

Changes in [1.11.47](https://github.com/vector-im/element-web/releases/tag/v1.11.47) (2023-10-24) ================================================================================================= ## 🦖 Deprecations * Deprecate customisations in favour of Module API ([\#25736](element-hq/element-web#25736)). Fixes #25733. ## ✨ Features * element-hq/element-x-ios/issues/1824 - Convert the apple-app-site-association file to a newer format… ([\#26307](element-hq/element-web#26307)). Contributed by @stefanceriu. * Iterate `io.element.late_event` decoration ([\#11760](matrix-org/matrix-react-sdk#11760)). Fixes #26384. * Render timeline separator for late event groups ([\#11739](matrix-org/matrix-react-sdk#11739)). * OIDC: revoke tokens on logout ([\#11718](matrix-org/matrix-react-sdk#11718)). Fixes #25394. Contributed by @kerryarchibald. * Show `io.element.late_event` in MessageTimestamp when known ([\#11733](matrix-org/matrix-react-sdk#11733)). * Show all labs flags if developerMode enabled ([\#11746](matrix-org/matrix-react-sdk#11746)). Fixes #24571 and #8498. * Use Compound tooltips on MessageTimestamp to improve UX of date time discovery ([\#11732](matrix-org/matrix-react-sdk#11732)). Fixes #25913. * Consolidate 4s passphrase input fields and use stable IDs ([\#11743](matrix-org/matrix-react-sdk#11743)). Fixes #26228. * Disable upgraderoom command without developer mode enabled ([\#11744](matrix-org/matrix-react-sdk#11744)). Fixes #17620. * Avoid rendering app download buttons if disabled in config ([\#11741](matrix-org/matrix-react-sdk#11741)). Fixes #26309. * OIDC: refresh tokens ([\#11699](matrix-org/matrix-react-sdk#11699)). Fixes #25839. Contributed by @kerryarchibald. * OIDC: register ([\#11727](matrix-org/matrix-react-sdk#11727)). Fixes #25393. Contributed by @kerryarchibald. * Use stable get_login_token and remove unstable MSC3882 support ([\#11001](matrix-org/matrix-react-sdk#11001)). Contributed by @hughns. ## 🐛 Bug Fixes * Set max size for Element logo in search warning ([\#11779](matrix-org/matrix-react-sdk#11779)). Fixes #26408. * Avoid error when DMing oneself ([\#11754](matrix-org/matrix-react-sdk#11754)). Fixes #7242. * Fix: Message shield alignment is not right. ([\#11703](matrix-org/matrix-react-sdk#11703)). Fixes #26142. Contributed by @manancodes. * fix logging full event ([\#11755](matrix-org/matrix-react-sdk#11755)). Fixes #26376. * OIDC: use delegated auth account URL from `OidcClientStore` ([\#11723](matrix-org/matrix-react-sdk#11723)). Fixes #26305. Contributed by @kerryarchibald. * Fix: Members list shield alignment is not right. ([\#11700](matrix-org/matrix-react-sdk#11700)). Fixes #26261. Contributed by @manancodes. * Fix: <detail> HTML elements clickable area too wide. ([\#11666](matrix-org/matrix-react-sdk#11666)). Fixes #25454. Contributed by @manancodes. * Fix untranslated headings in the devtools dialog ([\#11734](matrix-org/matrix-react-sdk#11734)). * Fixes invite dialog alignment and pill color contrast ([\#11722](matrix-org/matrix-react-sdk#11722)). Contributed by @gabrc52. * Prevent select element in General settings overflowing in a room with very long room-id ([\#11597](matrix-org/matrix-react-sdk#11597)). Contributed by @ABHIXIT2. * Fix: Clicking on members pile does nothing. ([\#11657](matrix-org/matrix-react-sdk#11657)). Fixes #26164. Contributed by @manancodes. * Fix: Wierd shadow below room avatar in dark mode. ([\#11678](matrix-org/matrix-react-sdk#11678)). Fixes #26153. Contributed by @manancodes. * Fix start_sso / start_cas URLs failing to redirect to a authentication prompt ([\#11681](matrix-org/matrix-react-sdk#11681)). Contributed by @Half-Shot. Changes in [1.11.46](https://github.com/vector-im/element-web/releases/tag/v1.11.46) (2023-10-10) ================================================================================================= ## ✨ Features * Use .well-known to discover a default rendezvous server for use with Sign in with QR ([\#11655](matrix-org/matrix-react-sdk#11655)). Contributed by @hughns. * Message layout will update according to the selected style ([\#10170](matrix-org/matrix-react-sdk#10170)). Fixes #21782. Contributed by @manancodes. * Implement MSC4039: Add an MSC for a new Widget API action to upload files into the media repository ([\#11311](matrix-org/matrix-react-sdk#11311)). Contributed by @dhenneke. * Render space pills with square corners to match new avatar ([\#11632](matrix-org/matrix-react-sdk#11632)). Fixes #26056. * Linkify room topic ([\#11631](matrix-org/matrix-react-sdk#11631)). Fixes #26185. * Show knock rooms in the list ([\#11573](matrix-org/matrix-react-sdk#11573)). Contributed by @maheichyk. ## 🐛 Bug Fixes * Bump matrix-web-i18n dependency to 3.1.3 ([\#26287](element-hq/element-web#26287)) * Fix: Avatar shrinks with long names ([\#11698](matrix-org/matrix-react-sdk#11698)). Fixes #26252. Contributed by @manancodes. * Update custom translations to support nested fields in structured JSON ([\#11685](matrix-org/matrix-react-sdk#11685)). * Fix: Edited message remove button is hard to reach. ([\#11674](matrix-org/matrix-react-sdk#11674)). Fixes #24917. Contributed by @manancodes. * Fix: Theme selector radio button not aligned in center with the text ([\#11676](matrix-org/matrix-react-sdk#11676)). Fixes #25460. Contributed by @manancodes. * Fix: Unread notification dot aligned ([\#11658](matrix-org/matrix-react-sdk#11658)). Fixes #25285. Contributed by @manancodes. * Fix: sync intentional mentions push rules with legacy rules ([\#11667](matrix-org/matrix-react-sdk#11667)). Fixes #26227. Contributed by @kerryarchibald. * Revert "Fix regression around FacePile with overflow (#11527)" ([\#11634](matrix-org/matrix-react-sdk#11634)). Fixes #26209. * Fix: Alignment Fixed ([\#11648](matrix-org/matrix-react-sdk#11648)). Fixes #26169. Contributed by @manancodes. * Fix: onFinished added which closes the menu ([\#11647](matrix-org/matrix-react-sdk#11647)). Fixes #25556. Contributed by @manancodes. * Don't start key backups when opening settings ([\#11640](matrix-org/matrix-react-sdk#11640)). * Fix add to space avatar text centering ([\#11643](matrix-org/matrix-react-sdk#11643)). Fixes #26154. * fix avatar styling in lightbox ([\#11641](matrix-org/matrix-react-sdk#11641)). Fixes #26196.

Fix: Details element wide clickable area

f98cefe

manancodes requested a review from a team as a code owner September 25, 2023 18:49

manancodes requested review from florianduros and SimonBrandner September 25, 2023 18:49

github-actions bot added Z-Community-PR Issue is solved by a community member's PR T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems labels Sep 25, 2023

Merge branch 'develop' of https://github.com/manancodes/matrix-react-sdk

b13d79d

into manancodes/Details_element_clickable_area_fix

github-actions bot deployed to Netlify September 25, 2023 19:12 View deployment

Manan Sadana and others added 2 commits September 27, 2023 11:30

LogoutDialog-test.tsx snapshot updated

3342fc2

Merge branch 'develop' into manancodes/Details_element_clickable_area…

6e98cfc

…_fix

github-actions bot deployed to Netlify September 27, 2023 06:08 View deployment

Merge branch 'develop' into manancodes/Details_element_clickable_area…

4802094

…_fix

github-actions bot deployed to Netlify October 3, 2023 09:13 View deployment

Merge branch 'develop' into manancodes/Details_element_clickable_area…

0a78c25

…_fix

github-actions bot deployed to Netlify October 6, 2023 12:22 View deployment

florianduros suggested changes Oct 6, 2023

View reviewed changes

manancodes added 2 commits October 11, 2023 22:32

Fixed open state clickable area for dropdowns

9e51148

Merge branch 'manancodes/Details_element_clickable_area_fix' of https…

7353cf8

…://github.com/manancodes/matrix-react-sdk into manancodes/Details_element_clickable_area_fix

manancodes added 2 commits October 11, 2023 22:37

Merge branch 'develop' into manancodes/Details_element_clickable_area…

ccbe9ff

…_fix

Advanced changed to advanced

fc37aaf

github-actions bot deployed to Netlify October 11, 2023 17:19 View deployment

florianduros self-requested a review October 12, 2023 08:49

florianduros approved these changes Oct 12, 2023

View reviewed changes

florianduros added this pull request to the merge queue Oct 12, 2023

florianduros removed this pull request from the merge queue due to a manual request Oct 12, 2023

florianduros added this pull request to the merge queue Oct 12, 2023

Merged via the queue into matrix-org:develop with commit 7dc40e6 Oct 12, 2023
16 checks passed

manancodes deleted the manancodes/Details_element_clickable_area_fix branch October 12, 2023 09:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

manancodes commented Sep 25, 2023 •

edited by github-actions bot

Loading

manancodes commented Oct 5, 2023

florianduros left a comment •

edited

Loading

manancodes commented Oct 11, 2023

manancodes commented Oct 11, 2023

florianduros left a comment

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

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

Conversation

manancodes commented Sep 25, 2023 • edited by github-actions bot Loading

Checklist

🐛 Bug Fixes

manancodes commented Oct 5, 2023

florianduros left a comment • edited Loading

Choose a reason for hiding this comment

manancodes commented Oct 11, 2023

manancodes commented Oct 11, 2023

florianduros left a comment

Choose a reason for hiding this comment

manancodes commented Sep 25, 2023 •

edited by github-actions bot

Loading

florianduros left a comment •

edited

Loading