Adjust placement of scrolling torrent list

client/source/sass/base/_layout.scss

@@ -42,8 +42,10 @@ body {
   }
 
   &__list {
+
+    &__wrapper {
       flex: 5;
-    margin: 0 10px;
+    }
   }
 
 }

client/source/sass/objects/_action-bar.scss

@@ -48,6 +48,18 @@
   background: $action-bar--background;
   color: $action-bar--foreground;
   display: flex;
+  position: relative;
+
+  &:after {
+    background: $torrent-list--border;
+    bottom: 0;
+    content: '';
+    height: 1px;
+    left: 9px;
+    position: absolute;
+    right: 0;
+    width: auto;
+  }
 
   &__item {
     flex: 3;

client/source/sass/objects/_torrents.scss

@@ -1,16 +1,30 @@
 .torrent {
 
   &__list {
-    background: $torrent-list--background;
-    border-radius: 4px 4px 0 0;
-    box-shadow: 0 0 0 1px $torrent-list--border;
+    box-shadow: -1px 0 0 0 $torrent-list--border;
+    margin: 0 0 0 10px;
+    padding: 10px 0;
+    position: relative;
+
+    &__wrapper {
       list-style: none;
       opacity: 1;
       overflow: auto;
-    padding: 10px 0;
       position: relative;
       transition: opacity 1s;
       user-select: none;
+    }
+
+    &:before {
+      background: $torrent-list--background;
+      bottom: 0;
+      content: '';
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 0;
+    }
 
     &--empty {
       opacity: 0;
@@ -20,16 +34,33 @@
 
 .torrent {
   cursor: default;
-  padding: 10px 25px;
+  padding: 10px 20px;
+  position: relative;
   transition: background 0.25s;
 
   &:hover {
     background: $torrent--background--hover;
+
+    .torrent {
+
+      &__more-info {
+        opacity: 1;
+      }
+    }
   }
 
   &.is-selected {
     background: $torrent--background--selected;
   }
+
+  &__more-info {
+    margin-top: -8px;
+    position: absolute;
+    left: -8px;
+    opacity: 0;
+    top: 50%;
+    transition: opacity 0.25s;
+  }
 }
 
 .torrent {

client/source/scripts/containers/TorrentList.js

@@ -173,8 +173,8 @@ class TorrentList extends React.Component {
     }
 
     return (
-      <ul className="torrent__list" ref="torrentList"
-        onScroll={this.handleScroll}>
+      <div className="torrent__list__wrapper" onScroll={this.handleScroll} ref="torrentList">
+        <ul className="torrent__list">
           <li className="torrent__spacer torrent__spacer--top"
             style={{
               height: listPadding.top + 'px'
@@ -185,6 +185,7 @@ class TorrentList extends React.Component {
               height: listPadding.bottom + 'px'
             }}></li>
         </ul>
+      </div>
     );
   }