From 56352137caa3011e9a2241e3367a7072f3fb2a0e Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 9 Feb 2018 16:55:43 -0500
Subject: [PATCH] UX: Preventing usercard and profile URLs from overflowing

---
 .../components/user-card-contents.hbs         |  2 +-
 .../javascripts/discourse/templates/user.hbs  |  2 +-
 app/assets/stylesheets/desktop/user-card.scss | 30 ++++++++++++++-----
 app/assets/stylesheets/desktop/user.scss      |  6 ++++
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
index 31e9c70b270..614c4808d3c 100644
--- a/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-card-contents.hbs
@@ -103,7 +103,7 @@
     {{#if hasLocationOrWebsite}}
       <div class="location-and-website">
         {{#if user.location}}
-          <span class='location'>{{d-icon "map-marker"}} {{user.location}}</span>
+          <span class='location'>{{d-icon "map-marker"}} <span>{{user.location}}</span></span>
         {{/if}}
 
         {{#if user.website_name}}
diff --git a/app/assets/javascripts/discourse/templates/user.hbs b/app/assets/javascripts/discourse/templates/user.hbs
index 882b312c80c..f20660c64ac 100644
--- a/app/assets/javascripts/discourse/templates/user.hbs
+++ b/app/assets/javascripts/discourse/templates/user.hbs
@@ -73,7 +73,7 @@
               <h3>{{model.title}}</h3>
             {{/if}}
             {{plugin-outlet name="user-post-names" args=(hash model=model)}}
-            <h3>
+            <h3 class="location-and-website">
             {{#if model.location}}{{d-icon "map-marker"}} {{model.location}}{{/if}}
             {{#if model.website_name}}
               {{d-icon "globe"}}
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index e55a5acea58..3d699d3ccf6 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -165,15 +165,31 @@ $user_card_background: $secondary;
   }
 
   .location-and-website {
-    clear: left;
-    margin-top: 5px;
-    .location {margin-right: 10px;}
-    .website-name {
-      a {
-        text-decoration: underline;
-        color: $user_card_primary;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding-top: 5px;
+    .location, .website-name {
+      display: flex;
+      flex: 1 1 50%;
+      max-width: 50%;
+      overflow: hidden;
+      align-items: baseline;
+      i {
+        margin-right: .25em;
       }
     }
+    .website-name a, .location span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: $user_card_primary;        
+    }
+    .location {
+      margin-right: .5em;
+    }
+    .website-name a {
+      text-decoration: underline;
+    }
   }
 
   .user-card-avatar {
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 52611d69bea..d342a3a83eb 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -176,6 +176,12 @@
           a[href] {
             text-decoration: underline;
           }
+          .location-and-website {
+            max-width: 100%;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
         }
 
         .bio {