Android tab-row: equal-width tabs wrap labels onto two lines and the strip paints theme.surface, unlike iOS

[sandermj]

Package: nativephp/mobile-ui 0.4.0, reproduces on current main
Platform: Android

A PR follows this issue.

Steps to reproduce

<tab-row native:model="tab">
    <tab label="Everything" />
    <tab label="Appointments" />
    <tab label="Trainings" />
    <tab label="Events" />
</tab-row>

on a page whose background is not theme.surface.

Expected: what iOS shows — a horizontally scrollable strip of content-sized tabs on a transparent background with a hairline in theme.outline underneath; each label on one line.

Actual on Android: every tab gets a quarter of the width, longer labels wrap onto two lines so the strip grows tall and uneven, and the strip paints its own surface colour, a white band on a light page.

Cause

TabRowRenderer.kt uses Material 3's fixed PrimaryTabRow with containerColor = theme.surface.

Proposed fix

Mirror the iOS strip: PrimaryScrollableTabRow with edgePadding = 0.dp (content-sized tabs, scrolls on overflow), labels maxLines = 1, softWrap = false, a transparent container and HorizontalDivider(color = theme.outline). An authored background on the <tab-row> node still paints, so a surface-coloured strip remains possible; only the implicit one goes.

Files involved

resources/android/TabRowRenderer.kt.