`SearchBox` styling issue

[Swarnendu0123]

Actual Behavior

Expected Behavior

Steps to reproduce

Steps:

1. Go to p5.je-web-editor
2. Press Ctrl+F
3. A search box will pop up, tap on the arrow on the left

[lindapaiste]

I think the expected behavior is that the two boxes fit on the same line. We messed this up when adding some changes to support the responsive design. I can look back in the git history and get a snapshot of the earlier version. Pretty sure there is another open issue about this already.

[Swarnendu0123]

Hmm, I thought the arrow on click pointing towards the bottom, so the replacement input will also appear to the bottom side.

Pretty sure there is another open issue about this already.

Maybe we can merge them into a single issue.

[VivekJaiswal18]

Can I work on this issue?

[lindapaiste]

This is what it previously looked like. The top line stays the same and additional content shows up below.

Also...omg I thought we fixed this but this is the production site 😱

[lindapaiste]

I have a CSS that fixes it. Whoever gets to it first can put this in a PR. It falls apart below around 350px but that's really small so I think we call this good enough for now and revisit the small-screen issues later.

In .CodeMirror-dialog
change lines:

margin-left: #{math.div(-552 * 0.5, $base-font-size)}rem;

z-index: 10;

Then replace these two blocks:

.CodeMirror-find-controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: #{math.div(35, $base-font-size)}rem;
}

.CodeMirror-search-controls {
  width: 60%;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: flex-start;
  align-items: flex-end;
}

[PiyushThapaa]

margin-left: #{math.div(-552 * 0.5, $base-font-size)}rem;
@lindapaiste This code is giving a sass error

[Parikshit2001]

@lindapaiste the code that you provided is working for me

I raised the PR also