TF-2259 Fix padding and overflow text in recipients composer

Signed-off-by: dab246 <tdvu@linagora.com>

Signed-off-by: dab246 <tdvu@linagora.com>
(cherry picked from commit b1301f72e2a4377d5f3500b6f1ea2c6a8bc7c304)

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

@@ -9,7 +9,7 @@ class RecipientTagItemWidgetStyle {
   static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(start: 4);
   static const EdgeInsetsGeometry counterPadding = EdgeInsetsDirectional.symmetric(vertical: 5, horizontal: 8);
   static const EdgeInsetsGeometry mobileCounterPadding = EdgeInsetsDirectional.symmetric(vertical: 8, horizontal: 8);
-  static const EdgeInsetsGeometry counterMargin = EdgeInsetsDirectional.only(top: PlatformInfo.isWeb ? 8 : 0);
+  static const EdgeInsetsGeometry counterMargin = EdgeInsetsDirectional.only(top: PlatformInfo.isWeb ? 8 : 0, start: 8);
 
   static const TextStyle labelTextStyle = TextStyle(
     color: Colors.black,

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

@@ -196,6 +196,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                                   isLatestEmail: isLatestEmail,
                                   isCollapsed: _isCollapse,
                                   isLatestTagFocused: _lastTagFocused,
+                                  maxWidth: constraints.maxWidth,
                                   onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, stateSetter),
                                   onShowFullAction: widget.onShowFullListEmailAddressAction,
                                 );
@@ -270,6 +271,7 @@ class _RecipientComposerWidgetState extends State<RecipientComposerWidget> {
                               isLatestEmail: isLatestEmail,
                               isCollapsed: _isCollapse,
                               isLatestTagFocused: _lastTagFocused,
+                              maxWidth: constraints.maxWidth,
                               onDeleteTagAction: (emailAddress) => _handleDeleteTagAction.call(emailAddress, stateSetter),
                               onShowFullAction: widget.onShowFullListEmailAddressAction,
                             );

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

@@ -22,6 +22,7 @@ class RecipientTagItemWidget extends StatelessWidget {
   final bool isCollapsed;
   final bool isLatestTagFocused;
   final bool isLatestEmail;
+  final double? maxWidth;
   final PrefixEmailAddress prefix;
   final EmailAddress currentEmailAddress;
   final List<EmailAddress> currentListEmailAddress;
@@ -42,18 +43,20 @@ class RecipientTagItemWidget extends StatelessWidget {
     this.isLatestEmail = false,
     this.onShowFullAction,
     this.onDeleteTagAction,
+    this.maxWidth,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
+    return Container(
-      alignment: AlignmentDirectional.centerEnd,
+      constraints: BoxConstraints(maxWidth: maxWidth ?? double.infinity),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
         children: [
           if (PlatformInfo.isWeb)
-          Padding(
+            Flexible(
-            padding: EdgeInsetsDirectional.only(
+              child: Padding(
-              top: 8,
+                padding: const EdgeInsetsDirectional.only(top: 8),
-              end: isCollapsed ? 40 : 0),
                 child: InkWell(
                   onTap: () => isCollapsed
                     ? onShowFullAction?.call(prefix)
@@ -95,10 +98,10 @@ class RecipientTagItemWidget extends StatelessWidget {
                     ),
                   )
                 ),
+              ),
             )
           else
-          Padding(
+            Flexible(
-            padding: EdgeInsetsDirectional.only(end: isCollapsed ? 40 : 0),
               child: InkWell(
                 onTap: () => isCollapsed
                   ? onShowFullAction?.call(prefix)
@@ -136,7 +139,7 @@ class RecipientTagItemWidget extends StatelessWidget {
           if (isCollapsed)
             TMailButtonWidget.fromText(
               margin: RecipientTagItemWidgetStyle.counterMargin,
-            text: '+${currentListEmailAddress.length - collapsedListEmailAddress.length}',
+              text: '+$countRecipients',
               onTapActionCallback: () => onShowFullAction?.call(prefix),
               borderRadius: RecipientTagItemWidgetStyle.radius,
               textStyle: RecipientTagItemWidgetStyle.labelTextStyle,
@@ -146,9 +149,12 @@ class RecipientTagItemWidget extends StatelessWidget {
               backgroundColor: AppColor.colorEmailAddressTag,
             )
         ]
+      ),
     );
   }
 
+  int get countRecipients => currentListEmailAddress.length - collapsedListEmailAddress.length;
+
   Color _getTagBackgroundColor() {
     if (isLatestTagFocused && isLatestEmail) {
       return AppColor.colorItemRecipientSelected;

pubspec.lock

@@ -1552,8 +1552,8 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "bugfix/fix-suggestion-displayed-on-top-when-having-many-tags"
+      ref: master
-      resolved-ref: d8711a759932297fc411e9e2993d05d3533b14de
+      resolved-ref: "796d679e3aaf34d0107819d1f12bb3cf45a59d64"
       url: "https://github.com/dab246/super_tag_editor.git"
     source: git
     version: "0.2.0"

pubspec.yaml

@@ -84,7 +84,7 @@ dependencies:
   super_tag_editor:
     git:
       url: https://github.com/dab246/super_tag_editor.git
-      ref: bugfix/fix-suggestion-displayed-on-top-when-having-many-tags
+      ref: master
 
   ### Dependencies from pub.dev ###
   cupertino_icons: 1.0.5