Find widget too wide

[isidorn]

On Mac the find widget is too wide, the matches space is too large, especially in this case when I have single digit numbers. Due to this the lower checkboxes seems misaligned

[alexdima]

@stevencl Feedback starts to come in :)

[stevencl]

@alexandrudima What would it take to align the replace and replace all buttons? Ideally I would think they would be left aligned (i.e., the left most edge of the replace button is left aligned with the index while the left most edge of the replace all button is left aligned with the count).

Is the 'of' in '1 of 2' in a fixed position or does it move to the right when the count is more than one digit? How feasible (and desirable) do you think it would be to refresh the layout when the count and index change?

[c5inco]

Yeah I just saw this in the latest update. I see the value but it definitely needs some UX love. As @isidorn stated, it makes the widget way too wide (think split editor scenarios) and when expanded everything looks poorly aligned. I would considering place that text actually left aligned underneath all the controls, to look more like status text.

I don't have a mock for you unfortunately, but I think @bgashler1 can help you out there. Or if I have free cycles later this month. ;)

[stevencl]

@bgashler1 - can you mock this up and then work with @alexandrudima on this?

[bgashler1]

Sure no problem.

[bgashler1]

This is my proposal

Compared to current

Notice the space that we could save with this new approach (206 px).

Addressing alignment

We can address alignment problems between index/count and the adjacent buttons by changing the max-width as pictured above. .monaco-editor .find-widget .matchesCount { min-width: 46px; }

Thoughts?

[bgashler1]

_Note to self:_
Just talked with Isidor, and we need 4 digit support. Max value (999+).

Also address the less-nice-looking red "no results".

Make this consistent with the search viewlet.

[rebornix]

I don't have a good idea about how to handle those whitespaces right this moment. Push it to later iteration.

[vscodebot]

This iteration we focus on issue grooming. This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. More details here. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!

[isidorn]

fyi @misolori maybe you have some good idea and if you also think this is an issue we can consider to reopen this

[rebornix]

I mark this as out-of-scope because I don't know yet how to make this possible but not make it complex. If @misolori has ideas of improving the find widget in anyways, we can reopen it.