Improve Documentation manual searchbar

[Ndipbanyan]

Issue Description

The search bar in /api/index can be improved to look better

Fixes #1410

Changes Made

I made changes to the api/index.html file to include a div and change the position of a span element I also added a style id api_search_container to the style.css file of site api directory

Before

After

• Please check if the PR fulfills these requirements

• [x] PR is descriptively titled and links the original issue above
• [x] Before/after screenshots (if this is a layout change)
• [ ] Details of which platforms the change was tested on (if this is a browser-specific change)
• [ ] Context for what motivated the change (if this is a change to some content)

[pitag-ha]

To give some context here: @patricoferris and @Octachron have been talking about drafting this PR here to see how it looks like on staging, but ultimately back port it to the compiler (see #1410).

[avsm]

This goes wrong in a fun way on the staging site... :-) https://staging.ocaml.org/releases/4.12/api/index.html

https://user-images.githubusercontent.com/53164/114734509-2fc57380-9d3c-11eb-812b-e552f94b0c77.mov

[avsm]

I'm just turning this into a draft PR until the issue above is fixed (it helps me sort the outstanding PRs). Feel free to mark it ready for review when you push a fix.

[Ndipbanyan]

So this is what it currently looks like on the site

https://user-images.githubusercontent.com/67186679/114852426-ac0e9400-9dda-11eb-822b-6210e31c9a5b.mp4

So I just moved the (search values, type signatures, and descriptions - case sensitive) (which is a span) as a placeholder in the search bar while still retaining the styling it had while outside the search bar. However, I can take it ((search values, type signatures, and descriptions - case sensitive) back to where it was originally (outside of the search bar).

@avsm I will like to know what you think about this. Thanks.

[avsm]

@Ndipbanyan I think the problem is that the font size of the dropdown appears to change as you move the mouse in the videos. That's unexpected... it should be a constant font size.

[Ndipbanyan]

@avsm I will fix that and will mark it ready for review.

[avsm]

This is almost mergeable, but not quite; the font size of the help text is significantly smaller than the ones below it in the main text, and so hard to read. Also, there needs to be a little left padding on the hint text inside the box to avoid it going too flush to the left I think. @pitag-ha @Octachron are you ok with merging after these suggestions (with a future backport to the main repository)? For reference the staging page is at https://staging.ocaml.org/releases/4.12/api/index.html

[Ndipbanyan]

This is almost mergeable, but not quite; the font size of the help text is significantly smaller than the ones below it in the main text, and so hard to read. Also, there needs to be a little left padding on the hint text inside the box to avoid it going too flush to the left I think. @pitag-ha @Octachron are you ok with merging after these suggestions (with a future backport to the main repository)? For reference the staging page is at https://staging.ocaml.org/releases/4.12/api/index.html

@avsm I made changes to effect the suggestions you raised above and pushed. This is what it looks like now

[sanette]

I think that the help, being automatically displayed when typing, hides a large part of the screen, and prevents from seeing results on-the-fly (which was the main interest of this widget, imho). Previously the help would display only when you hover the text on the right, outside of the search box, and the help grew bigger (easier to read) when you hovered it. Not very pretty, I agree, but convenient.