Title wraps within word in "Improve the Experience" screen

[kewisch]

On more narrow phones like the Fold, the title wraps. I think we should (to an extent) allow the title to shrink so that Thunderbird fits in one line. I'm not sure there is an easy way without forcing the whole text to fit into one line.

[sens-sens]

Hi, I'm new to contributing and currently learning Android development.
I believe I can help address this issue. I would like to suggest implementing a solution where the title can shrink proportionally on narrower devices like the Fold, to fit within a single line without affecting the rest of the UI. Would it be okay for me to work on this issue?

[ryanleesipes]

@sens-sens please work on it, pull requests welcome!

The TB Android dev room on Matrix is: https://matrix.to/#/#tb-android-dev:mozilla.org

[sens-sens]

The code for the top app bar has inconsistent padding values.

Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(
            start = MainTheme.spacings.half,
            end = MainTheme.spacings.quadruple,
        )
        .then(modifier),
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.CenterVertically,
)

Since the row items are arranged to the center, we can reduce the end padding from MainTheme.spacings.quadruple (32 dp) to MainTheme.spacings.half (4 dp).

This change will provide consistent padding across the app bar while ensuring there’s enough space for the word "Thunderbird."

I've searched for other ways to reduce the size, but as far as I know, those options would modify the theme contents and font size, leading to increased complexity.

Most common foldable phones have a width of about 2.5 inches, so reducing the padding might help fix the issue. On larger screens, there will still be space after the word "Thunderbird" since the items are centered. I tested this in the preview functionality of Android Studio, as I don't have access to foldable emulators.

Can I proceed with this change and create a pull request?

[wmontwe]

We could move the title below the icon to give it enought room, the design was optimized for K-9 Mail which is way shorter. Playing with the paddings would collide with the other screens in the onboarding flow and might not work on very small screens.