Improve appearance on narrow screens

Author: chriskuehl

pypi_browser/templates/_base.html

@@ -20,6 +20,7 @@
                        type="text"
                        name="package"
                        placeholder="Package name"
+                       size="15"
                        value="{{selected_package_name}}"
                    />
                    <button class="btn btn-outline-success" type="submit">Go</button>

pypi_browser/templates/home.html

@@ -4,16 +4,16 @@
 {% block title %}PyPI Browser{% endblock %}
 
 {% block content %}
-    <div class="px-4 py-4 my-4 mx-5">
+    <div class="px-4 py-4 my-4 mx-sm-5">
         <div class="card">
-            <div class="card-body text-center py-5 px-5">
+            <div class="card-body text-center py-5 px-sm-5 px-xs-2">
                 <h4 class="mb-4">Enter a Python project name to browse its files:</h4>
                 <form method="GET" action="{{url_for('search')}}">
                     <div class="row px-5 mb-4">
-                        <div class="col">
+                        <div class="col-sm mb-2">
                             <input type="text" name="package" class="form-control form-control-lg" />
                         </div>
-                        <div class="col-auto">
+                        <div class="col-sm-auto">
                             <button type="submit" class="btn btn-lg btn-primary">Browse Package</button>
                         </div>
                     </div>

pypi_browser/templates/package_file_archive_path.html

@@ -44,7 +44,7 @@ <h1 class="font-monospace">{{archive_path}}</h1>
     {{macros.tarball_warning(package_is_tarball)}}
 
     <div class="row mb-6">
-        <div class="col col-sm-9">
+        <div class="col col-sm-9 col-12 mb-4 mb-sm-0">
             {% if cannot_render_error %}
                 <div class="card">
                     <div class="card-body text-center">