TF-2180 Fix suggestion list being hidden once user use device with small screen

(cherry picked from commit 924490be86d36a0cb206d867ced790ae49454673)

lib/features/composer/presentation/styles/recipient_composer_widget_style.dart

@@ -6,10 +6,19 @@ class RecipientComposerWidgetStyle {
   static const double deleteRecipientFieldIconSize = 20;
   static const double space = 8;
   static const double enableBorderRadius = 10;
+  static const double suggestionsBoxElevation = 20.0;
+  static const double suggestionsBoxRadius = 20;
+  static const double suggestionsBoxMaxHeight = 350;
+  static const double suggestionBoxWidth = 300;
+  static const double minTextFieldWidth = 20;
+  static const double tagSpacing = 8;
+
+  static const Duration suggestionDebounceDuration = Duration(milliseconds: 150);
 
   static const Color borderColor = AppColor.colorLineComposer;
   static const Color deleteRecipientFieldIconColor = AppColor.colorCollapseMailbox;
   static const Color enableBorderColor = AppColor.primaryColor;
+  static const Color suggestionsBoxBackgroundColor = Colors.white;
 
   static const EdgeInsetsGeometry deleteRecipientFieldIconPadding = EdgeInsetsDirectional.all(3);
   static const EdgeInsetsGeometry prefixButtonPadding = EdgeInsetsDirectional.symmetric(vertical: 3, horizontal: 5);

lib/features/composer/presentation/widgets/recipient_composer_widget.dart

@@ -1,8 +1,10 @@
 
 import 'dart:async';
+import 'dart:math';
 
 import 'package:collection/collection.dart';
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:core/utils/platform_info.dart';
@@ -111,6 +113,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
 
   @override
   Widget build(BuildContext context) {
+    return LayoutBuilder(builder: (context, constraints) {
       return Container(
         decoration: const BoxDecoration(
           border: Border(
@@ -161,16 +164,17 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                               autoDisposeFocusNode: widget.autoDisposeFocusNode,
                               keyboardType: TextInputType.emailAddress,
                               textInputAction: TextInputAction.done,
-                            debounceDuration: const Duration(milliseconds: 150),
+                              debounceDuration: RecipientComposerWidgetStyle.suggestionDebounceDuration,
                               hasAddButton: false,
-                            tagSpacing: 8,
+                              tagSpacing: RecipientComposerWidgetStyle.tagSpacing,
                               autofocus: widget.prefix != PrefixEmailAddress.to && _currentListEmailAddress.isEmpty,
-                            minTextFieldWidth: 20,
+                              minTextFieldWidth: RecipientComposerWidgetStyle.minTextFieldWidth,
                               resetTextOnSubmitted: true,
-                            suggestionsBoxElevation: 20.0,
+                              suggestionsBoxElevation: RecipientComposerWidgetStyle.suggestionsBoxElevation,
-                            suggestionsBoxBackgroundColor: Colors.white,
+                              suggestionsBoxBackgroundColor: RecipientComposerWidgetStyle.suggestionsBoxBackgroundColor,
-                            suggestionsBoxRadius: 20,
+                              suggestionsBoxRadius: RecipientComposerWidgetStyle.suggestionsBoxRadius,
-                            suggestionsBoxMaxHeight: 350,
+                              suggestionsBoxMaxHeight: RecipientComposerWidgetStyle.suggestionsBoxMaxHeight,
+                              suggestionBoxWidth: _getSuggestionBoxWidth(constraints.maxWidth),
                               textStyle: RecipientComposerWidgetStyle.inputTextStyle,
                               onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, stateSetter),
                               onDeleteTagAction: () => _handleDeleteLatestTagAction.call(stateSetter),
@@ -233,16 +237,17 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                           autoDisposeFocusNode: widget.autoDisposeFocusNode,
                           keyboardType: TextInputType.emailAddress,
                           textInputAction: TextInputAction.done,
-                        debounceDuration: const Duration(milliseconds: 150),
+                          debounceDuration: RecipientComposerWidgetStyle.suggestionDebounceDuration,
                           hasAddButton: false,
-                        tagSpacing: 8,
+                          tagSpacing: RecipientComposerWidgetStyle.tagSpacing,
                           autofocus: widget.prefix != PrefixEmailAddress.to && _currentListEmailAddress.isEmpty,
-                        minTextFieldWidth: 20,
+                          minTextFieldWidth: RecipientComposerWidgetStyle.minTextFieldWidth,
                           resetTextOnSubmitted: true,
-                        suggestionsBoxElevation: 20.0,
+                          suggestionsBoxElevation: RecipientComposerWidgetStyle.suggestionsBoxElevation,
-                        suggestionsBoxBackgroundColor: Colors.white,
+                          suggestionsBoxBackgroundColor: RecipientComposerWidgetStyle.suggestionsBoxBackgroundColor,
-                        suggestionsBoxRadius: 20,
+                          suggestionsBoxRadius: RecipientComposerWidgetStyle.suggestionsBoxRadius,
-                        suggestionsBoxMaxHeight: 350,
+                          suggestionsBoxMaxHeight: RecipientComposerWidgetStyle.suggestionsBoxMaxHeight,
+                          suggestionBoxWidth: _getSuggestionBoxWidth(constraints.maxWidth),
                           textStyle: RecipientComposerWidgetStyle.inputTextStyle,
                           onFocusTagAction: (focused) => _handleFocusTagAction.call(focused, stateSetter),
                           onDeleteTagAction: () => _handleDeleteLatestTagAction.call(stateSetter),
@@ -321,6 +326,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
           ]
         ),
       );
+    });
   }
 
   bool get _isCollapse => _currentListEmailAddress.length > 1 && widget.expandMode == ExpandMode.COLLAPSE;
@@ -473,4 +479,13 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
       }
     }
   }
+
+  double? _getSuggestionBoxWidth(double maxWidth) {
+    if (maxWidth < ResponsiveUtils.minTabletWidth) {
+      final newWidth = min(maxWidth, RecipientComposerWidgetStyle.suggestionBoxWidth);
+      return newWidth;
+    } else {
+      return null;
+    }
+  }
 }

pubspec.lock

@@ -1529,7 +1529,7 @@ packages:
     description:
       path: "."
       ref: master
-      resolved-ref: "22fcc31f816ed62ffa1ef38c2103333b7f001345"
+      resolved-ref: "6e066b29659c6d3a2f20686219bb131164ab2e51"
       url: "https://github.com/dab246/super_tag_editor.git"
     source: git
     version: "0.2.0"