Tidy-ups to style of mobile layout and spinner

ui/src/components/Spinner.js

@@ -4,7 +4,7 @@ import spinner from '../static/images/spinner.svg'
 
 const Spinner = ({ active }) => (
   <span className="Spinner">
-    <img src={spinner} alt="spinner" />
+    <img src={spinner} />
   </span>
 )
 

ui/src/static/css/App.css

@@ -81,3 +81,9 @@ footer {
 #content::-webkit-scrollbar {
   display: none;
 }
+
+@media all and (max-width: 700px) {
+  header {
+    height: 330px;
+  }
+}

ui/src/static/css/Filters.css

@@ -105,3 +105,10 @@
 .FilterGroup li.Black {
   background: rgb(0, 0, 0);
 }
+
+@media all and (max-width: 700px) {
+  .FilterGroup {
+    width: 180px;
+    height: 250px;
+  }
+}

ui/src/static/css/PhotoList.css

@@ -24,4 +24,13 @@
     background-size: cover;
     background-position: center;
 }
-
+
+@media all and (max-width: 700px) {
+  .PhotoList {
+    padding: 20px 0 0 20px;
+  }
+  .PhotoList .thumbnail {
+    width: 96px;
+    height: 96px;
+  }
+}

ui/src/static/css/Search.css

@@ -12,4 +12,10 @@
 }
 .Search h2 {
   font-size: 18px;
-}
+}
+
+@media all and (max-width: 700px) {
+  .Search {
+    padding: 20px;
+  }
+}

ui/src/static/css/Spinner.css

@@ -1,5 +1,5 @@
 .Spinner {
-  margin: 40px;
+  padding: 40px;
   display: block;
   text-align: center;
 }