UX: Preventing usercard and profile URLs from overflowing

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}}

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"}}

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 {

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 {