jfs-components 0.0.84 → 0.0.85

package/lib/module/components/AppBar/AppBar.js

@@ -134,21 +134,31 @@ export default function AppBar({
     justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between'
   };
 
-  // Absolutely-centered middle box for SubPage, mirroring the Figma geometry.
-  // `left/top: 50%` + a negative translate keeps it centered regardless of the
-  // bar width, while the fixed width clips overly-wide content (overflow:
-  // hidden) instead of letting it bleed under the leading/actions slots.
-  const subPageMiddleStyle = {
+  // Absolutely-positioned overlay for the SubPage middle slot. Instead of
+  // centering a fixed-height box with `top/left: 50%` + transform (which on
+  // Android resolves the percentage against an intermediate, content-driven
+  // parent height and lands a few px too high), the overlay STRETCHES to fill
+  // the whole bar (`top/bottom/left/right: 0`) and centers its content with
+  // flexbox. This uses the exact same full-height vertical reference as the
+  // leading/actions row (`alignItems: 'center'`), so the middle content always
+  // sits on the same line as the back arrow and end slot on every platform.
+  const subPageMiddleOverlayStyle = {
     position: 'absolute',
-    top: '50%',
-    left: '50%',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  // Fixed-width clipping box (mirrors the Figma "slot wrap" geometry): keeps the
+  // middle content from bleeding under the leading/actions slots while staying
+  // centered within the overlay above.
+  const subPageMiddleBoxStyle = {
     width: middleSlotWidth,
     height: SUBPAGE_MIDDLE_HEIGHT,
-    transform: [{
-      translateX: -middleSlotWidth / 2
-    }, {
-      translateY: -SUBPAGE_MIDDLE_HEIGHT / 2
-    }],
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -183,19 +193,23 @@ export default function AppBar({
       style: actionsStyle,
       children: processedActions
     }), isSub && processedMiddle && /*#__PURE__*/_jsx(View, {
-      style: subPageMiddleStyle,
+      style: subPageMiddleOverlayStyle,
       pointerEvents: "box-none",
       children: /*#__PURE__*/_jsx(View, {
-        style: {
-          flex: 1,
-          minWidth: 1,
-          height: '100%',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center'
-        },
+        style: subPageMiddleBoxStyle,
         pointerEvents: "box-none",
-        children: processedMiddle
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1,
+            minWidth: 1,
+            height: '100%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          pointerEvents: "box-none",
+          children: processedMiddle
+        })
       })
     })]
   });