Add dynamically resizing label with highlight, for adaptively filling up horizontal space

[csillag]

This PR adds:

• Level 1: cutAroundMatch(): utility function for getting a fixed-length a part of a text string which contains the match to the pattern (if any)
• Level 2: HighlightedTrimmedText: component that takes a text and a search pattern, and displays the text, with the matching part (if any) highlighted, the whole thing trimmed to a specific length around the highlight. (Or the beginning if there is no match.) This uses cutAroundMatch().
• Utility: AdaptiveDynamicTrimmer: a component which can display content, dynamically filling up the available space until scrolling/overflow happens. The dynamic part in name references to the fact that it expects a function prop to provide a version of the content shortened for any specific length. This function will be called with various length, to find the best version of the content that fits. Note that this function can do smart things to get the best representation for the given length, which might be more complex than simply getting the beginning, the end or the middle.
• Level 3: AdaptiveHighlightedText: a component that displays text with a part highlighted, adaptively trimmed around the highlight to fit the maximum available length without overflow. This uses HighlightedTrimmedText and AdaptiveDynamicTrimmer.

Changes:

• Teach TrimEndLinkLabel component to support highlighting parts within the labels, and show the relevant part instead of always showing the beginning of the label.

Testing

None of these changes are immediately visible on the UI. To see this in action, check out some other PRs that use this:

• Network proposal votes: add search by validator name #1357, which uses this for displaying votes for network proposals (with highlights for search results). This showcases Level 2: No adaptive expansion, just smart trimming around the highlight. - example (check with 630px width)
• Add named accounts #1398, which uses this for displaying account names (with highlights for search results). Showcases Level 3 - example (check with 630px width)

[github-actions]

Deployed to Cloudflare Pages

Latest commit:	a6f8cc8e475b633b3287f6b5dde345e7e58eff9b
Status:	✅ Deploy successful!
Preview URL:	https://7895d3cf.oasis-explorer.pages.dev

[csillag]

Code extracted from the Pontus-X branch

[lukaw3d]

It's confusing that AdaptiveHighlightedText's extraTooltip prepends the icon and AdaptiveDynamicTrimmer's extraTooltip doesn't.

[csillag]

True. Will think about this later.

[lukaw3d]

example (check with 630px width)

@donouwens is this the expected behavior

[lukaw3d]

those things can be fixed as separate PR, if it adds too many conflicts

[csillag]

example (check with 630px width)

@donouwens is this the expected behavior

You mean the fact that the highlight has some margin, so we are selecting half a character to the left and to the right?
If that's what you mean, then yes, I think this is what we wanted. This is also why we made the yellow highlight class slightly transparent, so that it's not an issue that we partially cover other characters. (But @donouwens can confirm/correct.)