ReviewOS

craft-native/craft

Floating nav-bar buttons draw as one oversized rounded slab that runs off the right edge

#355
Closed glennmichael123 opened this 9 days ago ·
9 days ago

On 0.0.173, the floating bar buttons from 0.0.172 do not draw as native bar buttons. They draw as a large rounded slab anchored to the top-right that is clipped by the screen edge, with a step in its lower edge where two of them overlap.

What it should be: two round buttons, each about a bar-button's size, floating like the tab bar does — which is exactly how the commit describes it ("floats the native bar's round buttons … like the tab bar: glass on iOS 26, the thin material with the bar's hairline and shadow before it").

What it is, measured off a screenshot on an iPhone 17 Pro (402×874 pt, iOS 26.5):

  • the slab starts at about x = 278 pt and continues past x = 402, so it is cut off by the right edge
  • it is about 86 pt tall, where a bar button is ~36–44
  • the glyph and the initials sit at its top, with a large empty area beneath them
  • the lower edge has a notch, consistent with two of these overlapping rather than one container

The tab bar on the same screen floats correctly, so the floating treatment itself works; it is the bar buttons' own backgrounds that come out oversized.

What the app passes is only identity, nothing about size — craft.navigation.setOptions({ title, largeTitle: true, rightButtons: [...] }) with each button having id, symbol or title (two initials) or image, variant, badge, accessibilityLabel, onPress. No width, height or padding anywhere.

A person looking at it put it plainly: it does not read as native UI. On a screen whose whole point is that it is native, that is the thing that gives it away.

Reproduces on every screen that uses mobileHeaderOptions (Today, Progress, Store). I cannot check whether 0.0.174+ changes it, because those do not compile (#354).

9 days ago

Correction: the native iOS implementation is on main: each account-style bar button has an independent 44-point custom surface and opts out of the iOS 26 shared platter (6db8540, 6aed18f, 0021a4f). Commit 54e07c7 adds regression assertions for the width/height constraints. This needs to ship in the next published Craft version and be visually checked on iOS 26; I am leaving the issue open until that release validation.

9 days ago

Partial note from re-testing on 0.0.187: with a single floating bar button the rendering is correct — a round button, inside the right edge, at the size asked for (iPhone 17 Pro, iOS 26.5).

I can't confirm the multi-button case, which is what the original report was: the app that produced it has since moved its second button out of the bar, so there is no longer a screen here that asks for two. Leaving this open rather than closing on half a test — if the fix was for the single-button path only, the slab may still be there for anyone drawing two.

9 days ago

Validated and fixed on main, shipped in v0.0.247.

Ran the dedicated iOS 26.5 simulator test testMultipleFloatingNavigationButtonsStayIndependent: both fixture buttons stayed independent, within 36–52pt bounds, inside the window, and non-overlapping. Closing as resolved.

Sign in to comment on this issue.