[Bug]: Custom emojis do not work in profile fields

[david-swift]

Describe the bug

Custom emojis are not displayed as emojis in the labels of fields of a profile.

Steps To Reproduce

View a Mastodon profile with custom emojis in the fields (e.g. @ErikUden@mastodon.de).

Logs and/or Screenshots

Tuba:

Web view:

Instance Backend

Mastodon

Operating System

Fedora 40

Package

Flatpak

Troubleshooting information

No response

Additional Context

No response

[GeopJr]

Nice catch! Took the opportunity to redesign it slightly so they are aligned vertically as some values can be way too long (plus make them selectable)

[david-swift]

Nice! I really like that they are selectable now! The "Scale Custom Emojis on Hover" option doesn't seem to work with the fields currently though.

I played around with the design a bit and IMO, the fields would look better and more GNOMEy with a property row design instead of making both the label and value having the same weight.

[david-swift]

[david-swift]

@GeopJr to make sure you receive a notification :)

[GeopJr]

Sounds good to me!

Some follow ups:

• Do we make it dim label? Both unicode and custom emojis will be greyed out. The alternative is setting text color to grey-ish but that might have other a11y issues with high contrast and whatnot
• Do we place the checkmark in the start or the end?

cc: @bertob @bragefuglseth if you have a second

[bertob]

I'd definitely not move the checks to the left, that looks weird. As for the row layout, I'd be interested in trying something more custom and compact than just regular full-width rows.

Ideally I'd do something like Elk or Phanpy with more compact, wrapping rows or pills, but AFAIK we don't have a good wrapping layout widget. Maybe two rows next to each other could work, e.g. like this?

Phanpy:

Elk:

[GeopJr]

I'm mostly leaning towards the phanpy approach as fields have pretty large limits:

Mastodon:

Elk (overflows):

Phanpy:

I think FlowBoxes might allow us to replicate the Phanpy behavior of 'if they fit, use two columns, if they don't, use one' and we could also force it to use one column on narrow mode

[bertob]

The Phanpy approach probably works best, yeah. AFAIK the problem with flowboxes was that they require children to have uniform sizes, but yeah, maybe the 1/2 column idea would be good enough in practice.

[GeopJr]

There's some edge cases to check but here's the final:

On narrow mode it uses 1 column while on the others it uses 2:

Screencast from 2024-04-15 03-12-39.webm

Flowbox will automatically switch to 1 child per row if they don't fit:

Odd amount of children is also handled as expected, including the borders:

An edge case that needs fixing might be this one, where the children are not homogeneous but flowbox's homogeneous is both horizontal and vertical which is not nice:

Is there anything else that should change design wise?