Increase touch area of close button in settings dialog

[BalanaguYashwanth]

Resolved bug by increasing touch area of close button in settings dialog

Checklist

• [ ] Tests written for new code (and old code if feasible)
• [x] Linter and other CI checks pass
• [x] Sign-off given on the changes (see CONTRIBUTING.md)

Notes: Increased touch area and padding for close button under the settings dialog and maintaining well in terms of design and colour which suitable exactly for the settings dialog window.

Fixes https://github.com/vector-im/element-web/issues/22915 Closes https://github.com/matrix-org/matrix-react-sdk/pull/9202

Type: [enhancement/defect/task]

Before -

After -

Fixes Increased touch area and padding for close button under the settings dialog and maintaining well in terms of design and colour which suitable exactly for the settings dialog window. It fixes https Contributed by @BalanaguYashwanth

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Increased touch area and padding for close button under the settings dialog and maintaining well in terms of design and colour which suitable exactly for the settings dialog window. (#10145). Fixes vector-im/element-web#22915. Contributed by @BalanaguYashwanth.

[BalanaguYashwanth]

Hello @gsouquet,

Thanks for suggestion, I will check on it.

[BalanaguYashwanth]

Hey @gsouquet,

I added to css what code you suggested but touch area is not working as expected, can you check from your side once.

Mainly i see CSS and HTML code for that close button is not structured well then i changed it. You can check demo in local of my PR you will definitely see increased touch area and aligned CSS along with HTML in UI

[BalanaguYashwanth]

Hello,

Anyone can help me out because @gsouquet, suggested some changes but when i tried, those are not working on UI, If anyone can guide me in some direction, so that i can improve my PR but existing PR you won't see any problems with it.

But still if you need to improve let me know...

[BalanaguYashwanth]

Hey @gsouquet ,

Hope you are doing well, Can i expect any feedback.

[BalanaguYashwanth]

hey thanks for your reply, i am working on to match your solution because unlike other elements to add touch area, this element behaviour in different manner when applying css, i didn't stoped yet.

Working on it, soon will raise with PR with updated code, Anything you want to update me, You can update...

[BalanaguYashwanth]

Hello @gsouquet,

Updated the css code please look once for increase touch area for cancel button

[BalanaguYashwanth]

Hello @gsouquet,

I updated based on your inputs, If you review then it will be great

[dbkr]

I'm going to close this as it hasn't had any activity. Feel free to re-open if you (or anyone) wants to keep it moving forward.