From 9aa17258fcccf5b1f292e1190bd9a2968822274e Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 15 Sep 2021 14:30:32 +0100
Subject: [PATCH 1/1] Use flexbox to position user thumbnails on the dashboard

This fixes a poor interaction involving lots of margins and the secondary-actions list
---
 app/assets/stylesheets/common.scss     | 18 ++++++------------
 app/views/dashboards/_contact.html.erb | 12 +++++++-----
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 924be7651..e0eec7bda 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1101,18 +1101,6 @@ tr.turn:hover {
   width: 100%;
 }
 
-.activity-details p {
-  margin-left: 70px;
-  margin-bottom: 0;
-}
-
-.dashboards-show {
-  .user_thumbnail {
-    margin-top: $lineheight/4;
-    float: left;
-  }
-}
-
 /* Rules for the user map */
 
 .content_map .leaflet-popup-content {
@@ -1455,6 +1443,12 @@ img.user_thumbnail {
   margin-right: $lineheight;
 }
 
+img.user_thumbnail_no_margins {
+  max-width: 50px;
+  max-height: 50px;
+  border: 1px solid $grey;
+}
+
 img.user_thumbnail_tiny {
   width: auto;
   height: auto;
diff --git a/app/views/dashboards/_contact.html.erb b/app/views/dashboards/_contact.html.erb
index 545557e64..7614c0c4d 100644
--- a/app/views/dashboards/_contact.html.erb
+++ b/app/views/dashboards/_contact.html.erb
@@ -4,10 +4,12 @@
      :icon => image_path(type == "friend" ? "marker-blue.png" : "marker-green.png"),
      :description => render(:partial => "popup", :object => contact, :locals => { :type => type })
    } %>
-<%= tag.div :class => "contact-activity clearfix", :data => { :user => user_data } do %>
-  <%= user_thumbnail contact %>
-  <div class='activity-details'>
-    <p class='text-muted'>
+<%= tag.div :class => "contact-activity clearfix row", :data => { :user => user_data } do %>
+  <div class="col-auto">
+    <%= user_thumbnail contact, :class => "user_thumbnail_no_margins" %>
+  </div>
+  <div class="col">
+    <p class='text-muted mb-0'>
       <%= link_to contact.display_name, user_path(contact) %>
       <% if @user.home_lon and @user.home_lat and contact.home_lon and contact.home_lat %>
         <% distance = @user.distance(contact) %>
@@ -18,7 +20,7 @@
         <% end %>
       <% end %>
     </p>
-    <p>
+    <p class="mb-0">
       <% changeset = contact.changesets.first %>
       <% if changeset %>
         <%= t("users.show.latest edit", :ago => time_ago_in_words(changeset.created_at, :scope => :"datetime.distance_in_words_ago")) %>
-- 
2.45.2