Overflow of search bar in smart phones

[raashika03]

When we don't use search bar, scrolling is possible to the term details table

When we use search bar, it's not possible to go down without scrolling in a single flow(taking care to not scroll inside the image)

Few other websites search bar with no overflow condition

So should I try changing Edam search bar similarly? To prevent this problem. @bryan-brancotte @matuskalas @hmenager

[sakshi-dhamija]

Hey @raashika03, you addressed two issues here.

1. The search bar stretches and overflows out of the visible screen of the mobile.
2. We are not able to scroll down in a single flow when we click on a search bar.

For the first point, I noticed that when we click the search bar, it zooms out and it looks like overflow. Same as what you mentioned in #103, except there it was an input field box instead of a search bar.
One possible solution to this problem could be stopping the page to zoom out, whenever we click an input field box. Are you planning to do the same or do you have another idea to stop this overflow?

For the second point, I saw that you already made a PR for reducing the tree box size. Can we also add a scrollbar on the right side to further improve the user accessibility and user experience for the website?

[raashika03]

For 2nd point this's where I'm working. May be @bryan-brancotte Will suggest something better than adding scrollbar.
For 1st point, I'll not stop the zooming of the content because that'll remove the focus from the selected element, so will just adjust them to fit the view screen.
Hope this answer your points @secrashi 😀

[bryan-brancotte]

Hi @raashika03

I agree with @secrashi that this issue is very similare to #103 where smartphone browser zoom in when clicking on a search bar that is too small to be read otherwise. Never the less let the two remain open as solution could not be the same for both use case.

[bryan-brancotte]

Following original idea done in #169, adding viewport to index.html and updating width with 8da0b2a, issue is solved