jfs-components 0.0.84 → 0.0.85

package/src/components/AppBar/AppBar.tsx

@@ -194,20 +194,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: ViewStyle = {
+  // 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: ViewStyle = {
     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: ViewStyle = {
     width: middleSlotWidth,
     height: SUBPAGE_MIDDLE_HEIGHT,
-    transform: [
-      { translateX: -middleSlotWidth / 2 },
-      { translateY: -SUBPAGE_MIDDLE_HEIGHT / 2 },
-    ],
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -260,19 +271,21 @@ export default function AppBar({
        * so its content fills / shrinks within the fixed-width box.
        */}
       {isSub && processedMiddle && (
-        <View style={subPageMiddleStyle} pointerEvents="box-none">
-          <View
-            style={{
-              flex: 1,
-              minWidth: 1,
-              height: '100%',
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-            pointerEvents="box-none"
-          >
-            {processedMiddle}
+        <View style={subPageMiddleOverlayStyle} pointerEvents="box-none">
+          <View style={subPageMiddleBoxStyle} pointerEvents="box-none">
+            <View
+              style={{
+                flex: 1,
+                minWidth: 1,
+                height: '100%',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              pointerEvents="box-none"
+            >
+              {processedMiddle}
+            </View>
           </View>
         </View>
       )}