fix styling after merge 2

packages/client/src/pages/FormGallery/Filter/index.js

@@ -4,7 +4,7 @@ import CategoryFilter from "./CategoryFilter";
 import LanguageFilter from "./LanguageFilter";
 import SearchFilter from "./SearchFilter";
 import SortFilter from "./SortFilter";
-import { mobile, tablet } from "@docspace/components/utils/device";
+import { hugeDesktop, mobile, tablet } from "@docspace/components/utils/device";
 import { Base } from "@docspace/components/themes";
 
 export const StyledFilter = styled.div`
@@ -32,6 +32,14 @@ export const StyledFilter = styled.div`
     gap: 8px;
   }
 
+  @media ${hugeDesktop} {
+    padding-bottom: 5px;
+  }
+
+  @media ${tablet} {
+    padding-bottom: 16px;
+  }
+
   @media ${mobile} {
     height: 72px;
 

packages/client/src/pages/FormGallery/StyledGallery.js

@@ -1,6 +1,11 @@
 import styled, { css } from "styled-components";
 
-import { tablet, mobile } from "@docspace/components/utils/device";
+import {
+  tablet,
+  mobile,
+  hugeDesktop,
+  desktop,
+} from "@docspace/components/utils/device";
 import Headline from "@docspace/common/components/Headline";
 import ComboBox from "@docspace/components/combobox";
 import { Base } from "@docspace/components/themes";
@@ -13,21 +18,6 @@ const calculateContainerGridColumns = (isRootFolder, isInfoPanelVisible) => {
   return result;
 };
 
-const StyledHeadline = styled(Headline)`
-  width: 100%;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 24px;
-  @media ${tablet} {
-    font-size: 21px;
-    line-height: 28px;
-  }
-  @media ${mobile} {
-    font-size: 18px;
-    line-height: 24px;
-  }
-`;
-
 const StyledContainer = styled.div`
   width: 100%;
   height: 32px;
@@ -51,14 +41,34 @@ const StyledContainer = styled.div`
       theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
   }
 
+  height: 69px;
+  box-sizing: border-box;
+
   @media ${tablet} {
-    width: 100%;
-    padding: 16px 0 16px;
+    height: 69px;
+    padding: 0;
   }
 
   @media ${mobile} {
-    width: 100%;
-    padding: 12px 0 12px;
+    height: 53px;
+    padding: 0;
+  }
+`;
+
+const StyledHeadline = styled(Headline)`
+  width: 100%;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 24px;
+  box-sizing: border-box;
+
+  @media ${tablet} {
+    font-size: 21px;
+    line-height: 28px;
+  }
+  @media ${mobile} {
+    font-size: 18px;
+    line-height: 24px;
   }
 `;
 

packages/client/src/pages/FormGallery/index.js

@@ -65,8 +65,9 @@ const FormGallery = ({
         // withBodyScroll
         // withBodyAutoFocus={!isMobile}
         withPaging={false}
+        isFormGallery
       >
-        <Section.SectionHeader>
+        <Section.SectionHeader isFormGallery>
           <SectionHeaderContent />
         </Section.SectionHeader>
 

packages/common/components/Section/index.js

@@ -47,6 +47,7 @@ const Section = (props) => {
     isInfoPanelScrollLocked,
     isEmptyPage,
     isTrashFolder,
+    isFormGallery,
     currentDeviceType,
   } = props;
 
@@ -173,6 +174,7 @@ const Section = (props) => {
                   showText={showText}
                   isEmptyPage={isEmptyPage}
                   isTrashFolder={isTrashFolder}
+                  isFormGallery={isFormGallery}
                 >
                   {sectionHeaderContent
                     ? sectionHeaderContent.props.children
@@ -215,6 +217,7 @@ const Section = (props) => {
                         settingsStudio={settingsStudio}
                         isEmptyPage={isEmptyPage}
                         isTrashFolder={isTrashFolder}
+                        isFormGallery={isFormGallery}
                       >
                         {sectionHeaderContent
                           ? sectionHeaderContent.props.children

packages/common/components/Section/sub-components/section-header.js

@@ -17,6 +17,13 @@ const StyledSectionHeader = styled.div`
     height: 61px;
     min-height: 61px;
 
+    ${({ isFormGallery }) =>
+      isFormGallery &&
+      css`
+        height: 69px;
+        min-height: 69px;
+      `}
+
     .header-container {
       margin-bottom: 1px;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -85,6 +92,7 @@ const SectionHeader = (props) => {
     className,
     isEmptyPage,
     isTrashFolder,
+    isFormGallery,
     ...rest
   } = props;
 
@@ -95,6 +103,7 @@ const SectionHeader = (props) => {
       viewAs={viewAs}
       settingsStudio={settingsStudio}
       isTrashFolder={isTrashFolder}
+      isFormGallery={isFormGallery}
       {...rest}
     />
   );