Fix header spacing in mobile

This also adds some usability tips.

static/css/custom.css

@@ -13,6 +13,41 @@ body {
     max-width: 1800px;
 }
 
+@media screen and (max-width: 1024px) {
+    .search-header {
+        clear: both;
+        width:100%;
+        display:inline;
+    }
+    .search-bar {
+        width: 100%;
+    }
+    .legend {
+        position: relative;
+    }
+
+    .ink-navigation {
+        font-size: 12px;
+    }
+}
+
+@media screen and (min-width: 1025px) {
+    .search-header {
+        clear: both;
+        width:100%;
+        display:inline-block;
+        position:relative;
+    }
+    .search-bar {
+        width: 30%;
+    }
+    .legend {
+        position:absolute;
+        bottom:0;
+        width: 70%;
+    }
+}
+
 p, dd, li {
     line-height:1.4em;
 }

templates/main.html

@@ -8,33 +8,36 @@ active
 {% block content %}
 
 <div class="column-group">
-  <div class="xlarge-100 large-100 small-100 bottom-space" style="padding-right:1em">
-    <form class="ink-form push-right" style="width: 30%;" action="/" method="get">
-      <div class="control-group all-100" style="margin-bottom: 0.5em">
-        <div class="control append-button" role="search">
-          <span>
-            {% if search is none %}
-            <input type="text" name="search" id="search">
-            {% else %}
-            <input type="text" name="search" id="search", value="{{search}}">
-            {% endif %}
-          </span>
-          <button class="ink-button">Search</button>
+  <div class="xlarge-100 large-100 small-100 bottom-space">
+    <div class="search-header">
+      <form class="ink-form push-right search-bar" action="/" method="get">
+        <div class="control-group all-100" style="margin-bottom: 0">
+          <div class="control append-button" role="search">
+            <span>
+              {% if search is none %}
+              <input type="text" name="search" id="search" placeholder="Enter arbitrary regexp term">
+              {% else %}
+              <input type="text" name="search" id="search", value="{{search}}">
+              {% endif %}
+            </span>
+            <button class="ink-button">Search</button>
+          </div>
         </div>
+      </form>
+      <div class="legend">
+        {% if tags is not none %}
+            Showing only entries with tags:
+        {% for tag in tags %}
+            <span class="ink-label grey">{{ tag }}</span>
+        {% endfor %}
+        <br/>
+        {% endif %}
+        {% if search is not none %}
+            Showing only entries that match regexp: {{search}}<br/>
+        {% endif %}
+        <span style="font-size:x-small">Tip: click on the table header to sort the list. Hover your mouse to obtain a legend.</span>
       </div>
-    </form>
-    {% if tags is not none %}
-    Showing only entries with tags:
-    {% for tag in tags %}
-    <span class="ink-label grey">{{ tag }}</span>
-    {% endfor %}
-    {% endif %}
-    {% if search is not none %}
-    {% if tags is not none %}
-    <br/>
-    {% endif %}
-    Showing only entries that match regexp: {{search}}
-    {% endif %}
+    </div>
     <table class="ink-table hover sortable">
       <thead>
         <tr>