From 1de160c7cc5cbe398e19af5eba0a6101e5f1fdbb Mon Sep 17 00:00:00 2001
From: Andrey Savihin <andrey.savihin@onlyoffice.com>
Date: Thu, 14 Nov 2019 16:04:42 +0300
Subject: [PATCH] web: components: render scrollbars outside content

---
 .../components/page-layout/sub-components/section-header.js | 1 +
 .../src/components/page-layout/sub-components/section.js    | 2 +-
 web/ASC.Web.Components/src/components/scrollbar/index.js    | 6 +++++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/ASC.Web.Components/src/components/page-layout/sub-components/section-header.js b/web/ASC.Web.Components/src/components/page-layout/sub-components/section-header.js
index b9d6497a1b..86fcce6657 100644
--- a/web/ASC.Web.Components/src/components/page-layout/sub-components/section-header.js
+++ b/web/ASC.Web.Components/src/components/page-layout/sub-components/section-header.js
@@ -4,6 +4,7 @@ import styled from "styled-components";
 const StyledSectionHeader = styled.div`
   border-bottom: 1px solid #eceef1;
   height: 56px;
+  margin-right: 16px;
 `;
 
 const SectionHeader = React.memo(props => {
diff --git a/web/ASC.Web.Components/src/components/page-layout/sub-components/section.js b/web/ASC.Web.Components/src/components/page-layout/sub-components/section.js
index a3364e2b98..829004541f 100644
--- a/web/ASC.Web.Components/src/components/page-layout/sub-components/section.js
+++ b/web/ASC.Web.Components/src/components/page-layout/sub-components/section.js
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 const StyledSection = styled.section`
-  padding: 0 16px;
+  padding: 0 0 0 16px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
diff --git a/web/ASC.Web.Components/src/components/scrollbar/index.js b/web/ASC.Web.Components/src/components/scrollbar/index.js
index d1752b0bba..33996ecff5 100644
--- a/web/ASC.Web.Components/src/components/scrollbar/index.js
+++ b/web/ASC.Web.Components/src/components/scrollbar/index.js
@@ -36,8 +36,12 @@ const Scrollbar = React.forwardRef((props, ref) => {
     <div {...props} style={{ ...style, ...thumbH }} />
   );
 
+  const renderView = ({ style, ...props }) => (
+    <div {...props} style={{paddingRight: '16px', ...style}} />
+  );
+
   return (
-    <Scrollbars renderThumbVertical={renderNavThumbVertical} renderThumbHorizontal={renderNavThumbHorizontal} {...props} ref={ref} />
+    <Scrollbars renderView={renderView} renderThumbVertical={renderNavThumbVertical} renderThumbHorizontal={renderNavThumbHorizontal} {...props} ref={ref} />
   );
 });