From 01c2efd6c8115df7c10ae40536eacdd327833174 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <cezaraugusto@outlook.it>
Date: Thu, 27 Apr 2017 15:13:16 -0300
Subject: [PATCH] Split scroll between titles and folders for BM manager -
 Auditors: @bsclifton - Close #5076

---
 .../components/common/scrollableContent.js    | 48 -------------------
 js/about/bookmarks.js                         |  2 +-
 less/about/bookmarks.less                     | 46 ++++++++++++++++--
 less/variables.less                           |  1 +
 4 files changed, 45 insertions(+), 52 deletions(-)
 delete mode 100644 app/renderer/components/common/scrollableContent.js

diff --git a/app/renderer/components/common/scrollableContent.js b/app/renderer/components/common/scrollableContent.js
deleted file mode 100644
index c44cca0b24b..00000000000
--- a/app/renderer/components/common/scrollableContent.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/* 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 {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('../styles/global')
-
-class ScrollableContent extends ImmutableComponent {
-  render () {
-    return <div data-test-id={this.props.testId}
-      className={css(styles.wrapper, this.props.scrollClassName)}>
-      {this.props.children}
-    </div>
-  }
-}
-
-const styles = StyleSheet.create({
-  wrapper: {
-    boxSizing: 'border-box',
-    borderRadius: '4px',
-    paddingRight: globalStyles.spacing.scrollBarSize,
-    overflowX: 'inherit',
-    overflowY: 'inherit',
-    maxHeight: 'inherit',
-
-    '::-webkit-scrollbar': {
-      width: globalStyles.spacing.scrollBarSize
-    },
-
-    '::-webkit-scrollbar-thumb': {
-      background: globalStyles.color.braveOrange,
-      boxShadow: globalStyles.shadow.braveComponentsShadow,
-      borderRadius: '4px'
-    },
-
-    '::-webkit-scrollbar-track': {
-      // specific for this component
-      boxShadow: 'inset 0px 0px 5px -1px rgba(0, 0, 0, 0.25)',
-      borderRadius: '4px',
-      margin: '2px 0'
-    }
-  }
-})
-
-module.exports = ScrollableContent
diff --git a/js/about/bookmarks.js b/js/about/bookmarks.js
index 0cf2869cc75..8c09e8cde3b 100644
--- a/js/about/bookmarks.js
+++ b/js/about/bookmarks.js
@@ -448,7 +448,7 @@ class AboutBookmarks extends React.Component {
     this.refs.bookmarkSearch.focus()
   }
   render () {
-    return <div className='siteDetailsPage' onClick={this.onClick}>
+    return <div className='siteDetailsPage bookmarksManager' onClick={this.onClick}>
       <div className='siteDetailsPageHeader'>
         <AboutPageSectionTitle data-l10n-id='bookmarkManager' />
         <div className='headerActions'>
diff --git a/less/about/bookmarks.less b/less/about/bookmarks.less
index 8c43f6d62f4..1b083a23bec 100644
--- a/less/about/bookmarks.less
+++ b/less/about/bookmarks.less
@@ -11,6 +11,11 @@
   height: 100%;
   min-height: 100vh;
 
+  &.bookmarksManager {
+    position: fixed;
+    width: 100%;
+  }
+
   .siteDetailsPageHeader {
     display: flex;
     padding: 24px;
@@ -51,6 +56,11 @@
 
       > .bookmarkFolderList {
         display: block;
+        overflow-x: auto;
+        overflow-y: auto;
+        max-width: 410px;
+        // viewport - header size - header size
+        max-height: calc(~"100vh - 84px - 35px");
 
         .listItem >* {
           color: @buttonColor;
@@ -76,6 +86,8 @@
     .organizeView {
       flex-grow: 5;
       border-left: 1px solid @braveOrange;
+      overflow: auto;
+      max-height: 100vh;
 
       .sortableTable {
         user-select: none;
@@ -101,8 +113,10 @@
           }
         }
         .title {
-          overflow: hidden;
-          text-overflow: ellipsis;
+          div {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
           span {
             vertical-align: middle;
           }
@@ -114,7 +128,9 @@
         }
         tr:hover {
           .bookmarkLocation {
-            display: inline-block;
+            display: inline;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
         }
         tr.selected:hover {
@@ -185,3 +201,27 @@
 .exportBookmarks {
   -webkit-mask-image: url('../../img/toolbar/bookmarks_export.svg');
 }
+
+// Reset styles for small breakpoints
+@media (max-width: @breakpointForBookmarksPage) {
+  .siteDetailsPage.bookmarksManager {
+    position: static;
+  }
+
+  .siteDetailsPage {
+    .siteDetailsPageContent {
+      .organizeView {
+        overflow: visible;
+        max-height: inherit;
+      }
+      .folderView {
+        > .bookmarkFolderList {
+          overflow-x: visible;
+          overflow-y: visible;
+          max-width: inherit;
+          max-height: inherit;
+        }
+      }
+    }
+  }
+}
diff --git a/less/variables.less b/less/variables.less
index 7e0074c006f..15a70da017d 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -155,6 +155,7 @@
 
 @breakpointWideViewport: 1000px;
 @breakpointNarrowViewport: 600px;
+@breakpointForBookmarksPage: 565px;
 @breakpointExtensionButtonPadding: 720px;
 @breakpointSmallWin32: 650px;
 @breakpointTinyWin32: 500px;