✨ Profile Metadata HACK 😈

app/javascript/styles/components.scss

@@ -820,9 +820,12 @@
   padding: 10px;
 }
 
-.account__header {
+.account__header__wrapper {
   flex: 0 0 auto;
   background: lighten($ui-base-color, 4%);
+}
+
+.account__header {
   text-align: center;
   background-size: cover;
   background-position: center;
@@ -887,6 +890,42 @@
   }
 }
 
+.account__metadata {
+  display: block;
+  font-size: 15px;
+  line-height: 36px;
+  overflow: hidden;
+
+  .account__metadata-item {
+    display: flex;
+    flex-direction: row;
+    border-top: 1px solid lighten($ui-base-color, 8%);
+
+    & > span, & > strong {
+      display: inline-block;
+      padding: 10px 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    & > span {
+      flex: 0 0 auto;
+      width: 120px;
+      color: $ui-primary-color;
+      background: lighten($ui-base-color, 13%);
+      font-variant: small-caps;
+    }
+
+    & > strong {
+      flex: auto;
+      color: $primary-text-color;
+      background: $ui-base-color;
+      font-weight: bold;
+    }
+  }
+}
+
 .account__action-bar {
   border-top: 1px solid lighten($ui-base-color, 8%);
   border-bottom: 1px solid lighten($ui-base-color, 8%);