Fix padding of input box for mobile browsers

[seongjinme]

Currently there's something look less ideal on mobile browsers when using Backpack template. Unlike on PC, you can see the extra gaps between borders and text in the input field on mobile as in the screenshot below. (including Safari, Chrome, Firefox, etc.) It is taken from the Live demo page.

This PR fixes the issue by fixing CSS values given for #sge-input.

/* Before fixing */
#sge-input {
    ...
    width: 100px;
    ...
}

/* After fixing */
#sge-input {
    ...
    width: 100%;
    padding: 0 0.25em 0 0;
    ...
}

You can see the expected result in the screenshot below. (taken from my website)

[gmfmi]

Hi @seongjinme!

Thank you very much for that PR, super clear 🙏

At first, I was surprised because I was unable to reproduce the issue on my Android mobile (chrome/firefox). I borrowed an iPhone to give it a try and, in fact, the issue only related to iOS devices. Thanks for pointing it out.

Before merging the PR, I will just add the fix to the original file (in the src directory) and do some packaging to release a new version and make it available to everybody.

side notes: I Google translated your blog and I really liked your articles about Ghost setup (I also use Docker Compose for mine) 😃

[seongjinme]

Hi @gmfmi,

I want to apologize for causing confusion because of overlooking the tests in Android devices while checking the issue. I'm relieved that it helped though, and I'd like to tell you that I'm truly humbled by your well-made projects. Thank you for your kind reply.

PS: Also, thank you for visiting my blog! :)