tidy up larger screen display of inbox

app/assets/stylesheets/application.scss

@@ -8,16 +8,6 @@
 @import 'leaflet';
 @import 'leaflet.markercluster';
 
-@import 'predictions';
-@import 'plantings';
-@import 'members';
-@import 'harvests';
-@import 'seeds';
-@import 'posts';
-@import 'crops';
-
-@import 'homepage';
-@import 'photos';
 
 // Font Awesome
 @import 'font-awesome-sprockets';
@@ -26,3 +16,14 @@
 @import 'rails_bootstrap_forms';
 
 @import 'overrides';
+@import 'crops';
+@import 'harvests';
+@import 'members';
+@import 'notifications';
+@import 'plantings';
+@import 'posts';
+@import 'predictions';
+@import 'seeds';
+
+@import 'homepage';
+@import 'photos';

app/assets/stylesheets/notifications.scss

@@ -0,0 +1,3 @@
+.message {
+  width: 100%;
+}

app/views/notifications/index.html.haml

@@ -5,26 +5,29 @@
 - else
   = paginate @notifications, theme: 'twitter-bootstrap-3'
 
-  .index-cards
-    - @notifications.each do |n|
-      .card.message
-        .card-body
-          .row
-            .col-6
-              %p= link_to  n.subject, notification_path(n)
-              %p
-                - if n.read
-                  = n.created_at
-                - else
-                  %strong= n.created_at
-            .col-6
-              = render 'members/tiny', member: n.sender
-              = n.sender
-              = render 'members/follow_buttons', member: n.sender
-        .card-footer
-          = link_to 'Read', n, class: 'btn btn-primary'
-          = link_to 'Reply', reply_link(n), class: 'btn btn-secondary'
-          = link_to n, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-default btn-danger btn-xs' do
-            = delete_icon
-            = t('buttons.delete')
+  - @notifications.each do |n|
+    .card.message
+      .card-body
+        .row
+          .col-6.col-md-9
+            %h3= link_to  n.subject, notification_path(n)
+            %p
+              - if n.read
+                = icon 'far', 'envelope-open'
+              - else
+                = icon 'far', 'envelope'
+                %strong unread
+              = n.created_at
+          .col-6.col-md-3.text-right
+            = link_to n.sender do
+              %h3
+                = render 'members/tiny', member: n.sender
+                = n.sender
+            = render 'members/follow_buttons', member: n.sender
+      .card-footer
+        = link_to 'Read', n, class: 'btn btn-primary'
+        = link_to 'Reply', reply_link(n), class: 'btn btn-secondary'
+        = link_to n, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-default btn-danger btn-xs' do
+          = delete_icon
+          = t('buttons.delete')
   = paginate @notifications