@ossy/app 3.16.0 → 3.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -50,21 +50,21 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
     "@ossy/authentication": "^3.11.1",
-    "@ossy/design-system": "^3.16.0",
+    "@ossy/design-system": "^3.17.0",
     "@ossy/locale": "^3.4.0",
-    "@ossy/manifest": "^3.16.0",
-    "@ossy/package-catalog": "^3.16.0",
+    "@ossy/manifest": "^3.17.0",
+    "@ossy/package-catalog": "^3.17.0",
     "@ossy/pages": "^3.0.9",
-    "@ossy/platform": "^3.16.0",
-    "@ossy/resources": "^3.16.0",
+    "@ossy/platform": "^3.17.0",
+    "@ossy/resources": "^3.17.0",
     "@ossy/router": "^3.0.9",
-    "@ossy/router-react": "^3.16.0",
-    "@ossy/schema": "^3.16.0",
-    "@ossy/sdk": "^3.16.0",
+    "@ossy/router-react": "^3.17.0",
+    "@ossy/schema": "^3.17.0",
+    "@ossy/sdk": "^3.17.0",
     "@ossy/sdk-react": "^3.12.0",
     "@ossy/themes": "^3.8.0",
-    "@ossy/users": "^3.16.0",
-    "@ossy/workspaces": "^3.16.0",
+    "@ossy/users": "^3.17.0",
+    "@ossy/workspaces": "^3.17.0",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -98,5 +98,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "1872fb1467bf656284aae35881c34960c3860807"
+  "gitHead": "91ff7dffe9b0bddcb823daee67213d2008eb64e9"
 }

package/src/shell/AppSettings.jsx

@@ -54,5 +54,13 @@ export function defaultAppSettings() {
        * need live cross-tab cache updates (see @ossy/sdk-react README).
        */
       enablePushInvalidation: false,
+      /**
+       * SSR-only device hint (`Sec-CH-UA-Mobile` client hint / UA sniff —
+       * see `@ossy/platform`'s `detectMobileDevice`). Seeds
+       * `useCompactShellLayout`'s `getServerSnapshot` so mobile requests
+       * don't flash the desktop sidenav before hydration resolves the
+       * real `matchMedia` value (#871).
+       */
+      isMobileDevice: false,
     }
   }

package/src/shell/useCompactShellLayout.js

@@ -1,5 +1,6 @@
-import { useSyncExternalStore } from 'react'
+import { useCallback, useSyncExternalStore } from 'react'
 import { COMPACT_SHELL_MEDIA_QUERY } from './shellChrome.js'
+import { useApp } from './AppContext.js'
 
 export { COMPACT_SHELL_MEDIA_QUERY }
 
@@ -15,10 +16,20 @@ function getSnapshot () {
   return window.matchMedia(COMPACT_SHELL_MEDIA_QUERY).matches
 }
 
-function getServerSnapshot () {
-  return false
-}
-
+/**
+ * Resolves whether the app shell should render compact (mobile) chrome.
+ *
+ * `getServerSnapshot` is seeded from `AppContext.isMobileDevice` — a
+ * server-computed guess based on the `Sec-CH-UA-Mobile` client hint /
+ * User-Agent (see `@ossy/platform`'s `detectMobileDevice`) — instead of
+ * hardcoding `false`. Without this, SSR always assumed desktop, so mobile
+ * requests rendered the full desktop sidenav and snapped closed on
+ * hydration (#871). The client still re-resolves the real value via
+ * `matchMedia` once mounted; a wrong guess only causes one corrective
+ * re-render instead of a guaranteed flash on every mobile page load.
+ */
 export function useCompactShellLayout () {
+  const { isMobileDevice } = useApp()
+  const getServerSnapshot = useCallback(() => isMobileDevice === true, [isMobileDevice])
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }

package/src/shell-registry/header-default.component.jsx

@@ -33,10 +33,11 @@ export default function DefaultHeader ({
       {...rest}
       far={(
         <View
-          layout="row"
+          layout="row-wrap"
           style={{
-            flexShrink: 0,
+            minWidth: 0,
             alignItems: 'center',
+            justifyContent: 'flex-end',
             gap: compact ? 'var(--space-xs)' : 'var(--space-s)',
           }}
         >