fix style for desktop

packages/app/src/components/PagePanels/components/NavMenu/index.jsx

@@ -34,7 +34,7 @@ const NavMenuMobile = (props) => {
                 return <antd.Button
                     key={item.key}
                     className={classnames(
-                        "card_item",
+                        "__mobile__navmenu_item",
                         item.key === props.activeKey && "active",
                     )}
                     onClick={() => props.onClickItem(item.key)}

packages/app/src/components/PagePanels/components/NavMenu/index.less

@@ -11,28 +11,8 @@
     justify-content: space-evenly;
 
     width: 100%;
-}
 
-.card {
+    .__mobile__navmenu_item {
-    width: 100%;
-    height: @app_topBar_height;
-
-    display: flex;
-    flex-direction: row;
-
-    justify-content: space-evenly;
-
-    box-shadow: @card-shadow;
-
-    gap: 10px;
-    padding: 5px;
-    border-radius: 12px;
-
-    isolation: unset;
-    overflow: visible;
-}
-
-.card_item {
         display: flex;
         flex-direction: column;
 
@@ -60,3 +40,4 @@
             font-size: 0.8rem;
         }
     }
+}

packages/app/src/components/PagePanels/index.jsx

@@ -31,12 +31,16 @@ export class PagePanelWithNavMenu extends React.Component {
     primaryPanelRef = React.createRef()
 
     componentDidMount() {
+        if (app.isMobile) {
             app.layout.top_bar.shouldUseTopBarSpacer(false)
         }
+    }
 
     componentWillUnmount() {
+        if (app.isMobile) {
             app.layout.top_bar.shouldUseTopBarSpacer(true)
         }
+    }
 
     renderActiveTab() {
         if (!Array.isArray(this.props.tabs)) {