🐛 [firebase_ui_auth] SMSCodeInputScreen displays overflow error when an error message is displayed

Bug report

Describe the bug SMSCodeInputScreen of phone login shows a render overflow error when an error message is displayed on entering an incorrect code. Have tried this on web, not on mobile.

Steps to reproduce

Steps to reproduce the behavior:

Create a login with phone provider as shown in the firebase_ui_auth example
Launch the app from IDE with Chrome as target device. Extend the browser window horizontally so that the phone icon and form are displayed side-by-side
Enter a valid/test phone number on the phone input screen and click Next
Enter an invalid code on code input screen and click Next
An error message is displayed under the code input and an overflow error appears for the buttons. If you don't see the error, extend the browser window horizontally. The overflow only appears for me after the window is >= 776px wide

sms code overflow

Expected behavior

No render error

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand

``` [√] Flutter (Channel stable, 3.3.10, on Microsoft Windows [Version 10.0.19045.2364], locale en-US) [√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) [√] Chrome - develop for the web [X] Visual Studio - develop for Windows X Visual Studio not installed; this is necessary for Windows development. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [√] Android Studio (version 2021.2) [√] VS Code (version 1.63.2) [√] Connected device (3 available) [√] HTTP Host Availability ! Doctor found issues in 1 category. ```

Flutter dependencies

Run flutter pub deps -- --style=compact and paste the output below:

Click To Expand

``` Dart SDK 2.18.6 Flutter SDK 3.3.10 testapp 1.0.0+1 dependencies: - cloud_firestore 4.3.0 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core firebase_core_platform_interface flutter meta] - cupertino_icons 1.0.5 - firebase_auth 4.2.3 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_platform_interface flutter meta] - firebase_core 2.4.0 [firebase_core_platform_interface firebase_core_web flutter meta] - firebase_ui_auth 1.1.5 [email_validator firebase_auth firebase_core firebase_dynamic_links firebase_ui_localizations firebase_ui_oauth flutter flutter_localizations flutter_svg] - flutter 0.0.0 [characters collection material_color_utilities meta vector_math sky_engine] - go_router 6.0.0 [collection flutter flutter_web_plugins logging meta] dev dependencies: - flutter_lints 2.0.1 [lints] - flutter_test 0.0.0 [flutter test_api path fake_async clock stack_trace vector_math async boolean_selector characters collection matcher material_color_utilities meta source_span stre am_channel string_scanner term_glyph] transitive dependencies: - _flutterfire_internals 1.0.11 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core firebase_core_platform_interface flutter meta] - async 2.9.0 [collection meta] - boolean_selector 2.1.0 [source_span string_scanner] - characters 1.2.1 - clock 1.1.1 - cloud_firestore_platform_interface 5.10.0 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - cloud_firestore_web 3.2.0 [_flutterfire_internals cloud_firestore_platform_interface collection firebase_core firebase_core_web flutter flutter_web_plugins js] - collection 1.16.0 - crypto 3.0.2 [typed_data] - desktop_webview_auth 0.0.11 [crypto flutter http flutter_web_plugins plugin_platform_interface] - email_validator 2.1.17 - fake_async 1.3.1 [clock collection] - firebase_auth_platform_interface 6.11.6 [_flutterfire_internals collection firebase_core flutter meta plugin_platform_interface] - firebase_auth_web 5.2.3 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutter_web_plugins http_parser intl js meta] - firebase_core_platform_interface 4.5.2 [collection flutter flutter_test meta plugin_platform_interface] - firebase_core_web 2.0.2 [firebase_core_platform_interface flutter flutter_web_plugins js meta] - firebase_dynamic_links 5.0.10 [firebase_core firebase_core_platform_interface firebase_dynamic_links_platform_interface flutter meta plugin_platform_interface] - firebase_dynamic_links_platform_interface 0.2.3+25 [_flutterfire_internals firebase_core flutter meta plugin_platform_interface] - firebase_ui_localizations 1.0.2 [flutter flutter_localizations intl path] - firebase_ui_oauth 1.1.5 [desktop_webview_auth firebase_auth firebase_ui_auth flutter_svg flutter] - flutter_localizations 0.0.0 [flutter intl characters clock collection material_color_utilities meta path vector_math] - flutter_svg 1.1.6 [flutter meta path_drawing vector_math xml] - flutter_web_plugins 0.0.0 [flutter js characters collection material_color_utilities meta vector_math] - http 0.13.5 [async http_parser meta path] - http_parser 4.0.2 [collection source_span string_scanner typed_data] - intl 0.17.0 [clock path] - js 0.6.4 - lints 2.0.1 - logging 1.1.0 - matcher 0.12.12 [stack_trace] - material_color_utilities 0.1.5 - meta 1.8.0 - path 1.8.2 - path_drawing 1.0.1 [vector_math meta path_parsing flutter] - path_parsing 1.0.1 [vector_math meta] - petitparser 5.1.0 [meta] - plugin_platform_interface 2.1.3 [meta] - sky_engine 0.0.99 - source_span 1.9.0 [collection path term_glyph] - stack_trace 1.10.0 [path] - stream_channel 2.1.0 [async] - string_scanner 1.1.1 [source_span] - term_glyph 1.2.1 - test_api 0.4.12 [async boolean_selector collection meta source_span stack_trace stream_channel string_scanner term_glyph matcher] - typed_data 1.3.1 [collection] - vector_math 2.1.2 - xml 6.1.0 [collection meta petitparser] ```

Thanks for the report. Seeing same behavior using plugin example.

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering
with a yellow and
black striped pattern. This is usually caused by the contents being too big for
the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the
children of the
RenderFlex to fit within the available space instead of being sized to their
natural size.
This is considered an error condition because it indicates that there is content
that cannot be
seen. If the content is legitimately bigger than the available space, consider
clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container
rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#1968e relayoutBoundary=up28
OVERFLOWING:
  needs compositing
  creator: Column ← KeyedSubtree-[GlobalKey#77564] ← IntrinsicHeight ←
  ConstrainedBox ← Center ←
    RepaintBoundary ← IndexedSemantics ← _SelectionKeepAlive ←
    NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive
    ← KeyedSubtree ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=500.0, h=281.0)
  size: Size(330.0, 281.0)
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: min
  crossAxisAlignment: center
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════
════════════════════

firebase / FirebaseUI-Flutter