Stop URl preview from covering message box

[edent]

Fixes #23874 by adding a bit of padding.

1em should be sufficient to prevent the browser's URl preview from covering the entry box.

Before

After

Checklist

• Tests written for new code (and old code if feasible).
• New or updated public/exported symbols have accurate TSDoc documentation.
• Linter and other CI checks pass.
• I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

[ara4n]

see also #29213

[florianduros]

@edent Hi, thanks for the contribution!

We checked with our design team and we want to go instead with 8px. With char likes g, f, j etc we want more space to make it breathe more.

Also, we are using our design system tokens for spacing. (Old components like this one were written before we moved to a design system)

After that, the playwright tests need to be updated since the UI has changed.
Thank you and let me know if you need help.

[florianduros]

Suggested change

	padding-bottom: 1em;
	padding-bottom: var(--cpd-space-2x);

[edent]

Are you sure that 8px is a suitable value? Not everyone's OS uses 8px as the height of characters - that's why I specifically chose an em unit.

Both Slack and Discord uses 24px for its padding between text entry and the bottom of the screen.

That said, this is your codebase, please proceed as you see fit.

[florianduros]

I switch to a bigger font size and the composer component grows in a way as it doesn't overflow over the new padding:

With 1em:

I think we want to stick on var(--cpd-space-2x)

[t3chguy]

I switch to a bigger font size and the composer component grows in a way as it doesn't overflow over the new padding:

Right, but try increasing your browser font size, that'll make the url tooltip larger and overlap again.

[florianduros]

@t3chguy Good point but if you change the font size in the user settings, the padding becomes enormous with em:

[edent]

I just wanted to report the bug. I'll unsubscribe now. Feel free to fix it in whatever way makes sense for your codebase.

[florianduros]

After internal discussion with the team we will stay with your solution of 1em. We will favorise the font size settings of the browser instead of element font size settings (accessibility matter).