From 5f198cb32e63c1766977134c73e8060818482891 Mon Sep 17 00:00:00 2001
From: AtuyL <atuyl.jp@gmail.com>
Date: Fri, 23 Nov 2018 19:58:00 +0900
Subject: [PATCH] fix: to be fixed position the list header.

---
 app/components/table-row.js |  2 +-
 app/components/table.js     | 29 ++++++++++++++++-------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/components/table-row.js b/app/components/table-row.js
index 01368cd9..361b63dd 100644
--- a/app/components/table-row.js
+++ b/app/components/table-row.js
@@ -10,7 +10,7 @@ import FinderButton from './finder-button'
 import HexContent from './hex-content'
 import TitleField from './title-field'
 
-const Tr = styled.tr`
+export const Tr = styled.tr`
   transition: background-color 0.025s ease-out;
   &:hover,
   &:focus {
diff --git a/app/components/table.js b/app/components/table.js
index 2033655e..e40c87a0 100644
--- a/app/components/table.js
+++ b/app/components/table.js
@@ -3,6 +3,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import TableRowContainer from '../containers/table-row'
+import { Tr } from './table-row'
 import Empty from './empty'
 
 const StyledTable = styled.table`
@@ -14,6 +15,9 @@ const StyledTable = styled.table`
   td {
     padding-right: 0.75rem;
     padding-left: 0.75rem;
+    &:nth-child(2) {
+      padding-left: 0;
+    }
   }
   th {
     height: 4rem;
@@ -22,13 +26,8 @@ const StyledTable = styled.table`
     color: var(--color-neutral-60);
     border-bottom: 1px solid var(--color-neutral-20);
     &:first-child {
-      width: 3rem;
-      padding: 0;
       border: none;
     }
-    &:last-child {
-      width: 8.25rem;
-    }
   }
   td {
     height: 4rem;
@@ -46,24 +45,28 @@ const Table = ({ dats, show }) => {
   if (!Object.keys(dats).length) return <Empty />
 
   return (
-    <main>
+    <main className='flex flex-column'>
       <StyledTable>
         <thead>
-          <tr>
+          <Tr>
             <th className='cell-1' />
             <th className='tl cell-2'>Link</th>
             <th className='tl cell-3'>Status</th>
             <th className='tl cell-4'>Size</th>
             <th className='tl cell-5'>Peers</th>
             <th className='cell-6' />
-          </tr>
+          </Tr>
         </thead>
-        <tbody>
-          {Object.keys(dats).map(key => (
-            <TableRowContainer key={key} dat={dats[key]} />
-          ))}
-        </tbody>
       </StyledTable>
+      <div className='flex-auto overflow-y-auto'>
+        <StyledTable>
+          <tbody>
+            {Object.keys(dats).map(key => (
+              <TableRowContainer key={key} dat={dats[key]} />
+            ))}
+          </tbody>
+        </StyledTable>
+      </div>
     </main>
   )
 }