Small improvements for small screens

modules/client/browse/App.js

@@ -213,23 +213,39 @@ export default function App({
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
-                justifyContent: 'space-between'
+                '@media (max-width: 700px)': {
+                  flexDirection: 'column-reverse',
+                  alignItems: 'flex-start'
+                }
               }}
             >
-              <h1 css={{ fontSize: '1.5rem' }}>
+              <h1 css={{ fontSize: '1.5rem', fontWeight: 'normal', flex: 1 }}>
                 <nav>
-                  {breadcrumbs.map((link, index) => (
+                  {breadcrumbs.map((item, index, array) => (
                     <span key={index}>
                       {index !== 0 && (
                         <span css={{ paddingLeft: 5, paddingRight: 5 }}>/</span>
                       )}
-                      {link}
+                      {index === array.length - 1 ? (
+                        <strong>{item}</strong>
+                      ) : (
+                        item
+                      )}
                     </span>
                   ))}
                 </nav>
               </h1>
-              <div>
-                <label htmlFor="version">Version:</label>{' '}
+              <p
+                css={{
+                  marginLeft: 20,
+                  '@media (max-width: 700px)': {
+                    marginLeft: 0,
+                    marginBottom: 0
+                  }
+                }}
+              >
+                <label>
+                  Version:{' '}
                   <select
                     name="version"
                     defaultValue={packageVersion}
@@ -265,7 +281,8 @@ export default function App({
                       </option>
                     ))}
                   </select>
-              </div>
+                </label>
+              </p>
             </header>
           </div>
 

modules/client/browse/DirectoryViewer.js

@@ -141,7 +141,12 @@ export default function DirectoryViewer({ path, details: entries }) {
           width: '100%',
           borderCollapse: 'collapse',
           borderRadius: 2,
-          background: '#fff'
+          background: '#fff',
+          '@media (max-width: 700px)': {
+            '& th + th + th + th, & td + td + td + td': {
+              display: 'none'
+            }
+          }
         }}
       >
         <thead>