From aa6eebb51b526b00191b808c3d2c314390952536 Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Fri, 11 Dec 2020 14:21:37 +0300
Subject: [PATCH] Web: Files/People: Home: Fixed the displaying load of section
 header

---
 .../pages/Home/Section/Header/index.js        | 34 +++++++++++--------
 .../pages/Home/Section/Header/index.js        | 18 ++++++----
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
index 8696612683..ce58e8b5cb 100644
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js
@@ -62,25 +62,30 @@ const { Consumer } = utils.context;
 const StyledContainer = styled.div`
   .header-container {
     position: relative;
-    display: grid;
-    grid-template-columns: ${(props) =>
-      props.isRootFolder
-        ? "auto auto 1fr"
-        : props.canCreate
-        ? "auto auto auto auto 1fr"
-        : "auto auto auto 1fr"};
+    ${(props) =>
+      props.title &&
+      css`
+        display: grid;
+        grid-template-columns: ${(props) =>
+          props.isRootFolder
+            ? "auto auto 1fr"
+            : props.canCreate
+            ? "auto auto auto auto 1fr"
+            : "auto auto auto 1fr"};
 
+        @media ${tablet} {
+          grid-template-columns: ${(props) =>
+            props.isRootFolder
+              ? "1fr auto"
+              : props.canCreate
+              ? "auto 1fr auto auto"
+              : "auto 1fr auto"};
+        }
+      `}
     align-items: center;
     max-width: calc(100vw - 32px);
 
     @media ${tablet} {
-      grid-template-columns: ${(props) =>
-        props.isRootFolder
-          ? "1fr auto"
-          : props.canCreate
-          ? "auto 1fr auto auto"
-          : "auto 1fr auto"};
-
       .headline-header {
         margin-left: -1px;
       }
@@ -528,6 +533,7 @@ class SectionHeaderContent extends React.Component {
             width={context.sectionWidth}
             isRootFolder={isRootFolder}
             canCreate={canCreate}
+            title={title}
           >
             {isHeaderVisible ? (
               <div className="group-button-menu-container">
diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
index 317e57c814..360a7aeaad 100644
--- a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
+++ b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js
@@ -75,15 +75,20 @@ const StyledContainer = styled.div`
 
   .header-container {
     position: relative;
-    display: grid;
-    grid-template-columns: auto auto 1fr;
+    ${(props) =>
+      props.isLoaded &&
+      css`
+        display: grid;
+        grid-template-columns: auto auto 1fr;
+
+        @media ${tablet} {
+          grid-template-columns: 1fr auto;
+        }
+      `}
+
     align-items: center;
     max-width: calc(100vw - 32px);
 
-    @media ${tablet} {
-      grid-template-columns: 1fr auto;
-    }
-
     .action-button {
       margin-left: 16px;
 
@@ -356,6 +361,7 @@ const SectionHeaderContent = (props) => {
       {(context) => (
         <StyledContainer
           isHeaderVisible={isHeaderVisible}
+          isLoaded={isLoaded}
           width={context.sectionWidth}
         >
           {employeeDialogVisible && (