Improve display of conversation details

Author: rsmithlal

app/views/better_together/conversations/_conversation_content.html.erb

@@ -1,12 +1,17 @@
 <!-- app/views/conversations/_conversation_content.html.erb -->
-<div id="<%= dom_id(conversation) %>" class="conversation-messages card shadow-sm d-flex flex-column justify-content-between h-100">
-  <div class="card-header bg-secondary text-white text-center d-flex align-content-center justify-content-between rounded-0">
-    <%= render partial: 'better_together/people/mention', collection: conversation.participants, as: :person %>
+<div id="<%= dom_id(conversation) %>" class="conversation-messages card shadow-sm d-flex flex-column justify-content-between" style="height: calc(100vh - 56px);">
+  <div class="card-header bg-secondary text-white text-center d-flex align-items-center px-2 rounded-0">
+    <a class="text-decoration-none align-self-start p-4" href="<%= conversations_path %>">
+      <i class="fas fa-arrow-left fa-2x "></i>
+    </a>
     <% if conversation.title.present? %>
-      <h4 class="m-0">
+      <h4 class="m-0 me-4 align-self-center">
         <%= conversation.title %>
       </h4>
     <% end %>
+    <div class="conversation-participants w-100 d-flex align-items-top justify-content-evenly overflow-auto">
+      <%= render partial: 'better_together/people/mention', collection: conversation.participants, as: :person, locals: { flex_layout: 'flex-column', flex_align_items: 'center' } %>
+    </div>
   </div>
 
   <div id="conversation_messages" class="card-body p-4" style="overflow-y: auto; height: 50vh;" data-controller="better_together--conversation-messages">

app/views/better_together/conversations/show.html.erb

@@ -1,5 +1,3 @@
 <!-- app/views/conversations/show.html.erb -->
-<%= render 'communicator' do %>
-  <%= render partial: 'better_together/conversations/conversation_content', locals: { conversation: @conversation, messages: @messages, message: @message } %>
-<% end %>
 
+<%= render partial: 'better_together/conversations/conversation_content', locals: { conversation: @conversation, messages: @messages, message: @message } %>