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,52 +11,33 @@
     justify-content: space-evenly;
 
     width: 100%;
-}
 
-.card {
+    .__mobile__navmenu_item {
-    width: 100%;
+        display: flex;
-    height: @app_topBar_height;
+        flex-direction: column;
 
-    display: flex;
+        align-items: center;
-    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;
-
-    align-items: center;
-
-    height: fit-content;
-
-    gap: 4px;
-
-    padding: 8px 10px;
-
-    &.active {
-        color: var(--colorPrimary);
-    }
-
-    .icon {
-        margin: 0;
-        line-height: 1rem;
-        font-size: 1.5rem;
-    }
-
-    .label {
         height: fit-content;
-        line-height: 1rem;
+
-        font-size: 0.8rem;
+        gap: 4px;
+
+        padding: 8px 10px;
+
+        &.active {
+            color: var(--colorPrimary);
+        }
+
+        .icon {
+            margin: 0;
+            line-height: 1rem;
+            font-size: 1.5rem;
+        }
+
+        .label {
+            height: fit-content;
+            line-height: 1rem;
+            font-size: 0.8rem;
+        }
     }
 }

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

@@ -31,11 +31,15 @@ export class PagePanelWithNavMenu extends React.Component {
     primaryPanelRef = React.createRef()
 
     componentDidMount() {
-        app.layout.top_bar.shouldUseTopBarSpacer(false)
+        if (app.isMobile) {
+            app.layout.top_bar.shouldUseTopBarSpacer(false)
+        }
     }
 
     componentWillUnmount() {
-        app.layout.top_bar.shouldUseTopBarSpacer(true)
+        if (app.isMobile) {
+            app.layout.top_bar.shouldUseTopBarSpacer(true)
+        }
     }
 
     renderActiveTab() {