[Core][FindReplace]: The layout issue of FindReplace bar when resizing Brackets window.

[julieyuan]

Steps:

1. Launch Brackets and open default sample file index.html.
2. Click Edit > Replace to invoke the Replace bar.
3. Search some string in this html file and then resize Brackets window.
4. Press Cmd+Shift+F to invoke the Find bar, then resize Brackets window.

Result:
The layout of FindReplace bar is above the right sidebar.
At step4, the Match Case box has no left-side rim.

Expected:
This FindReplace bar should be below the right sidebar.

ENV: MAC10.8 and Win8 English OS
Build: 0.35.0-10876

Snapshots:
Please refer to snapshots for details:
Replace bar:

Find bar:

[TomMalbran]

I think we could solve this with flexbox as we did with the find in files and replace panels titles.

[ishan1608]

Bringing the right sidebar to top is quite easy. A "z-index" value of 16 for the id #main-toolbar does the trick in this case.
Another question to be answered which needs to be answered here is this:
Do we want the "Find in Files" ( Ctrl-Shift-F ) to behave like "Find and Replace" ( Ctrl-H ), i.e. the elements do not get squeezed down, when window is re-sized. Or do we want "Find and Replace" ( Ctrl-H ) to behave like "Find in Files" ( Ctrl-Shift-F ), i.e. the elements do get squeezed down, when the window is re-sized.
I think @larz0 takes most ( if not all ) decisions regarding the looks. So this question needs his or at-least someone's comment from the core team who has deciding rights regarding the looks.

[larz0]

@ishanatmuz keeping everything on one line is more preferable. The text fields should be fluid and not fixed.

[bchintx]

This is basically the same problem as the already existing Issue #5507, which already has a simple fix waiting to be reviewed as Pull Request #6380.

Closing this as a duplicate.

[peterflynn]

#6380 fixed the overflow issue, but not the wrapping (2nd screenshot). Reopening to address that issue.

[peterflynn]

FBNC @julieyuan - #6529 fixed the remaining wrap issue

[TomMalbran]

I think that a better solution for this would be to make the input elements fluids to take the remaining space since some of the buttons in the replace bar became unreachable at certain widths.

[redmunds]

I like the idea of fluid input fields, but they need a minimum width to be effective. Even with that solution, I think it needs to also hide overflow -- there's always going to be someone who makes the window really narrow.

[TomMalbran]

Yes. I guess that the previous PR would fix that, but by making it fluid the replace bar can be usable at smaller window widths.

[peterflynn]

@TomMalbran Yeah, that's on the future agenda

[peterflynn]

Removing FBNC tag -- we had to back out #6380 due to issue #6552, so the overlap issue here is no longer fixed. (The wrap issue is still fixed though, due to separate PR #6529).

[bchintx]

@ishanatmuz Can you please re-submit the z-index changes that you made in Pull Request #6348? Our other fix (PR #6380) didn't work out b/c it introduced Issue #6552 on Mac. So, if you can create a new pull request with just the z-index change, we can take that to fix this issue and issue #5507.
Thanks in advance!

[ishan1608]

@bchintx I wil submit that later today when I gain access to my PC.

[ishan1608]

@bchintx I submitted the z-index fix as PR #6569

[bchintx]

Thanks, @ishanatmuz! Merged PR addresses the reported issue in my build, so marking as FBNC for @julieyuan .

[julieyuan]

The fix has not merged the latest build which I can get 0.36.0-11415 yet. Will check it again with next build. Thanks.

[julieyuan]

Confirm this issue fixed with build 0.36.0-11462. Thanks you all. Closing it and here are snapshots for reference: