Merge remote-tracking branch 'upstream/master'

app/javascript/styles/accounts.scss

@@ -7,7 +7,7 @@
   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
   overflow: hidden;
 
-  @media screen and (max-width: 700px) {
+  @media screen and (max-width: 740px) {
     border-radius: 0;
     box-shadow: none;
   }
@@ -298,7 +298,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  @media screen and (max-width: 700px) {
+  @media screen and (max-width: 740px) {
     border-radius: 0;
     box-shadow: none;
   }

app/javascript/styles/basics.scss

@@ -47,7 +47,7 @@ body {
     padding: 0;
   }
 
-  @media screen and (max-width: 360px) {
+  @media screen and (max-width: 400px) {
     padding-bottom: 0;
   }
 }

app/javascript/styles/compact_header.scss

@@ -3,9 +3,15 @@
     font-size: 24px;
     line-height: 28px;
     color: $ui-primary-color;
-    overflow: hidden;
     font-weight: 500;
     margin-bottom: 20px;
+    padding: 0 10px;
+    overflow-wrap: break-word;
+
+    @media screen and (max-width: 740px) {
+      text-align: center;
+      padding: 20px 10px 0;
+    }
 
     a {
       color: inherit;

app/javascript/styles/components.scss

@@ -1835,7 +1835,6 @@
   overflow-y: scroll;
   overflow-x: hidden;
   flex: 1 1 auto;
-  backface-visibility: hidden;
   -webkit-overflow-scrolling: touch;
   @supports(display: grid) { // hack to fix Chrome <57
     contain: strict;
@@ -1853,8 +1852,9 @@
   flex: 0 0 auto;
   font-size: 16px;
   border: 0;
-  text-align: start;
+  text-align: unset;
   padding: 15px;
+  margin: 0;
   z-index: 3;
 
   &:hover {

app/javascript/styles/containers.scss

@@ -3,7 +3,7 @@
   margin: 0 auto;
   margin-top: 40px;
 
-  @media screen and (max-width: 700px) {
+  @media screen and (max-width: 740px) {
     width: 100%;
     margin: 0;
   }
@@ -13,8 +13,9 @@
   margin: 100px auto;
   margin-bottom: 50px;
 
-  @media screen and (max-width: 360px) {
+  @media screen and (max-width: 400px) {
     margin: 30px auto;
+    margin-bottom: 20px;
   }
 
   h1 {
@@ -42,3 +43,54 @@
     }
   }
 }
+
+.account-header {
+  width: 400px;
+  margin: 0 auto;
+  display: flex;
+  font-size: 13px;
+  line-height: 18px;
+  box-sizing: border-box;
+  padding: 20px 0;
+  padding-bottom: 0;
+  margin-bottom: -30px;
+  margin-top: 40px;
+
+  @media screen and (max-width: 400px) {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 10px;
+    padding: 20px;
+    padding-bottom: 0;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+    margin-right: 8px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+      margin: 0;
+      border-radius: 4px;
+    }
+  }
+
+  .name {
+    flex: 1 1 auto;
+    color: $ui-secondary-color;
+
+    .username {
+      display: block;
+      font-weight: 500;
+    }
+  }
+
+  .logout-link {
+    display: block;
+    font-size: 32px;
+    line-height: 40px;
+  }
+}

app/javascript/styles/forms.scss

@@ -317,7 +317,7 @@ code {
 }
 
 .flash-message {
-  background: $ui-base-color;
+  background: lighten($ui-base-color, 8%);
   color: $ui-primary-color;
   border-radius: 4px;
   padding: 15px 10px;