Component lists are tidied up a bit

app/assets/sass/_status-page.scss

@@ -16,6 +16,13 @@ body.status-page {
         margin-bottom: 20px;
     }
 
+    .tooltip {
+        .tooltip-inner {
+            padding: 8px 12px;
+            font-size: 14px;
+        }
+    }
+
     .text-success, .text-component-1 {
         color: $green;
     }
@@ -221,9 +228,10 @@ body.status-page {
             background-color: #ffffff;
             border: 1px solid $grey;
             font-size: 1.1em;
+            padding: 15px 15px;
 
             h4 {
-                margin-bottom: 2px;
+                margin: 0;
                 font-weight: 400;
                 max-width: 90%;
             }

app/views/partials/components.blade.php

@@ -2,13 +2,24 @@
 <ul class='list-group components'>
     @foreach($components as $component)
     <li class='list-group-item component'>
-        @if($component->link)
-        <h3 class='pull-right'><a href='{{ $component->link }}' target='_blank'><i class='ion ion-link'></i></a></h3>
-        @endif
-        <h4>{{ $component->name }} <small class='text-component-{{ $component->status }}'>{{ $component->humanStatus }}</small></h4>
-        @if($component->description)
-        <p>{{ $component->description }}</p>
-        @endif
+        <div class='row'>
+            <div class='col-xs-10'>
+                <h4>
+                    {{ $component->name }}
+                    @if($component->description)
+                    <i class='ion ion-ios-help-outline' data-toggle='tooltip' data-title="{{ $component->description }}"></i>
+                    @endif
+                    <small class='text-component-{{ $component->status }}'>{{ $component->humanStatus }}</small>
+                </h4>
+            </div>
+            <div class='col-xs-2 text-right'>
+                <h4>
+                    @if($component->link)
+                    <a href='{{ $component->link }}' target='_blank'><i class='ion ion-link'></i></a>
+                    @endif
+                </h4>
+            </div>
+        </div>
     </li>
     @endforeach
 </ul>