Adjust placement of scrolling torrent list

client/source/sass/base/_layout.scss

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

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;
+    box-shadow: -1px 0 0 0 $torrent-list--border;
-    border-radius: 4px 4px 0 0;
+    margin: 0 0 0 10px;
-    box-shadow: 0 0 0 1px $torrent-list--border;
-    list-style: none;
-    opacity: 1;
-    overflow: auto;
     padding: 10px 0;
     position: relative;
-    transition: opacity 1s;
+
-    user-select: none;
+    &__wrapper {
+      list-style: none;
+      opacity: 1;
+      overflow: auto;
+      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,18 +173,19 @@ class TorrentList extends React.Component {
     }
 
     return (
-      <ul className="torrent__list" ref="torrentList"
+      <div className="torrent__list__wrapper" onScroll={this.handleScroll} ref="torrentList">
-        onScroll={this.handleScroll}>
+        <ul className="torrent__list">
-        <li className="torrent__spacer torrent__spacer--top"
+          <li className="torrent__spacer torrent__spacer--top"
-          style={{
+            style={{
-            height: listPadding.top + 'px'
+              height: listPadding.top + 'px'
-          }}></li>
+            }}></li>
-        {torrentList}
+          {torrentList}
-        <li className="torrent__spacer torrent__spacer--bottom"
+          <li className="torrent__spacer torrent__spacer--bottom"
-          style={{
+            style={{
-            height: listPadding.bottom + 'px'
+              height: listPadding.bottom + 'px'
-          }}></li>
+            }}></li>
-      </ul>
+        </ul>
+      </div>
     );
   }