Expand user fields on click

src/components/user_profile/user_profile.js

@@ -55,7 +55,8 @@ const UserProfile = {
       followsTab: 'users',
       footerRef: null,
       note: null,
-      noteLoading: false
+      noteLoading: false,
+      expandedFields: []
     }
   },
   created () {
@@ -195,7 +196,14 @@ const UserProfile = {
     debounceSetNote: debounce(function () {
       this.$store.dispatch('setNote', { id: this.userId, note: this.note })
       this.noteLoading = false
-    }, 1500)
+    }, 1500),
+    toggleFieldWrap (index) {
+      if (this.expandedFields[index]) {
+        this.expandedFields[index] = false
+      } else {
+        this.expandedFields[index] = true
+      }
+    }
   },
   watch: {
     '$route.params.id': function (newVal) {

src/components/user_profile/user_profile.vue

@@ -25,6 +25,10 @@
           v-for="(field, index) in user.fields_html"
           :key="index"
           class="user-profile-field"
+          :class="{
+            'field-expanded': expandedFields[index]
+          }"
+          @click="toggleFieldWrap(index)"
         >
           <dt
             :title="user.fields_text[index].name"
@@ -274,6 +278,12 @@
         box-sizing: border-box;
       }
 
+      &.field-expanded {
+        .user-profile-field-name, .user-profile-field-value {
+          white-space: normal;
+        }
+      }
+
       .user-profile-field-validated {
         margin-left: 1rem;
         color: green;