better usability: mimimum size for breadcrumbs

Author: rejetto

frontend/src/Head.ts

@@ -45,7 +45,7 @@ function MenuPanel() {
                 }
             })
         ),
-        remoteSearch && h('div', {}, 'Searched for: ',remoteSearch),
+        remoteSearch && h('div', { id:'searched' }, 'Searched for: ',remoteSearch),
         showFilter && h('input',{
             id: 'filter',
             placeholder: 'Filter',

frontend/src/index.scss

@@ -44,8 +44,8 @@ button.toggled {
 header {
     position: sticky;
     top: 0;
-    padding-bottom: 0.3em;
     background: #fff;
+    padding: .2em;
 }
 
 @keyframes spin {
@@ -61,7 +61,11 @@ header {
     line-height: 1.6em;
 
     border-top: 1px solid #666;
-    margin-left: -1px;
+    margin-right: -0.1em;
+    /* make small elements easier to tap */
+    min-width: 1.2em;
+    text-align: center;
+    display: inline-block;
 }
 #folder-stats {
     font-size: 90%;
@@ -113,7 +117,7 @@ ul.dir {
 }
 
 #menu-panel {
-    margin: 0 0.1em 0.2em;
+    margin-bottom: 0.2em;
 
     & button {
         margin: 0.1em;
@@ -123,6 +127,9 @@ ul.dir {
         margin-left: 0.8em;
     }
 }
+#searched {
+    margin: .2em;
+}
 
 @media (max-width: 50em) {
     #menu-bar button:nth-child(1n+2) label { display: none } /* icons only */