TF-2510 Fix padding/style attachment item

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

lib/features/email/presentation/styles/attachment/attachment_item_widget_style.dart

@@ -4,29 +4,27 @@ import 'package:flutter/material.dart';
 
 class AttachmentItemWidgetStyle {
   static const double radius = 8;
-  static const double mobileWidth = 224;
+  static const double maxWidthMobile = 260;
-  static const double width = 260;
+  static const double maxWidthTablet = 240;
+  static const double maxWidthTabletLarge = 200;
   static const double height = 36;
   static const double iconSize = 20;
   static const double space = 8;
-  static const double downloadIconSize = 20;
+  static const double downloadIconSize = 22;
-  static const double attachmentNameMaxWidth = 130;
 
-  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(end: 0);
+  static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.symmetric(horizontal: 8, vertical: 5);
-  static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(8);
 
   static const Color borderColor = AppColor.attachmentFileBorderColor;
-  static const Color downloadIconColor = AppColor.primaryColor;
 
   static const TextStyle labelTextStyle = TextStyle(
     fontSize: 14,
     color: AppColor.attachmentFileNameColor,
-    fontWeight: FontWeight.normal
+    fontWeight: FontWeight.w500
   );
   static const TextStyle dotsLabelTextStyle = TextStyle(
     fontSize: 12,
     color: AppColor.attachmentFileNameColor,
-    fontWeight: FontWeight.normal
+    fontWeight: FontWeight.w500
   );
   static const TextStyle sizeLabelTextStyle = TextStyle(
     fontSize: 12,

lib/features/email/presentation/styles/attachment/attachment_list_item_widget_styles.dart

@@ -3,27 +3,22 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:flutter/material.dart';
 
 class AttachmentListItemWidgetStyle {
-  static const double height = 60;
   static const double iconSize = 44;
   static const double space = 8;
   static const double downloadIconSize = 24;
   static const double fileTitleBottomSpace = 4;
 
-  static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(8);
+  static const EdgeInsetsGeometry contentPadding = EdgeInsetsDirectional.all(12);
-  static const EdgeInsetsGeometry fileTitlePadding = EdgeInsetsDirectional.all(4);
-  static const EdgeInsetsGeometry downloadIconPadding = EdgeInsets.only(right: 13.0);
-
-  static const Color downloadIconColor = AppColor.primaryColor;
 
   static const TextStyle labelTextStyle = TextStyle(
     fontSize: 14,
     color: AppColor.attachmentFileNameColor,
-    fontWeight: FontWeight.normal
+    fontWeight: FontWeight.w500
   );
   static const TextStyle dotsLabelTextStyle = TextStyle(
     fontSize: 12,
     color: AppColor.attachmentFileNameColor,
-    fontWeight: FontWeight.normal
+    fontWeight: FontWeight.w500
   );
   static const TextStyle sizeLabelTextStyle = TextStyle(
     fontSize: 12,

lib/features/email/presentation/styles/attachment/attachment_list_styles.dart

@@ -5,7 +5,6 @@ class AttachmentListStyles {
   static const double headerBorderWidth = 1.0;
   static const double titleSpace = 8.0;
   static const double scrollbarThickness = 8.0;
-  static const double separatorHeight = 1.0;
   static const double buttonsSpaceBetween = 12.0;
   static const double dialogBottomSpace = 20.0;
   static const double buttonBorderWidth = 1.0;
@@ -28,8 +27,6 @@ class AttachmentListStyles {
   );
   static const EdgeInsetsGeometry listAreaPadding = EdgeInsets.all(12.0);
   static const EdgeInsetsGeometry listAreaPaddingMobile = EdgeInsets.symmetric(vertical: 12);
-  static const EdgeInsetsGeometry listItemPadding = EdgeInsets.only(right: 8.0);
-  static const EdgeInsetsGeometry separatorPadding = EdgeInsets.only(right: 8.0);
   static const EdgeInsetsGeometry buttonsPadding = EdgeInsets.symmetric(
     horizontal: 24.0,
     vertical: 12.0

lib/features/email/presentation/styles/email_attachments_styles.dart

@@ -10,20 +10,18 @@ class EmailAttachmentsStyles {
   static const double buttonTextSize = 13;
   static const double buttonMoreAttachmentsTextSize = 14;
   static const double buttonBorderRadius = 8;
-  static const double listSpace = 12;
+  static const double listSpace = 8;
-  static const double listHeight = 36;
-  static const double mobileListHeight = 100;
-  static const double moreAttachmentsButtonPadding = 8;
 
   static const Color headerTextColor = AppColor.colorTitleHeaderAttachment;
   static const Color headerIconColor = AppColor.colorAttachmentIcon;
   static const Color buttonTextColor = AppColor.primaryColor;
-  static const Color ButtonMoreAttachmentsTextColor = AppColor.colorLabelMoreAttachmentsButton;
+  static const Color buttonMoreAttachmentsTextColor = AppColor.colorLabelMoreAttachmentsButton;
 
   static const FontWeight headerFontWeight = FontWeight.w400;
   static const FontWeight buttonFontWeight = FontWeight.w400;
   static const FontWeight buttonMoreAttachmentsFontWeight = FontWeight.w500;
 
-  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.symmetric(vertical: 12, horizontal: 16);
+  static const EdgeInsetsGeometry padding = EdgeInsetsDirectional.only(start: 16, end: 16, bottom: 12);
   static const EdgeInsetsGeometry buttonPadding = EdgeInsets.symmetric(vertical: 8, horizontal: 12);
+  static const EdgeInsetsGeometry moreButtonMargin = EdgeInsetsDirectional.only(bottom: 2, start: 8);
 }

lib/features/email/presentation/widgets/attachment_item_widget.dart

@@ -1,7 +1,7 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/utils/platform_info.dart';
 import 'package:extended_text/extended_text.dart';
 import 'package:filesize/filesize.dart';
 import 'package:flutter/material.dart';
@@ -19,6 +19,7 @@ class AttachmentItemWidget extends StatelessWidget {
   final OnDownloadAttachmentFileActionClick? downloadAttachmentAction;
 
   final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
 
   AttachmentItemWidget({
     Key? key,
@@ -41,11 +42,7 @@ class AttachmentItemWidget extends StatelessWidget {
             borderRadius: const BorderRadius.all(Radius.circular(AttachmentItemWidgetStyle.radius)),
             border: Border.all(color: AttachmentItemWidgetStyle.borderColor),
           ),
-          width: AttachmentItemWidgetStyle.width,
+          width: _getMaxWidthItem(context),
-          height: AttachmentItemWidgetStyle.height,
-          child: Stack(
-            children: [
-              Positioned.fill(
           child: Row(
             children: [
               SvgPicture.asset(
@@ -55,22 +52,13 @@ class AttachmentItemWidget extends StatelessWidget {
                 fit: BoxFit.fill
               ),
               const SizedBox(width: AttachmentItemWidgetStyle.space),
-                    Expanded(child: Row(
+              Expanded(
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                      children: [
-                        SizedBox(
-                          width: AttachmentItemWidgetStyle.attachmentNameMaxWidth,
                 child: ExtendedText(
                   (attachment.name ?? ''),
                   maxLines: 1,
-                            overflow: CommonTextStyle.defaultTextOverFlow,
+                  overflowWidget: const TextOverflowWidget(
-                            softWrap: CommonTextStyle.defaultSoftWrap,
+                    position: TextOverflowPosition.middle,
-                            overflowWidget: TextOverflowWidget(
+                    child: Text(
-                              position: Directionality.maybeOf(context) == TextDirection.rtl
-                                ? TextOverflowPosition.start
-                                : TextOverflowPosition.end,
-                              child: const Text(
                       "...",
                       style: AttachmentItemWidgetStyle.dotsLabelTextStyle,
                     ),
@@ -78,36 +66,39 @@ class AttachmentItemWidget extends StatelessWidget {
                   style: AttachmentItemWidgetStyle.labelTextStyle,
                 ),
               ),
+              const SizedBox(width: AttachmentItemWidgetStyle.space),
               Text(
                 filesize(attachment.size?.value),
                 maxLines: 1,
-                          overflow: CommonTextStyle.defaultTextOverFlow,
-                          softWrap: CommonTextStyle.defaultSoftWrap,
                 style: AttachmentItemWidgetStyle.sizeLabelTextStyle,
+              ),
+              TMailButtonWidget.fromIcon(
+                icon: _imagePaths.icDownloadAttachment,
+                backgroundColor: Colors.transparent,
+                padding: const EdgeInsets.all(5),
+                iconSize: AttachmentItemWidgetStyle.downloadIconSize,
+                onTapActionCallback: () => downloadAttachmentAction?.call(attachment)
               )
             ]
-                    )),
-                    Material(
-                      color: Colors.transparent,
-                      child: InkWell(
-                        customBorder: const CircleBorder(),
-                        child: SvgPicture.asset(
-                          _imagePaths.icDownloadAttachment,
-                          width: AttachmentItemWidgetStyle.downloadIconSize,
-                          height: AttachmentItemWidgetStyle.downloadIconSize,
-                          colorFilter: AttachmentItemWidgetStyle.downloadIconColor.asFilter(),
-                          fit: BoxFit.fill
-                        ),
-                        onTap: () => downloadAttachmentAction?.call(attachment)
-                      ),
-                    ),
-                  ]
-                ),
-              ),          
-            ]
           )
         ),
       ),
     );
   }
+
+  double _getMaxWidthItem(BuildContext context) {
+    if (PlatformInfo.isMobile) {
+      return _responsiveUtils.isMobile(context)
+        ? AttachmentItemWidgetStyle.maxWidthMobile
+        : AttachmentItemWidgetStyle.maxWidthTablet;
+    } else {
+      if (_responsiveUtils.isTabletLarge(context)) {
+        return AttachmentItemWidgetStyle.maxWidthTabletLarge;
+      } else if (_responsiveUtils.isTablet(context)) {
+        return AttachmentItemWidgetStyle.maxWidthTablet;
+      } else {
+        return AttachmentItemWidgetStyle.maxWidthMobile;
+      }
+    }
+  }
 }

lib/features/email/presentation/widgets/attachment_list/attachment_list_bottom_sheet_body_builder.dart

@@ -1,6 +1,6 @@
 import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/email/attachment.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.dart';
@@ -64,14 +64,13 @@ class AttachmentListBottomSheetBodyBuilder extends StatelessWidget {
                   ),
                   centerTitle: true,
                   actions: [
-                    GestureDetector(
+                    TMailButtonWidget.fromIcon(
-                      child: Padding(
+                      icon: imagePaths.icCircleClose,
-                        padding: AttachmentListStyles.closeButtonPadding,
+                      backgroundColor: Colors.transparent,
-                        child: SvgPicture.asset(imagePaths.icCircleClose),
+                      iconSize: 28,
-                      ),
+                      margin: const EdgeInsetsDirectional.only(end: 12),
-                      onTapDown: (_) {
+                      padding: const EdgeInsets.all(5),
-                        onCloseButtonAction?.call();
+                      onTapActionCallback: onCloseButtonAction,
-                      },
                     )
                   ],
                 ),
@@ -80,8 +79,6 @@ class AttachmentListBottomSheetBodyBuilder extends StatelessWidget {
                   child: Column(
                     children: [
                       Expanded(
-                        child: Padding(
-                          padding: AttachmentListStyles.listAreaPaddingMobile,
                         child: RawScrollbar(
                           trackColor: AttachmentListStyles.scrollbarTrackColor,
                           thumbColor: AttachmentListStyles.scrollbarThumbColor,
@@ -92,8 +89,6 @@ class AttachmentListBottomSheetBodyBuilder extends StatelessWidget {
                           trackVisibility: true,
                           controller: scrollController,
                           trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor,
-                            child: Padding(
-                              padding: AttachmentListStyles.listItemPadding,
                           child: ScrollConfiguration(
                             behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
                             child: ListView.separated(
@@ -108,20 +103,14 @@ class AttachmentListBottomSheetBodyBuilder extends StatelessWidget {
                                 );
                               },
                               separatorBuilder: (context, index) {
-                                    return const Padding(
+                                return const Divider(
-                                      padding: AttachmentListStyles.separatorPadding,
-                                      child: Divider(
-                                        height: AttachmentListStyles.separatorHeight,
                                   color: AttachmentListStyles.separatorColor,
-                                      ),
                                 );
                               },
                             ),
                           ),
                         ),
                       ),
-                        ),
-                      ),
                       Padding(
                         padding: AttachmentListStyles.actionButtonsRowPadding,
                         child: Row(

lib/features/email/presentation/widgets/attachment_list/attachment_list_dialog_body_builder.dart

@@ -1,7 +1,6 @@
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/email/attachment.dart';
 import 'package:tmail_ui_user/features/email/presentation/styles/attachment/attachment_list_styles.dart';
 import 'package:tmail_ui_user/features/email/presentation/widgets/attachment_list/attachment_list_action_button_builder.dart';
@@ -47,32 +46,47 @@ class AttachmentListDialogBodyBuilder extends StatelessWidget {
               padding: AttachmentListStyles.headerPadding,
               decoration: AttachmentListStyles.headerDecoration,
               child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
                 children: [
-                  const Spacer(),
+                  const SizedBox(width: 50),
-                  Text(
+                  Expanded(
+                    child: Center(
+                      child: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Flexible(
+                            child: Text(
                               AppLocalizations.of(context).attachmentList,
-                      style: AttachmentListStyles.titleTextStyle
+                              style: AttachmentListStyles.titleTextStyle,
+                              maxLines: 2,
+                              overflow: TextOverflow.ellipsis,
+                            ),
                           ),
                           const SizedBox(width: AttachmentListStyles.titleSpace),
-                  Text(
+                          Flexible(
+                            child: Text(
                               '${attachments.length} ${AppLocalizations.of(context).files}',
-                      style: AttachmentListStyles.subTitleTextStyle
+                              style: AttachmentListStyles.subTitleTextStyle,
+                              maxLines: 2,
+                              overflow: TextOverflow.ellipsis,
                             ),
-                  if (onCloseButtonAction != null)
+                          )
-                    const Spacer(),
+                        ],
-                  buildIconWeb(
-                    icon: SvgPicture.asset(imagePaths.icCircleClose),
-                    onTap: () {
-                      onCloseButtonAction!.call();
-                    },
                       ),
+                    )
+                  ),
+                  const SizedBox(width: 8),
+                  TMailButtonWidget.fromIcon(
+                    icon: imagePaths.icCircleClose,
+                    onTapActionCallback: onCloseButtonAction,
+                    iconSize: 28,
+                    backgroundColor: Colors.transparent,
+                    padding: const EdgeInsets.all(5),
+                  ),
+                  const SizedBox(width: 8)
                 ],
               )
           ),
           Expanded(
-            child: Padding(
-              padding: AttachmentListStyles.listAreaPadding,
             child: RawScrollbar(
               trackColor: AttachmentListStyles.scrollbarTrackColor,
               thumbColor: AttachmentListStyles.scrollbarThumbColor,
@@ -83,8 +97,6 @@ class AttachmentListDialogBodyBuilder extends StatelessWidget {
               trackVisibility: true,
               controller: scrollController,
               trackBorderColor: AttachmentListStyles.scrollbarTrackBorderColor,
-                child: Padding(
-                  padding: AttachmentListStyles.listItemPadding,
               child: ScrollConfiguration(
                 behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
                 child: ListView.separated(
@@ -99,20 +111,14 @@ class AttachmentListDialogBodyBuilder extends StatelessWidget {
                     );
                   },
                   separatorBuilder: (context, index) {
-                        return const Padding(
+                    return const Divider(
-                          padding: AttachmentListStyles.separatorPadding,
-                          child: Divider(
-                            height: AttachmentListStyles.separatorHeight,
                       color: AttachmentListStyles.separatorColor,
-                          ),
                     );
                   },
                 ),
               ),
             ),
           ),
-            ),
-          ),
           Row(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [

lib/features/email/presentation/widgets/attachment_list/attachment_list_item_widget.dart

@@ -1,7 +1,6 @@
-
-import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:extended_text/extended_text.dart';
 import 'package:filesize/filesize.dart';
 import 'package:flutter/material.dart';
@@ -29,17 +28,12 @@ class AttachmentListItemWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: Colors.transparent,
+      type: MaterialType.transparency,
       child: InkWell(
         onTap: () => downloadAttachmentAction?.call(attachment),
-        child: Container(
+        child: Padding(
           padding: AttachmentListItemWidgetStyle.contentPadding,
-          height: AttachmentListItemWidgetStyle.height,
-          child: Stack(
-            children: [
-              Positioned.fill(
           child: Row(
-                  crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               SvgPicture.asset(
                 attachment.getIcon(_imagePaths),
@@ -49,21 +43,15 @@ class AttachmentListItemWidget extends StatelessWidget {
               ),
               const SizedBox(width: AttachmentListItemWidgetStyle.space),
               Expanded(
-                      child: Padding(
-                        padding: AttachmentListItemWidgetStyle.fileTitlePadding,
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     ExtendedText(
                       (attachment.name ?? ''),
                       maxLines: 1,
-                              overflow: CommonTextStyle.defaultTextOverFlow,
+                      overflowWidget: const TextOverflowWidget(
-                              softWrap: CommonTextStyle.defaultSoftWrap,
+                        position: TextOverflowPosition.middle,
-                              overflowWidget: TextOverflowWidget(
+                        child: Text(
-                                position: Directionality.maybeOf(context) == TextDirection.rtl
-                                  ? TextOverflowPosition.start
-                                  : TextOverflowPosition.end,
-                                child: const Text(
                           "...",
                           style: AttachmentListItemWidgetStyle.dotsLabelTextStyle,
                         ),
@@ -79,35 +67,17 @@ class AttachmentListItemWidget extends StatelessWidget {
                       style: AttachmentListItemWidgetStyle.sizeLabelTextStyle,
                     )
                   ]
-                        ),
                 )
+              ),
+              const SizedBox(width: AttachmentListItemWidgetStyle.space),
+              TMailButtonWidget.fromIcon(
+                icon: _imagePaths.icDownloadAttachment,
+                backgroundColor: Colors.transparent,
+                onTapActionCallback: () => downloadAttachmentAction?.call(attachment)
               )
             ]
           ),
         ),
-              Align(
-                alignment: AlignmentDirectional.centerEnd,
-                child: Padding(
-                  padding: AttachmentListItemWidgetStyle.downloadIconPadding,
-                  child: Material(
-                    color: Colors.transparent,
-                    child: InkWell(
-                      customBorder: const CircleBorder(),
-                      child: SvgPicture.asset(
-                        _imagePaths.icDownloadAttachment,
-                        width: AttachmentListItemWidgetStyle.downloadIconSize,
-                        height: AttachmentListItemWidgetStyle.downloadIconSize,
-                        colorFilter: AttachmentListItemWidgetStyle.downloadIconColor.asFilter(),
-                        fit: BoxFit.fill
-                      ),
-                      onTap: () => downloadAttachmentAction?.call(attachment)
-                    ),
-                  ),
-                ),
-              ),
-            ]
-          )
-        ),
       ),
     );
   }

lib/features/email/presentation/widgets/email_address_dialog_builder.dart

@@ -1,7 +1,6 @@
 
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
 import 'package:model/model.dart';
@@ -52,14 +51,14 @@ class EmailAddressDialogBuilder extends StatelessWidget {
           children: [
             Align(
               alignment: Alignment.centerRight,
-                child: IconButton(
+              child: TMailButtonWidget.fromIcon(
-                    padding: const EdgeInsets.only(top: 16, right: 16),
+                onTapActionCallback: onCloseDialogAction,
-                    onPressed: () => onCloseDialogAction?.call(),
+                icon: imagePaths.icCircleClose,
-                    icon: SvgPicture.asset(
+                backgroundColor: Colors.transparent,
-                        imagePaths.icCircleClose,
+                margin: const EdgeInsetsDirectional.only(top: 8, end: 8),
-                        width: 24,
+                iconSize: 24,
-                        height: 24,
+              )
-                        fit: BoxFit.fill))),
+            ),
             Padding(padding: const EdgeInsets.symmetric(horizontal: 16),
               child: Center(child: (AvatarBuilder()
                   ..text(_emailAddress.asString().firstLetterToUpperCase)

lib/features/email/presentation/widgets/email_attachments_widget.dart

@@ -37,16 +37,8 @@ class EmailAttachmentsWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    int getItemCount() {
+    final attachmentDisplayed = _getAttachmentDisplayed(context);
-      if (attachments.length <= 2) {
+    int hideItemsCount = attachments.length - attachmentDisplayed.length;
-        return attachments.length;
-      }
-      if (attachments.length == 3) {
-        return responsiveUtils.isDesktop(context) ? attachments.length : 2;
-      } 
-      return responsiveUtils.isDesktop(context) ? 4 : 2;
-    }
-    int hideItemsCount = attachments.length - getItemCount();
     return Padding(
       padding: EmailAttachmentsStyles.padding,
       child: Column(
@@ -99,63 +91,78 @@ class EmailAttachmentsWidget extends StatelessWidget {
             ],
           ),
           const SizedBox(height: EmailAttachmentsStyles.marginHeader),
-          SizedBox(
+          Row(
-            height: responsiveUtils.isMobile(context) ? EmailAttachmentsStyles.mobileListHeight : EmailAttachmentsStyles.listHeight,
+            crossAxisAlignment: responsiveUtils.isMobile(context)
-            child: Row(
+              ? CrossAxisAlignment.end
+              : CrossAxisAlignment.center,
             children: [
               Flexible(
-                  child: ListView.separated(
+                child: Wrap(
-                    shrinkWrap: true,
+                  spacing: EmailAttachmentsStyles.listSpace,
-                    scrollDirection: responsiveUtils.isMobile(context) ? Axis.vertical : Axis.horizontal,
+                  runSpacing: EmailAttachmentsStyles.listSpace,
-                    itemCount: getItemCount(),
+                  children: attachmentDisplayed.map((attachment) {
-                    itemBuilder: (context, index) {
                     if (PlatformInfo.isWeb) {
                       return DraggableAttachmentItemWidget(
-                          attachment: attachments[index],
+                          attachment: attachment,
                           onDragStarted: onDragStarted,
                           onDragEnd: onDragEnd,
                           downloadAttachmentAction: downloadAttachmentAction
                       );
                     } else {
                       return AttachmentItemWidget(
-                          attachment: attachments[index],
+                          attachment: attachment,
                           downloadAttachmentAction: downloadAttachmentAction
                       );
                     }
-                    },
+                  }).toList(),
-                    separatorBuilder: (context, index) {
-                      if (responsiveUtils.isMobile(context)) {
-                        return const SizedBox(height: EmailAttachmentsStyles.listSpace);
-                      } else {
-                        return const SizedBox(width: EmailAttachmentsStyles.listSpace);
-                      }
-                    },
                 ),
               ),
-                if (hideItemsCount != 0)
+              if (hideItemsCount > 0)
-                  Container(
+                TMailButtonWidget(
-                    padding: EdgeInsets.only(bottom: responsiveUtils.isMobile(context) ? EmailAttachmentsStyles.moreAttachmentsButtonPadding : 0),
-                    alignment: responsiveUtils.isMobile(context)
-                      ? Alignment.bottomRight
-                      : Alignment.centerRight,
-                    child: TMailButtonWidget(
                   text: AppLocalizations.of(context).moreAttachments(hideItemsCount),
                   backgroundColor: Colors.transparent,
                   borderRadius: EmailAttachmentsStyles.buttonBorderRadius,
                   padding: EmailAttachmentsStyles.buttonPadding,
+                  margin: EmailAttachmentsStyles.moreButtonMargin,
                   textStyle: const TextStyle(
                     fontSize: EmailAttachmentsStyles.buttonMoreAttachmentsTextSize,
-                        color: EmailAttachmentsStyles.ButtonMoreAttachmentsTextColor,
+                    color: EmailAttachmentsStyles.buttonMoreAttachmentsTextColor,
                     fontWeight: EmailAttachmentsStyles.buttonMoreAttachmentsFontWeight,
                   ),
                   onTapActionCallback: onTapShowAllAttachmentFile,
                 ),
-                  ),
             ]
-            )
           ),
         ],
       ),
     );
   }
+
+  List<Attachment> _getAttachmentDisplayed(BuildContext context) {
+    if (attachments.length <= 2) {
+      return attachments;
+    }
+
+    if (attachments.length == 3) {
+      if (PlatformInfo.isWeb) {
+        return responsiveUtils.isDesktop(context)
+          ? attachments
+          : attachments.sublist(0, 2);
+      } else {
+        return responsiveUtils.isMobile(context)
+          ? attachments
+          : attachments.sublist(0, 2);
+      }
+    }
+
+    if (PlatformInfo.isWeb) {
+      return responsiveUtils.isDesktop(context) || responsiveUtils.isMobile(context)
+        ? attachments.sublist(0, 4)
+        : attachments.sublist(0, 2);
+    } else {
+      return responsiveUtils.isMobile(context)
+        ? attachments.sublist(0, 4)
+        : attachments.sublist(0, 2);
+    }
+  }
 }

lib/features/email/presentation/widgets/information_sender_and_receiver_builder.dart

@@ -37,7 +37,7 @@ class InformationSenderAndReceiverBuilder extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       color: Colors.white,
-      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+      padding: const EdgeInsetsDirectional.only(start: 16, end: 16, top: 16),
       child: Row(
         crossAxisAlignment: emailSelected.numberOfAllEmailAddress() > 0
           ? CrossAxisAlignment.start