Fixes shoutbox styling

app/assets/stylesheets/components/_gather.scss

@@ -35,7 +35,12 @@
   }
 
   .shoutbox-messages {
-    @include span-columns(12);
+    display: table;
+    width: 100%;
+
+    .user {
+      width: 10%;
+    }
 
     .timestamp {
       margin: 0 5px 5px;

app/assets/stylesheets/components/_shoutbox.scss

@@ -10,9 +10,12 @@
   display: table-row;
   margin-bottom: 5px;
   clear: both;
+  position: relative;
 
-  .timestamp {
-    @extend .highlight;
+  .destroy {
+    position: absolute;
+    top: 0;
+    right: -10px;
   }
 
   .user {
@@ -34,6 +37,11 @@
   .message {
     max-width: 66%;
     display: table-cell;
-    padding-left: 10px;
+
+    .contents {
+      position: relative;
+      display: block;
+      padding: 0 10px;
+    }
   }
 }

app/views/shoutmsgs/_shoutmsg.html.erb

@@ -1,9 +1,6 @@
 <div class="shoutmsg">
   <div class="user">
     <span class="username">
-      <% if shoutmsg.can_destroy? cuser %>
-        <%= link_to icon('times'), shoutmsg, method: :delete %> 
-      <% end %>
       <%= namelink shoutmsg.user %>
     </span>
     <span class="time">
@@ -11,6 +8,11 @@
     </span>  
   </div>
   <div class="message">
-    <%= shoutmsg.text %>  
+    <div class="contents">
+      <%= shoutmsg.text %>
+      <% if shoutmsg.can_destroy? cuser %>
+        <%= link_to icon('times'), shoutmsg, method: :delete, class: 'destroy' %>
+      <% end %>
+    </div>
   </div>
 </div>