🐛 [firebase_ui_auth] SMSCodeInputScreen code input has overflow error at certain screen widths

[stevebread]

Bug report

Describe the bug
The code input field of SMSCodeInputScreen of phone login shows a render overflow error when used on web and screen width is in the range 500px < screenWidth < 660px

Steps to reproduce

Steps to reproduce the behavior:

1. Create a login with phone provider as shown in the firebase_ui_auth example
2. Launch the app from IDE with Chrome as target device
3. Enter a valid/test phone number on the phone input screen and click Next
4. Extend/Collapse the browser window horizontally till the overflow appears

Expected behavior

No overflow 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]

---

[darshankawar]

Thanks for the report. Using plugin example and running on web, seeing same behavior after resizing the browser window horizontally: