styling/Use ellipsis when user name overflows connect list

Author: LewisYoul

app/assets/stylesheets/hovercard.scss

@@ -46,6 +46,10 @@
     }
   }
 
+  &--details {
+    overflow: hidden;
+  }
+
   &--image {
     width: 64px;
     height: 64px;
@@ -56,6 +60,8 @@
   &--heading {
     display: block;
     font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &--sub-heading {

app/assets/stylesheets/user-preview.scss

@@ -21,11 +21,19 @@
       font-weight: 500;
       font-size: 16px;
       font-family: Helvetica, sans-serif;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 130px;
+      display: block;
     }
 
     &-time-ago {
       font-size: 12px;
       color: $color-grey;
+      text-overflow: ellipsis;
+      max-width: 130px;
+      display: block;
+      overflow: hidden;
     }
   }
 }

app/controllers/registrations_controller.rb

@@ -4,7 +4,7 @@ def create
       format.html { super }
       format.json do
         user = User.new(user_params)
-    
+
         if user.save
           sign_in(user)
           render json: { message: 'Thanks for signing up, you are now logged in!' }

app/views/users/hovercard.html.erb

@@ -1,7 +1,7 @@
 <div class="hovercard-<%= @hovercard_position %>" data-target="hovercard.card">
   <div class="arrow"></div>
   <%= image_tag @user.avatar_url, class: "hovercard--image" %>
-  <div>
+  <div class="hovercard--details">
     <span class="hovercard--heading"><%= @user.name %></span>
     <div class="horizontal-line--small"></div>
     <span class="hovercard--content"><%= @user.bio %></span>