Reference panel: Horizontal overflow on results

[scalabilitysolved]

I'm not sure if this is expected behaviour or not, when you search for a result that returns a match within HystrixCodaHaleMetricsPublisherCommand.java there is a long line which in search results means a horizontal scoll-bar is shown as below:

When you have that same reference within the ref panel we have no horizontal scroll and the line is cut off mid word. Is this the expected behaviour?

When you click on the result you can see with the preview pane expansion the line is cut off earlier (also note the precise tag listing for each line grows vertically).

The precise tag listing doesn't always grow vertically:

[jjinnii]

Thanks for filing @scalabilitysolved ! I know I mentioned the precise tag bg wrapping somewhere, but I'm not sure where I've left the comment 😄

I don't think this needs full-on designs, just design guidance:

• We should mirror the responsive behavior in search results. I'm seeing that search results blob also cuts off long text mid-word (which the reference panel currently does), and introduces a scroll bar once the mouse is in the search results blob (which the reference panel does not do)

• The responsive behavior of the precise tag is due to us wrapping lines for the file path. On search results, when the file path wraps lines, the content to the right (star count) moves below the file path. Could we match this behavior?

[jjinnii]

Oh, I had filed this as #39480. I will close that issue out in favor of this one.

@macraig I'm going to bump this to a P1, as it's a very sloppy looking UI that will occur consistently for users, essentially every time a user opens the preview pane for any longer file path (see screenshot for example)

[peterguy]

@fkling There are some current issues with file path wrapping that exist in the current web app and can likely be addressed in the web app prototype. @taiyab you may want to take a peek at this to see if you have any input.

Summary:

• file paths are wrapped instead of shortened in search results and the reference panel
• file paths are shortened with ellipses in the file/blob view. Looks pretty good, but seems to be static - might be nice to adjust it as the width changes.
• when file paths are wrapped, they tend to be split on dashes instead of on slashes
• the file view in the reference panel has only one line for the file path so when it's wrapped, the wrapped path component is lost.
• long file paths make the reference panel scroll horizontally.
• other wrapping oddities, such as the whole path shifting to the line below the icon.

Sample search I was using for testing: https://sourcegraph.com/search?q=context:global+HystrixCodaHaleMetricsPublisherCommand&patternType=keyword&sm=0

It relies on the https://github.com/Netflix/Hystrix repo.

Here's a walkthrough of the current behavior; apologies for the long-winded video.

https://github.com/sourcegraph/sourcegraph/assets/129280/48a67cff-10e0-486f-a1bf-1f1f6243c7d7