Skip to content

Facebook provider button labels truncate on phones — AuthMethodPicker hard-codes horizontal padding to 23% of screen width #2424

Description

@joknu1

Environment

  • FirebaseUI version: com.firebaseui:firebase-ui-auth:10.0.0-beta03 (Compose FirebaseAuthScreen)
  • Device: OnePlus 10 Pro (NE2213), Android 16 (API 36), 1080 px wide display
  • Google Play services: 26.26.34
  • Locale: English

Steps to reproduce

  1. Configure FirebaseAuthScreen with Google, Facebook, and Email providers.
  2. Open the auth method picker on an ordinary phone.

Observed

Button labels ellipsize even in English on a regular-width phone:

  • "Sign in with Facebook" renders as "Sign in with Facebo…"
  • With a saved sign-in preference, "Continue with Google" renders as "Continue with Goo…"

Expected

Default provider button labels should fit on common phone widths, and localized labels
(German etc. run longer) even more so.

Analysis

In AuthMethodPicker.kt the provider list is laid out as:

BoxWithConstraints(modifier = Modifier.weight(1f)) {
    val paddingWidth = maxWidth.value * 0.23
    LazyColumn(
        modifier = Modifier.padding(horizontal = paddingWidth.dp),
        ...

23% padding on each side leaves the buttons only ~54% of the screen width — ~580 px on a
1080 px display — which is not enough for the default labels at standard font scale, and
degrades further with larger font-size accessibility settings. A fixed dp padding (or a
max-width constraint like the sheet's BottomSheetDefaults.SheetMaxWidth approach) would
keep buttons readable on phones while still capping width on tablets.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions