Add padding for close button in settings dialog

[gefgu]

Add padding for close button in settings dialog. It maintains the alignment with the heading, maintains the original size of the "X" mark and follows Apple's human interface guidelines of 44x44 points for touch targets.

Fixes element-hq/element-web#22915

Signed-off-by: gefgu [email protected]

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)

Type: [enhancement/defect/task]

Before:

After:

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Add padding for close button in settings dialog (#9202). Fixes Touch area to close the settings dialog is too small. element-hq/element-web#22915. Contributed by @gefgu.

[SimonBrandner]

It doesn't seem right the button is not in the center of the clickable area...

[gefgu]

I didn't let the button in the center of the clickable area because it would lose the alignment with the heading, but if you prefer it to the center, I will work on it.

[SimonBrandner]

I've requested a review from the design team to figure out how this should actually look/behave

[gefgu]

Thanks for the quick feedback! When they figure out, I'm happy to help.

[janogarcia]

I'd suggest using a target area of 32x32px for the desktop context.

• It's a nice trade off between not taking way too much space and complying with upcoming WCAG 2.2 recommendation for AA level (24x24px).
• I'd only recommend using 44x44px when in a touch context (mobile viewport, webview, touch input...), or trying to comply with WCAG 2.2 AAA.

[janogarcia]

Please refer to my previous comment.

[janogarcia]

As for the icon alignment and button placement I'd suggest, for now:

• Keep the close icon centered within the 32x32px target area.
• Place the 32x32px target area at 24px from the the modal window edges.

[gefgu]

I've updated the code following @janogarcia suggestion.

The close icon is centered within the 32x32 target area:

And the target area is at 24px from the the modal window edges:

I hope this solve the issue. What do you think @SimonBrandner?

[SimonBrandner]

LGTM codewise

[janogarcia]

It seems this PR is introducing (maybe reintroducing an old one?) a different close icon than the one we currently use for modal windows.

[MidhunSureshR]

The playwright tests are failing due to a difference in the size of the close icons - https://e2e-9202--matrix-react-sdk.netlify.app/#?testId=e020cd10d103304ed79f-bd3d48af8331ff4cee52038c2392796d4a22.
I don't think this PR intended to change the size of the close button in the first place.

[MidhunSureshR]

Sorry for letting this get stale, please see #9202 (comment)

[MidhunSureshR]

Closing this for now, feel free to reopen if you want to make the changes.