Quick open shows weird truncation when highlighting matches

[Gruntfuggly]

Using the open recent dialog, it seems to pointelessly truncate the last two characters of each folder name (most of these end in 'gui'):

[bpasero]

I have seen this before in another issue but was never able to reproduce. Does it reproduce if you disable icons?

[Gruntfuggly]

Yes, turning off icons doesn't change it.

It seems to be something to do with the '-' character. For instance, if I type 'asl-e' it happens, but typing 'asl-g' it does not?

Could be a regex issue...

[bpasero]

@Gruntfuggly are you able to share the sources with me to try to reproduce?

[Gruntfuggly]

Unfortunately the codebase is commercial. However I could provide you with the storage.json from my config files which I think contains the history?

[Gruntfuggly]

storage.json.gz

[bpasero]

@Gruntfuggly no, the history is somewhere else. Can you configure "workbench.quickOpen.closeOnFocusLost": false and then use dev tools to inspect the element that is cropped? I wonder if the entry already contains the "..." or if something else adds it.

[bpasero]

@Gruntfuggly also when you scroll down that list, is there an entry which is so large that it maybe pushes the rest?

[Gruntfuggly]

It looks like text-overflow: ellipsis is comming from the monaco-icon-label class.

There are larger entries in the list further down which are wider that the dropdown, but these are present even when the text is not truncated.

[bpasero]

@Gruntfuggly that does not explain why the "..." shows in such a weird spot, e.g. I would expect to first fill the full available space and then show "...". See what I get, the "..." shows up in the end as expected:

This could be a Chrome layouting issue after all. Can you check if the element is expanded to the full width?

[Gruntfuggly]

The quick-open-row div is full width.
The monaco-icon-label div is truncated
The quick-open-entry-description span which fillows the monaco-icon-label div then takes up the remaining width.

This is the same for when there is truncation and when there isn't. The onlty thing that would appear to be different in our cases is that my description is shorter than the available width?

When using the inspector, I can't see anything obviously different from when it is truncated and when it isn't.

Some further clues maybe though - it only happens to certain file types:

It is definitely not the icon though - it happens with no icon theme selected.

It only happens when I've typed a dash. I've tried lots of other combinations, but it's only with dash and certain other letters.

[Gruntfuggly]

One last clue - I think it is related to the showing the search term within the results. Below you can see that the entries highlighted with '-d' are truncated, but the one with '-D' is not.

I think it must be something to do with a pixel rounding error or something.

[bpasero]

I can reproduce on Linux when I have a file called asl-emcs-ddu-profile-editor-g.js and search for -g and I think it has to do with the fact that the highlight causes some characters to become slightly larger (because they show up in bold) and as such the entire label gets a "..." at the end because it now overflows.

/cc @joaomoreno if you have any idea how to fix this

[bpasero]

Some ideas:

• Fix flex in items (wrap a div around label and description in quick open with flex: 1 for description
• Remove weird display: flex for parent of file label that is not needed anymore?