Link UI: Fix focus styles w/ suggestions showing

[obenland]

Description

Limits the height of the suggestion list's top & bottom gradient.

How has this been tested?

• Checked out NavigationMenu: <LinkControl /> integration. #18062 and cherry picked this commit.
• Created a new menu item and started a search for "page" to get a list of suggestions.

Screenshots

Before:

After:

Types of changes

Bug fix (non-breaking change which fixes an issue) as described in #18135.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[obenland]

@getdave Do we need those top & bottom gradients at all? They're going from white to transparent on a white background.

Edit: never mind, I see now that they're there to gracefully hint at more results.

[getdave]

Testing this now...

Also I rebased.

I see now that they're there to gracefully hint at more results.

Yep that's why I added them. Tiny hint, but makes a big different in my manual testing.

[retrofox]

LGTM 👍, you will need to rebase it, though.

[retrofox]

👍

[getdave]

When testing this manually, if I change the bottom gradient to red then I can still see it overlapping when scrolling right to the bottom.

[getdave]

A more complex way of doing this might be to add a scroll event listener and check to see if the container has been fully scrolled. If so you can add a class to remove the border.

element.scrollHeight - element.scrollTop === element.clientHeight

However, if we can solve via CSS that would be a lot easier.

[obenland]

For my understanding, you want the gradient and the last item not to overlap at all? Because currently the background and gradient are both white and you won't notice it until the text gets scrolled down. See also #18135 (comment)

[getdave]

My understanding was

• When the container is already scrolled to the bottom (no more items) then there should be no bottom gradient because there is nothing to hint at.
• When the container is already scrolled to the top (no more items) then there should be no top gradient because there is nothing to hint at.

The key is that the gradient only shows in the direction where there are items below the visible area.

[obenland]

Yeah I'm not sure we're doing ourselves a favor by trying to make that dynamic. Let me adjust the gradient first and see if that fixes it enough for now.

[obenland]

After e0bb753:

Last item, scrolled all the way to the bottom:

Highlighted item with room to scroll:

[getdave]

I tested this and I can longer see the gradient overlapping.