Brave payments: Line should always appear when user scroll down

js/about/preferences.js

@@ -20,6 +20,7 @@ const {passwordManagers, extensionIds} = require('../constants/passwordManagers'
 const aboutActions = require('./aboutActions')
 const getSetting = require('../settings').getSetting
 const SortableTable = require('../components/sortableTable')
+const FixedHeaderTable = require('../components/fixedHeaderTable')
 const Button = require('../components/button')
 const searchProviders = require('../data/searchProviders')
 const moment = require('moment')
@@ -258,11 +259,11 @@ class LedgerTable extends ImmutableComponent {
       return null
     }
     return <div id='ledgerTable'>
-      <SortableTable
+      <FixedHeaderTable
         headings={['rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
         defaultHeading='rank'
         overrideDefaultStyle
-        columnClassNames={['alignRight', '', '', 'alignRight', 'alignRight', 'alignRight']}
+        columnClassNames={['alignRight', '', '', 'alignRight', 'alignRight', '']}
         rowClassNames={
           this.synopsis.map((item) =>
             this.enabledForSite(item) ? '' : 'paymentsDisabled').toJS()

js/components/fixedHeaderTable.js

@@ -0,0 +1,20 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('./immutableComponent')
+const SortableTable = require('./sortableTable')
+
+class FixedHeaderTable extends ImmutableComponent {
+  render () {
+    return <div className='fixed-table-container'>
+      <div className='table-header' />
+      <div className='fixed-table-container-inner'>
+        <SortableTable {...this.props} />
+      </div>
+    </div>
+  }
+}
+
+module.exports = FixedHeaderTable

js/components/sortableTable.js

@@ -80,9 +80,10 @@ class SortableTable extends ImmutableComponent {
             return <th className={cx({
               'sort-header': true,
               'sort-default': heading === this.props.defaultHeading})}
-              data-l10n-id={heading}
               data-sort-method={dataType === 'number' ? 'number' : undefined}
-              data-sort-order={this.props.defaultHeadingSortOrder} />
+              data-sort-order={this.props.defaultHeadingSortOrder}>
+              <div className='th-inner' data-l10n-id={heading} />
+            </th>
           })}
         </tr>
       </thead>

less/about/preferences.less

@@ -537,8 +537,6 @@ table.sortableTable {
 }
 
 #ledgerTable {
-  height: ~"-webkit-calc(100vh - 300px)";
-  overflow-y: auto;
 
   tr {
     th,
@@ -547,6 +545,42 @@ table.sortableTable {
     }
   }
 
+  .fixed-table-container {
+     height: 500px;
+     position: relative;
+
+     .table-header {
+       height: 30px;
+       background: @veryLightGray;
+       position: absolute;
+       top: 0;
+       right: 0;
+       left: 0;
+     }
+
+     .fixed-table-container-inner {
+       overflow-x: hidden;
+       overflow-y: auto;
+       height: 100%;
+
+       table {
+         width: 100%;
+         overflow-x: hidden;
+         overflow-y: auto;
+
+         .th-inner {
+           color: @darkGray;
+           font-weight: 600;
+           position: absolute;
+           top: 0;
+           line-height: 30px;
+           z-index: 9;
+           background: @veryLightGray;
+         }
+       }
+     }
+   }
+
 }
 
 .modal .dialog.paymentHistory .sectionTitle {