gitweb: prevent project search bar from overflowing on mobile

On narrow screens, the project search input can exceed the available width
and force page-wide horizontal scrolling.

Add a mobile media query and apply side padding to the search container,
then cap the input width to its container with border-box sizing so the
form stays within the viewport.

Signed-off-by: Rito Rhymes <rito@ritovision.com>
Signed-off-by: Junio C Hamano <gitster@pobox.com>

diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
index 48d2e5101542ad96dcac78aace13d3bbee40d303..0b63acc0e29e9c65d31e93b17704de146dc40451 100644 (file)
--- a/gitweb/static/gitweb.css
+++ b/gitweb/static/gitweb.css
@@ -684,3 +684,15 @@ div.remote {
 .kwb    { color:#830000; }
 .kwc    { color:#000000; font-weight:bold; }
 .kwd    { color:#010181; }
+
+@media (max-width: 768px) {
+       div.projsearch {
+               padding: 0 8px;
+               box-sizing: border-box;
+       }
+
+       div.projsearch input[type="text"] {
+               max-width: 100%;
+               box-sizing: border-box;
+       }
+}