fix & improve auto layout

packages/app/constants/routes.js

@@ -16,8 +16,9 @@ export default [
     },
     {
         path: "/play/*",
-        centeredContent: true,
         public: true,
+        centeredContent: true,
+        mobileTopBarSpacer: true,
     },
     {
         path: "/post/*",
@@ -35,12 +36,13 @@ export default [
         public: true
     },
     {
-        path: "/settings/*",
+        path: "/settings",
         useLayout: "default",
         centeredContent: {
             mobile: true,
             desktop: false,
         },
+        mobileTopBarSpacer: true,
     },
     {
         path: "/security/*",

packages/app/src/components/Layout/topBar/index.less

@@ -32,7 +32,8 @@
     justify-content: center;
     align-items: center;
 
-    background-color: var(--background-color-accent);
+    background-color: rgba(var(--background-color-accent-values), 0.8);
+    backdrop-filter: blur(2px);
 
     border-radius: 12px;
 

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

@@ -69,10 +69,10 @@ export class PagePanelWithNavMenu extends React.Component {
     componentWillUnmount() {
         delete app.layout.page_panels
 
-        if (app.isMobile) {
-            app.layout.top_bar.shouldUseTopBarSpacer(false)
-        } else {
+        if (!app.isMobile) {
             app.layout.header.render(null)
+        } else {
+            app.layout.top_bar.renderDefault()
         }
     }
 

packages/app/src/layout.jsx

@@ -157,6 +157,16 @@ export default class Layout extends React.PureComponent {
 				root.classList.remove(classname)
 			}
 		},
+		rootContainerHasClassname: (classname) => {
+			const root = document.documentElement
+
+			if (!root) {
+				console.error("root not found")
+				return false
+			}
+
+			return root.classList.contains(classname)
+		},
 		scrollTo: (to) => {
 			const content_layout = document.getElementById("content_layout")
 

packages/app/src/pages/account/index.mobile.jsx

@@ -59,8 +59,6 @@ export default class Account extends React.Component {
     }
 
     componentDidMount = async () => {
-        app.layout.toggleCenteredContent(true)
-
         this.loadUser()
     }
 

packages/app/src/pages/account/index.mobile.less

@@ -6,7 +6,5 @@
 
     width: 100%;
 
-    padding-top: calc(@topBar_height + @top_bar_padding);
-
     gap: 20px;
 }

packages/app/src/router.jsx

@@ -124,6 +124,12 @@ function generatePageElementWrapper(route, element, bindProps) {
             }
         }
 
+        if (typeof routeDeclaration?.mobileTopBarSpacer === "boolean" && app.isMobile) {
+            app.layout.toggleTopBarSpacer(routeDeclaration.mobileTopBarSpacer)
+        } else {
+            app.layout.toggleTopBarSpacer(false)
+        }
+
         return React.createElement(
             loadable(element, {
                 fallback: React.createElement(bindProps.staticRenders?.PageLoad || DefaultLoadingRender),