diff --git a/packages/app/src/components/PagePanels/index.jsx b/packages/app/src/components/PagePanels/index.jsx
index 5c37228b..8eb03a0b 100755
--- a/packages/app/src/components/PagePanels/index.jsx
+++ b/packages/app/src/components/PagePanels/index.jsx
@@ -124,16 +124,20 @@ export class PagePanelWithNavMenu extends React.Component {
         app.history.replace(`${window.location.pathname}?type=${this.state.activeTab}`)
     }
 
-    tabChange = (key) => {
-        if (this.props.onTabChange) {
-            this.props.onTabChange(key)
+    tabChange = async (key) => {
+        if (this.props.beforeTabChange) {
+            await this.props.beforeTabChange(key)
         }
 
-        this.setState({ activeTab: key })
+        await this.setState({ activeTab: key })
 
         if (this.props.useSetQueryType) {
             this.replaceQueryTypeToCurrentTab()
         }
+
+        if (this.props.onTabChange) {
+            this.props.onTabChange(key)
+        }
     }
 
     handleTabChange = async (key) => {
@@ -230,6 +234,8 @@ export class PagePanelWithNavMenu extends React.Component {
             <PagePanels
                 primaryPanelClassName={this.props.primaryPanelClassName}
                 panels={panels}
+                masked={this.props.masked}
+                no_top_padding={this.props.no_top_padding}
             />
         </>
     }
@@ -262,7 +268,13 @@ export default class PagePanels extends React.Component {
         }
 
         return <div
-            className="pagePanels"
+            className={classnames(
+                "pagePanels",
+                {
+                    ["masked"]: this.props.masked,
+                    ["withTopPadding"]: !!!this.props.no_top_padding
+                }
+            )}
             style={this.generateGridStyle()}
         >
             {
diff --git a/packages/app/src/components/PagePanels/index.less b/packages/app/src/components/PagePanels/index.less
index 975f59a4..3fa3cfdc 100755
--- a/packages/app/src/components/PagePanels/index.less
+++ b/packages/app/src/components/PagePanels/index.less
@@ -4,9 +4,11 @@
     &.mobile {
         &.page-panel-spacer {
             .pagePanels {
-                .panel {
-                    &.center {
-                        padding-top: calc(@top_bar_height + @top_bar_padding * 2);
+                &.withTopPadding {
+                    .panel {
+                        &.center {
+                            padding-top: calc(@top_bar_height + @top_bar_padding * 2);
+                        }
                     }
                 }
             }
@@ -28,8 +30,10 @@
 
             padding: 0;
 
-            -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
-            mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
+            &.masked {
+                -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
+                mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 97%, transparent 100%);
+            }
 
             .panel {
                 width: 100%;