Merge pull request #16379 from edx/HarryRein/responsive-account-settings

Responsive account settings page.

lms/static/sass/views/_account-settings.scss

@@ -64,10 +64,10 @@
 
         font-size: em(14);
         color: $gray;
-        padding: 5px 25px 23px;
+        padding: $baseline/4 $baseline*1.25 $baseline;
         display: inline-block;
         box-shadow: none;
-        border: none;
+        border-bottom: 4px solid transparent;
         border-radius: 0;
         background: transparent none;
       }
@@ -84,11 +84,24 @@
         &:hover,
         &:focus {
           text-decoration: none;
-          border-bottom: 4px solid $courseware-border-bottom-color !important;
+          border-bottom-color: $courseware-border-bottom-color;
         }
 
         &.active {
-          border-bottom: 4px solid $black-t3 !important;
+          border-bottom-color: theme-color("dark");
+        }
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      border-bottom-color: transparent;
+
+      .account-nav {
+        display: flex;
+        border-bottom: none;
+
+        .account-nav-link {
+            border-bottom: 4px solid theme-color("light");
         }
       }
     }
@@ -338,6 +351,41 @@
           border-bottom: none;
           margin-bottom: ($baseline*2);
         }
+
+        // Responsive behavior
+        @include media-breakpoint-down(md) {
+          .u-field-value {
+            width: 100%;
+          }
+
+          .u-field-message {
+            width: 100%;
+            padding: $baseline/2 0;
+
+            .u-field-message-notification {
+              position: relative;
+              padding: 0;
+            }
+          }
+
+          .u-field-order {
+            display: flex;
+            flex-wrap: nowrap;
+
+            u-field-order-number,
+            u-field-order-date,
+            u-field-order-price,
+            u-field-order-link, {
+              width: auto;
+              float: none;
+              flex-grow: 1;
+
+              &:first-of-type {
+                flex-grow: 2;
+              }
+            }
+          }
+        }
       }
 
       .u-field-readonly .u-field-value {