TF-1354 Fix overflow text on web

lib/features/contact/presentation/widgets/autocomplete_contact_text_field_with_tags.dart

@@ -53,6 +53,7 @@ class _AutocompleteContactTextFieldWithTagsState extends State<AutocompleteConta
   late List<EmailAddress> listEmailAddress;
 
   Timer? _gapBetweenTagChangedAndFindSuggestion;
+  bool lastTagFocused = false;
 
   @override
   void initState() {
@@ -89,6 +90,23 @@ class _AutocompleteContactTextFieldWithTagsState extends State<AutocompleteConta
       suggestionsBoxBackgroundColor: Colors.white,
       suggestionsBoxRadius: 16,
       suggestionsBoxMaxHeight: 350,
+      onFocusTagAction: (focused) {
+        setState(() {
+          lastTagFocused = focused;
+        });
+      },
+      onDeleteTagAction: () {
+        if (listEmailAddress.isNotEmpty) {
+          setState(() {
+            listEmailAddress.removeLast();
+          });
+        }
+      },
+      onSelectOptionAction: (item) {
+        if (!_isDuplicatedRecipient(item.emailAddress.emailAddress)) {
+          setState(() => listEmailAddress.add(item.emailAddress));
+        }
+      },
       onSubmitted: (value) {
         if (!_isDuplicatedRecipient(value)) {
           setState(() => listEmailAddress.add(EmailAddress(null, value)));
@@ -109,6 +127,8 @@ class _AutocompleteContactTextFieldWithTagsState extends State<AutocompleteConta
       ),
       tagBuilder: (context, index) => ContactInputTagItem(
         listEmailAddress[index],
+        isLastContact: index == listEmailAddress.length - 1,
+        lastTagFocused: lastTagFocused,
         deleteContactCallbackAction: (contact) {
           setState(() => listEmailAddress.remove(contact));
         }
@@ -123,7 +143,7 @@ class _AutocompleteContactTextFieldWithTagsState extends State<AutocompleteConta
         );
       },
       findSuggestions: _findSuggestions,
-      suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, highlight) {
+      suggestionBuilder: (context, tagEditorState, suggestionEmailAddress, index, length, highlight) {
         return Container(
           padding: const EdgeInsets.symmetric(horizontal: 12),
           child: ContactSuggestionBoxItem(

lib/features/contact/presentation/widgets/contact_input_tag_item.dart

@@ -15,12 +15,16 @@ typedef DeleteContactCallbackAction = Function(EmailAddress contactDeleted);
 class ContactInputTagItem extends StatelessWidget {
 
   final EmailAddress contact;
+  final bool isLastContact;
+  final bool lastTagFocused;
   final DeleteContactCallbackAction? deleteContactCallbackAction;
 
   const ContactInputTagItem(
     this.contact,
     {
       Key? key,
+      this.isLastContact = false,
+      this.lastTagFocused = false,
       this.deleteContactCallbackAction
     }
   ) : super(key: key);
@@ -59,17 +63,10 @@ class ContactInputTagItem extends StatelessWidget {
             fit: BoxFit.fill)
         : null,
       labelStyle: const TextStyle(color: Colors.black, fontSize: 14, fontWeight: FontWeight.normal),
-      backgroundColor: _isValidEmailAddress(contact.emailAddress)
-        ? AppColor.colorBackgroundContactTagItem
-        : Colors.white,
+      backgroundColor: _getTagBackgroundColor(),
       shape: RoundedRectangleBorder(
         borderRadius: BorderRadius.circular(20),
-        side: BorderSide(
-          width: _isValidEmailAddress(contact.emailAddress) ? 0 : 1,
-          color: _isValidEmailAddress(contact.emailAddress)
-            ? AppColor.colorBackgroundContactTagItem
-            : AppColor.colorBorderEmailAddressInvalid
-        )
+        side: _getTagBorderSide()
       ),
       onDeleted: () => deleteContactCallbackAction?.call(contact),
     );
@@ -88,4 +85,29 @@ class ContactInputTagItem extends StatelessWidget {
   }
 
   bool _isValidEmailAddress(String value) => value.isEmail;
+
+  Color _getTagBackgroundColor() {
+    if (lastTagFocused && isLastContact) {
+      return AppColor.colorItemRecipientSelected;
+    } else {
+      return _isValidEmailAddress(contact.emailAddress)
+        ? AppColor.colorBackgroundContactTagItem
+        : Colors.white;
+    }
+  }
+
+  BorderSide _getTagBorderSide() {
+    if (lastTagFocused && isLastContact) {
+      return const BorderSide(
+      width: 1,
+      color: AppColor.primaryColor);
+    } else {
+      return BorderSide(
+        width: _isValidEmailAddress(contact.emailAddress) ? 0 : 1,
+        color: _isValidEmailAddress(contact.emailAddress)
+          ? AppColor.colorBackgroundContactTagItem
+          : AppColor.colorBorderEmailAddressInvalid
+      );
+    }
+  }
 }