Overflow of location badges (#3685)

* Swap to CSS for truncation

* Adjust styling on mobile

* Contain more

* Contain more

* All badges clip

* Adjust badges to truncate again

* Adjust badges to truncate again

* Apply suggestions from code review

app/assets/stylesheets/_members.scss

@@ -40,9 +40,22 @@
   height: 250px;
   width: 100%;
 }
+.card {
+  .badge-location {
+    background-color: darken($blue, 10%);
+    border-radius: 5%;
+    color: $white;
 
-.badge-location {
-  background-color: darken($blue, 10%);
-  border-radius: 5%;
-  color: $white;
-}
+    .fa-map-marker {
+      padding-right: 0.5em;
+    }
+  }
+
+  .badge {
+    text-overflow: ellipsis;
+    white-space: normal;
+    align-items: end;
+    max-height: 1rlh;
+    -webkit-line-clamp: 1;
+  }
+}

app/views/members/_location.html.haml

@@ -1,6 +1,6 @@
 - if member.location.present?
   = link_to place_path(member.location) do
-    %span.badge.badge-location
+    %span.badge.badge-location{ title: member.location }
       = icon 'fas', 'map-marker'
       = truncate(member.location, length: 15, separator: ' ', omission: '... ')
 - else

app/views/members/show.html.haml

@@ -25,9 +25,9 @@
           - @member.roles.each do |role|
             %span.badge.badge-info= role.name.titleize
         - if @member.location.present?
-          %p.badge.badge-location
+          %p.badge.badge-location{ title: @member.location }
             = icon 'fas', 'map-marker'
-            = truncate(@member.location, length: 25, separator: ' ', omission: '... ')
+            = truncate(@member.location, length: 15, separator: ' ', omission: '... ')
         %p
           %strong Member since
           = @member.created_at.to_fs(:date)

app/views/seeds/_card.html.haml

@@ -10,9 +10,9 @@
         = seed.owner_login_name
     .card-body
       - if seed.owner_location
-        %h6.small.badge.badge-pill.badge-location
+        %h6.small.badge.badge-pill.badge-location{ title: seed.owner_location }
           = icon 'fas', 'map-marker'
-          = truncate(seed.owner_location, length: 40, separator: ' ', omission: '... ')
+          = truncate(seed.owner_location, length: 15, separator: ' ', omission: '... ')
       %p
         - if seed.quantity
           .badge.badge-info #{seed.quantity} seeds