Web: Common: PageLayout/Headline: fixed styles of header section, filter section

packages/asc-web-common/components/Headline/Headline.js

@@ -4,7 +4,13 @@ import StyledHeading from "./StyledHeadline";
 
 const Headline = ({ type, ...props }) => {
   //console.log("Headline render");
-  return <StyledHeading headlineType={type} {...props} />;
+  return (
+    <StyledHeading
+      headlineType={type}
+      {...props}
+      className={`headline-heading ${props?.className}`}
+    />
+  );
 };
 
 Headline.propTypes = {

packages/asc-web-common/components/Headline/StyledHeadline.js

@@ -21,6 +21,10 @@ const StyledHeading = styled(Heading)`
   font-weight: ${(props) => weight[props.headlineType]};
   color: ${(props) => (props.color ? props.color : props.theme.color)};
   ${NoUserSelect}
+
+  @media (min-width: 1314px) {
+    ${(props) => props.headlineType === "content" && "font-size: 18px"};
+  }
 `;
 StyledHeading.defaultProps = { theme: Base };
 

packages/asc-web-common/components/PageLayout/sub-components/article-header.js

@@ -1,13 +1,19 @@
 import React from "react";
 import styled from "styled-components";
 import equal from "fast-deep-equal/react";
-import { tablet } from "@appserver/components/utils/device";
 
 const StyledArticleHeader = styled.div`
-  border-bottom: 1px solid #eceef1;
   height: 64px;
 
-  @media ${tablet} {
+  @media (min-width: 1314px) {
+    height: 39px;
+
+    .headline-heading {
+      margin-top: -5px;
+    }
+  }
+
+  @media (max-width: 1313px) {
     display: none;
   }
 `;

packages/asc-web-common/components/PageLayout/sub-components/section-filter.js

@@ -4,6 +4,10 @@ import equal from "fast-deep-equal/react";
 
 const StyledSectionFilter = styled.div`
   margin: 16px 24px 9px 0;
+
+  @media (min-width: 1314px) {
+    margin-left: -4px;
+  }
 `;
 
 class SectionFilter extends React.Component {

packages/asc-web-common/components/PageLayout/sub-components/section-header.js

@@ -8,8 +8,7 @@ import { isMobile } from "react-device-detect";
 import { tablet, desktop } from "@appserver/components/utils/device";
 import NoUserSelect from "@appserver/components/utils/commonStyles";
 const StyledSectionHeader = styled.div`
-  border-bottom: 1px solid #eceef1;
-  height: 55px;
+  height: 41px;
   margin-right: 24px;
   margin-top: -1px;
   padding-bottom: 9px;
@@ -27,6 +26,22 @@ const StyledSectionHeader = styled.div`
     }
   `}
 
+  @media (min-width: 1314px) {
+    margin-left: -4px;
+    height: 31px;
+
+    .section-header {
+      margin-top: -4px;
+    }
+
+    .arrow-button {
+      svg {
+        width: 14px !important;
+      }
+      margin-right: 10px !important;
+    }
+  }
+
   @media ${tablet} {
     margin-right: 16px;
   }
@@ -38,8 +53,7 @@ const StyledSectionHeader = styled.div`
       width: 100%;
     `}
 
-    //padding-top: 4px;
-      ${isMobile &&
+    ${isMobile &&
     css`
       position: fixed;
       top: 56px;