Fixing the user settings page for mobile use

Also add a quick workaround for the occasions when the top right
links overlap the logo and site name. We'll need a better fix for
this in the longer run.

diff --git a/public/stylesheets/small.css b/public/stylesheets/small.css
index cfcf0fd22095726b4e4557ad5766ebcf446ce8e2..f4d51c868453d43c9e9edc781b262f8d9ab908d0 100644 (file)
--- a/public/stylesheets/small.css
+++ b/public/stylesheets/small.css
@@ -43,10 +43,14 @@ h1 {
 #small-title {
   font-size: 12px;
   line-height: 14px;
+  height: 16px;
   display: block;
   position: absolute;
   top: 0;
-  margin: 2px;
+  padding: 2px;
+  width: 110px; /* TODO: find better fix for overlap */
+  background-color: #fff;
+  z-index: 100;
 }
 
 #small-title img {
@@ -139,6 +143,20 @@ h1 {
   height: 300px !important;
 }
 
+/* Rules for the user settings page */
+
+#user_new_email {
+  width: 60% !important;
+}
+
+#user_description, #user_preferred_editor {
+  width: 90% !important;
+}
+
+.minorNote {
+  display: block;
+}
+
 /* Rules for the browse pages */
 
 #browse_navigation {
@@ -149,6 +167,7 @@ h1 {
 #small_map, #browse_map {
   width: 100% !important;
 }
+
 #changeset_list tr {
   display: block;
   clear: left;