Refine map UI for small screens

app/assets/stylesheets/common.css.scss

@@ -600,7 +600,9 @@ a.donate {
     color:#222;
     border:1px solid #ddd;
   }
+}
 
+.layers-ui {
   li {
     border-radius: 4px;
     overflow: hidden;
@@ -609,7 +611,7 @@ a.donate {
 
   label {
     display: block;
-    padding: 5px;
+    padding: 5px 5px 5px 7px;
     background-color: #eee;
     cursor: pointer;
   }
@@ -618,10 +620,6 @@ a.donate {
     background-color: #ccc;
   }
 
-  input[type=text] {
-    width:220px;
-  }
-
   .base-layers {
     .leaflet-container {
       width: 100%;

app/assets/stylesheets/small.css.scss

@@ -168,6 +168,27 @@ p.search_results_entry {
   padding: 2px 0px;
 }
 
+/* Rules for the map UI */
+
+.layers-ui {
+  .leaflet-container {
+    display: none;
+  }
+
+  li {
+    border-radius: 0;
+    margin-bottom: 0;
+
+    &:first-child {
+      border-radius: 4px 4px 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+}
+
 /* Rules for the signup form */
 
 #signupForm input[type="text"], #signupForm input[type="password"] {