TF-528 Update size for responsive on tablet and landscape mobile

core/lib/presentation/utils/responsive_utils.dart

@@ -1,4 +1,3 @@
-import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:get/get.dart';
 
@@ -8,9 +7,8 @@ class ResponsiveUtils {
   final int minTabletWidth = 600;
   final int minTabletLargeWidth = 900;
 
-  final double defaultSizeDrawerWidthMobileTablet = 375;
+  final double defaultSizeDrawer = 320;
-  final double defaultSizeDrawerWidthWeb = 320;
+  final double defaultSizeMenu = 262;
-  final double defaultSizeMenuWidthWeb = 262;
 
   final double _loginTextFieldWidthSmallScreen = 280.0;
   final double _loginTextFieldWidthLargeScreen = 320.0;
@@ -21,7 +19,7 @@ class ResponsiveUtils {
   final double desktopVerticalMargin = 120.0;
   final double desktopHorizontalMargin = 200.0;
 
-  bool isMobileDevice(BuildContext context) => context.mediaQueryShortestSide < minTabletWidth;
+  bool isScreenWithShortestSide(BuildContext context) => context.mediaQueryShortestSide < minTabletWidth;
 
   double getSizeScreenWidth(BuildContext context) => context.width;
 
@@ -29,28 +27,28 @@ class ResponsiveUtils {
 
   double getSizeScreenShortestSide(BuildContext context) => context.mediaQueryShortestSide;
 
-  double getDeviceWidth(BuildContext context) {
+  double getDeviceWidth(BuildContext context) => context.width;
-    final widthScreen = kIsWeb ? context.width : context.mediaQueryShortestSide;
-    return widthScreen;
-  }
 
   bool isMobile(BuildContext context) => getDeviceWidth(context) < minTabletWidth;
 
-  bool isTablet(BuildContext context) => getDeviceWidth(context) >= minTabletWidth && getDeviceWidth(context) < minTabletLargeWidth;
+  bool isTablet(BuildContext context) =>
+      getDeviceWidth(context) >= minTabletWidth && getDeviceWidth(context) < minTabletLargeWidth;
 
   bool isDesktop(BuildContext context) => getDeviceWidth(context) >= minDesktopWidth;
 
-  bool isTabletLarge(BuildContext context) => getDeviceWidth(context) >= minTabletLargeWidth && getDeviceWidth(context) < minDesktopWidth;
+  bool isTabletLarge(BuildContext context) =>
+      getDeviceWidth(context) >= minTabletLargeWidth && getDeviceWidth(context) < minDesktopWidth;
 
   bool isPortrait(BuildContext context) =>  context.orientation == Orientation.portrait;
 
   bool isLandscape(BuildContext context) => context.orientation == Orientation.landscape;
 
-  bool isLandscapeMobile(BuildContext context) => isMobile(context) && isLandscape(context);
+  bool isLandscapeMobile(BuildContext context) => isScreenWithShortestSide(context) && isLandscape(context);
 
-  bool isPortraitMobile(BuildContext context) => isMobile(context) && isPortrait(context);
+  bool isPortraitMobile(BuildContext context) => isScreenWithShortestSide(context) && isPortrait(context);
 
-  double getWidthLoginTextField(BuildContext context) => isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen;
+  double getWidthLoginTextField(BuildContext context) =>
+      isMobile(context) ? _loginTextFieldWidthSmallScreen : _loginTextFieldWidthLargeScreen;
 
   double getWidthLoginButton() => _loginButtonWidth;
 }

core/lib/presentation/views/list/tree_view.dart

@@ -42,6 +42,7 @@ class _TreeViewData extends StatelessWidget {
       key: PageStorageKey('tree_view'),
       shrinkWrap: true,
       primary: false,
+      padding: EdgeInsets.zero,
       itemCount: children.length,
       itemBuilder: (context, index) {
         return children.elementAt(index);

core/lib/presentation/views/responsive/responsive_widget.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 
 class ResponsiveWidget extends StatelessWidget {
   final Widget mobile;
+  final Widget? landscapeMobile;
   final Widget? tablet;
   final Widget? tabletLarge;
   final Widget? desktop;
@@ -13,6 +14,7 @@ class ResponsiveWidget extends StatelessWidget {
     Key? key,
     required this.responsiveUtils,
     required this.mobile,
+    this.landscapeMobile,
     this.tablet,
     this.desktop,
     this.tabletLarge,
@@ -22,6 +24,7 @@ class ResponsiveWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     if (desktop != null && responsiveUtils.isDesktop(context)) return desktop!;
     if (tabletLarge != null && responsiveUtils.isTabletLarge(context)) return tabletLarge!;
+    if (landscapeMobile != null && responsiveUtils.isLandscapeMobile(context)) return landscapeMobile!;
     if (tablet != null && responsiveUtils.isTablet(context)) return tablet!;
     return mobile;
   }

lib/features/composer/presentation/composer_view.dart

@@ -29,6 +29,7 @@ class ComposerView extends GetWidget<ComposerController> {
     return ResponsiveWidget(
       responsiveUtils: responsiveUtils,
       mobile: _buildComposerViewForMobile(context),
+      landscapeMobile: _buildComposerViewForMobile(context),
       tablet: _buildComposerViewForTablet(context),
       tabletLarge: _buildComposerViewForTablet(context),
       desktop: _buildComposerViewForTablet(context),
@@ -48,8 +49,8 @@ class ComposerView extends GetWidget<ComposerController> {
             child: Scaffold(
               backgroundColor: Colors.white,
               body: SafeArea(
-                  right: responsiveUtils.isMobile(context) && responsiveUtils.isLandscape(context),
+                  right: responsiveUtils.isLandscapeMobile(context),
-                  left: responsiveUtils.isMobile(context) && responsiveUtils.isLandscape(context),
+                  left: responsiveUtils.isLandscapeMobile(context),
                   child: Container(
                       color: Colors.white,
                       child: Column(children: [
@@ -108,7 +109,9 @@ class ComposerView extends GetWidget<ComposerController> {
 
   Widget _buildAppBar(BuildContext context, bool isEnableSendButton) {
     return Container(
-      padding: responsiveUtils.isMobile(context) ? const EdgeInsets.all(8) : EdgeInsets.zero,
+      padding: responsiveUtils.isMobile(context) && responsiveUtils.isLandscapeMobile(context)
+          ? const EdgeInsets.all(8)
+          : EdgeInsets.zero,
       color: Colors.white,
       child: Row(
           children: [

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -39,29 +39,28 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
             onTap: () => controller.closeDestinationPicker(),
             child: ResponsiveWidget(
                 responsiveUtils: _responsiveUtils,
-                mobile: _responsiveUtils.isLandscapeMobile(context)
+                mobile: SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity),
-                  ? Row(children: [
+                landscapeMobile: Row(children: [
-                      SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
-                      Expanded(child: Container(color: Colors.transparent)),
+                  Expanded(child: Container(color: Colors.transparent)),
-                    ])
+                ]),
-                  : SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity),
                 tablet: Row(children: [
                   Expanded(child: Container(color: Colors.transparent)),
                   SizedBox(
                       child: _buildBodyMailboxLocation(context, actions),
-                      width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                      width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawer),
                 ]),
                 tabletLarge: Row(children: [
                   Expanded(child: Container(color: Colors.transparent)),
                   SizedBox(
                       child: _buildBodyMailboxLocation(context, actions),
-                      width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                      width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawer),
                 ]),
                 desktop: Row(children: [
                   Expanded(child: Container(color: Colors.transparent)),
                   SizedBox(
                       child: _buildBodyMailboxLocation(context, actions),
-                      width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                      width: _responsiveUtils.getSizeScreenWidth(context) - _responsiveUtils.defaultSizeDrawer),
                 ]),
             ),
           )
@@ -75,22 +74,21 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
             onTap: () => controller.closeDestinationPicker(),
             child: ResponsiveWidget(
                 responsiveUtils: _responsiveUtils,
-                mobile: _responsiveUtils.isLandscapeMobile(context)
+                mobile: SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity),
-                    ? Row(children: [
+                landscapeMobile: Row(children: [
-                        SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
-                        Expanded(child: Container(color: Colors.transparent)),
+                  Expanded(child: Container(color: Colors.transparent)),
-                      ])
+                ]),
-                    : SizedBox(child: _buildBodyMailboxLocation(context, actions), width: double.infinity),
                 tablet: Row(children: [
-                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
                   Expanded(child: Container(color: Colors.transparent)),
                 ]),
                 tabletLarge: Row(children: [
-                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
                   Expanded(child: Container(color: Colors.transparent)),
                 ]),
                 desktop: Row(children: [
-                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                  SizedBox(child: _buildBodyMailboxLocation(context, actions), width: _responsiveUtils.defaultSizeDrawer),
                   Expanded(child: Container(color: Colors.transparent)),
                 ]),
             ),
@@ -101,28 +99,31 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
 
   Widget _buildBodyMailboxLocation(BuildContext context, MailboxActions? actions) {
     return SafeArea(top: _responsiveUtils.isPortraitMobile(context), bottom: false, left: false, right: false,
-        child: ClipRRect(
+        child: GestureDetector(
-            borderRadius: BorderRadius.only(
+          onTap: () => {},
-                topRight: Radius.circular(_responsiveUtils.isPortraitMobile(context) ? 14 : 0),
+          child: ClipRRect(
-                topLeft: Radius.circular(_responsiveUtils.isPortraitMobile(context) ? 14 : 0)),
+              borderRadius: BorderRadius.only(
-            child: Container(
+                  topRight: Radius.circular(_responsiveUtils.isPortraitMobile(context) ? 14 : 0),
-                color: Colors.white,
+                  topLeft: Radius.circular(_responsiveUtils.isPortraitMobile(context) ? 14 : 0)),
-                child: Column(children: [
+              child: Container(
-                    SafeArea(left: false, right: false, bottom: false, child: _buildAppBar(context)),
+                  color: Colors.white,
-                    Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
+                  child: Column(children: [
-                    Obx(() => controller.isSearchActive()
+                      SafeArea(left: false, right: false, bottom: false, child: _buildAppBar(context)),
-                        ? SafeArea(bottom: false, top: false, right: false, child: _buildInputSearchFormWidget(context))
+                      const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
-                        : SizedBox.shrink()),
+                      Obx(() => controller.isSearchActive()
-                    Expanded(child: Container(
+                          ? SafeArea(bottom: false, top: false, right: false, child: _buildInputSearchFormWidget(context))
-                        color: actions == MailboxActions.create ? AppColor.colorBgMailbox : Colors.white,
+                          : const SizedBox.shrink()),
-                        child: SafeArea(
+                      Expanded(child: Container(
-                            top: false,
+                          color: actions == MailboxActions.create ? AppColor.colorBgMailbox : Colors.white,
-                            bottom: false,
+                          child: SafeArea(
-                            left: _responsiveUtils.isLandscapeMobile(context) ? true : false,
+                              top: false,
-                            right: false,
+                              bottom: false,
-                            child: _buildBodyDestinationPicker(context, actions))))
+                              left: _responsiveUtils.isLandscapeMobile(context) ? true : false,
-                ])
+                              right: false,
-            )
+                              child: _buildBodyDestinationPicker(context, actions))))
+                  ])
+              )
+          ),
         )
     );
   }
@@ -136,8 +137,8 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
   Widget _buildSearchBarWidget(BuildContext context) {
     return Padding(
         padding: EdgeInsets.only(
-            top: _responsiveUtils.isMobile(context) || kIsWeb ? 12 : 0,
+            top: _responsiveUtils.isScreenWithShortestSide(context) || kIsWeb ? 12 : 0,
-            left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16,
+            left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
             right: 16),
         child: (SearchBarView(_imagePaths)
             ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
@@ -174,6 +175,8 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
       children: [
         if (actions == MailboxActions.moveEmail) _buildSearchBarWidget(context),
         _buildLoadingView(),
+        if (actions == MailboxActions.create && !BuildUtils.isWeb && _responsiveUtils.isScreenWithShortestSide(context))
+          const SizedBox(height: 12),
         if (actions == MailboxActions.create) _buildUnifiedMailbox(context),
         SizedBox(height: 12),
         Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
@@ -208,7 +211,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
   Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
     return Padding(
         padding: EdgeInsets.only(
-            left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 8 : 28,
+            left: _responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
             right: 16),
         child: Row(children: [
           Expanded(child: Text(categories.getTitle(context),
@@ -231,8 +234,10 @@ class DestinationPickerView extends GetWidget<DestinationPickerController> {
 
     return Container(
         decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
-        margin: EdgeInsets.only(left: actions == MailboxActions.moveEmail ? 8 : 16, right: actions == MailboxActions.moveEmail ? 0 : 16),
+        margin: EdgeInsets.only(
-        padding: EdgeInsets.only(left: 12, right: 8),
+            left: actions == MailboxActions.moveEmail ? 8 : _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
+            right: actions == MailboxActions.moveEmail ? 0 : 16),
+        padding: const EdgeInsets.only(left: 12, right: 8),
         child: TreeView(
             key: Key('${categories.keyValue}_mailbox_list'),
             children: _buildListChildTileWidget(context, mailboxNode, lastNode: lastNode)));

lib/features/email/presentation/email_controller.dart

@@ -510,7 +510,7 @@ class EmailController extends BaseController {
   }
 
   void openEmailAddressDialog(BuildContext context, EmailAddress emailAddress) {
-    if (responsiveUtils.isMobile(context) || responsiveUtils.isMobileDevice(context)) {
+    if (responsiveUtils.isScreenWithShortestSide(context)) {
       (EmailAddressBottomSheetBuilder(context, imagePaths, emailAddress)
           ..addOnCloseContextMenuAction(() => popBack())
           ..addOnCopyEmailAddressAction((emailAddress) => copyEmailAddress(context, emailAddress))

lib/features/email/presentation/email_view.dart

@@ -362,7 +362,7 @@ class EmailView extends GetView with NetworkConnectionMixin {
   }
 
   int _getAttachmentLimitDisplayed(BuildContext context) {
-    if (responsiveUtils.isMobileDevice(context)) {
+    if (responsiveUtils.isScreenWithShortestSide(context)) {
       return 2;
     } else if (responsiveUtils.isTablet(context)) {
       return 3;

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

@@ -84,7 +84,7 @@ class _AttachmentsPlaceHolderLoadingState extends State<AttachmentsPlaceHolderLo
 
   Widget _placeHolderAttachment(BuildContext context) {
     double width = MediaQuery.of(context).size.width;
-    final percentAttachment = widget.responsiveUtils.isMobileDevice(context)
+    final percentAttachment = widget.responsiveUtils.isScreenWithShortestSide(context)
         ? 0.4
         : widget.responsiveUtils.isTablet(context) ? 0.22 : 0.14;
     return Container(

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -221,14 +221,13 @@ class MailboxController extends BaseMailboxController {
   }
 
   void _initCollapseMailboxCategories() {
-    if (currentContext != null) {
+    if (kIsWeb && currentContext != null
-      if (kIsWeb && (_responsiveUtils.isMobile(currentContext!)) || _responsiveUtils.isTablet(currentContext!)) {
+        && (_responsiveUtils.isMobile(currentContext!) || _responsiveUtils.isTablet(currentContext!))) {
-        mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode(
+      mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode(
-            defaultMailbox: ExpandMode.COLLAPSE,
+          defaultMailbox: ExpandMode.COLLAPSE,
-            folderMailbox: ExpandMode.COLLAPSE);
+          folderMailbox: ExpandMode.COLLAPSE);
-      } else {
+    } else {
-        mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode.initial();
+      mailboxCategoriesExpandMode.value = MailboxCategoriesExpandMode.initial();
-      }
     }
   }
 
@@ -567,7 +566,7 @@ class MailboxController extends BaseMailboxController {
           ..key(const Key('rename_mailbox_modal_sheet'))
           ..title(AppLocalizations.of(context).rename_mailbox)
           ..cancelText(AppLocalizations.of(context).cancel)
-          ..boxConstraints(_responsiveUtils.isMobileDevice(context) && _responsiveUtils.isLandscape(context)
+          ..boxConstraints(_responsiveUtils.isLandscapeMobile(context)
               ? const BoxConstraints(maxWidth: 400)
               : null)
           ..onConfirmAction(AppLocalizations.of(context).rename,

lib/features/mailbox/presentation/mailbox_view.dart

@@ -24,24 +24,27 @@ class MailboxView extends GetWidget<MailboxController> {
 
   @override
   Widget build(BuildContext context) {
-    return _buildBodyMailbox(context);
-  }
-
-  Widget _buildBodyMailbox(BuildContext context) {
     return SafeArea(bottom: false, left: false, right: false, top: _responsiveUtils.isMobile(context),
         child: ClipRRect(
-            borderRadius: _responsiveUtils.isMobile(context) && _responsiveUtils.isPortrait(context)
+            borderRadius: _responsiveUtils.isPortraitMobile(context)
-              ? const BorderRadius.only(topRight: Radius.circular(14), topLeft: Radius.circular(14))
+                ? const BorderRadius.only(topRight: Radius.circular(14), topLeft: Radius.circular(14))
-              : const BorderRadius.all(Radius.zero),
+                : const BorderRadius.all(Radius.zero),
             child: Drawer(
                 child: Scaffold(
-                  backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
+                  backgroundColor: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
+                      ? AppColor.colorBgDesktop
+                      : Colors.white,
                   body: Stack(children: [
                     Column(children: [
-                      if (_responsiveUtils.isDesktop(context)) _buildLogoApp(context),
+                      if (BuildUtils.isWeb && _responsiveUtils.isDesktop(context))
-                      if (!_responsiveUtils.isDesktop(context)) _buildHeaderMailbox(context),
+                        _buildLogoApp(context),
-                      if (_responsiveUtils.isDesktop(context)) _buildComposerButton(context),
+                      if ((BuildUtils.isWeb && !_responsiveUtils.isDesktop(context))
-                      Obx(() => !controller.isSearchActive() && _responsiveUtils.isDesktop(context)
+                          || !BuildUtils.isWeb)
+                        _buildHeaderMailbox(context),
+                      if (BuildUtils.isWeb && _responsiveUtils.isDesktop(context))
+                        _buildComposerButton(context),
+                      Obx(() => !controller.isSearchActive() && BuildUtils.isWeb
+                        && _responsiveUtils.isDesktop(context)
                           ? Row(children: [
                               Expanded(child: _buildSearchBarWidget(context)),
                               _buildAddNewFolderButton(context),
@@ -51,7 +54,7 @@ class MailboxView extends GetWidget<MailboxController> {
                           ? SafeArea(bottom: false, top: false, right: false, child: _buildInputSearchFormWidget(context))
                           : const SizedBox.shrink()),
                       Expanded(child: Obx(() => Container(
-                        color: _responsiveUtils.isDesktop(context)
+                        color: _responsiveUtils.isDesktop(context) && BuildUtils.isWeb
                             ? Colors.transparent
                             : controller.isSearchActive() ? Colors.white : AppColor.colorBgMailbox,
                         child: RefreshIndicator(
@@ -66,8 +69,10 @@ class MailboxView extends GetWidget<MailboxController> {
                                 : SafeArea(
                                     bottom: !controller.isSelectionEnabled(),
                                     right: false,
+                                    top: false,
                                     child: Padding(
-                                        padding: EdgeInsets.only(bottom: (_responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context)) || controller.isSelectionEnabled() ? 0 : 55),
+                                        padding: EdgeInsets.only(bottom: _responsiveUtils.isLandscapeMobile(context)
+                                            || controller.isSelectionEnabled() ? 0 : 55),
                                         child: _buildListMailbox(context)))
                         ),
                       ))),
@@ -76,7 +81,7 @@ class MailboxView extends GetWidget<MailboxController> {
                     Obx(() {
                       if (controller.mailboxDashBoardController.appInformation.value != null
                           && !controller.isSearchActive() && !controller.isSelectionEnabled()) {
-                        if (_responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context)) {
+                        if (_responsiveUtils.isLandscapeMobile(context)) {
                           return const SizedBox.shrink();
                         }
                         return Align(
@@ -219,7 +224,7 @@ class MailboxView extends GetWidget<MailboxController> {
     return Column(children: [
       Padding(
         padding: EdgeInsets.only(
-          left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16,
+          left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
           right: 16),
         child: (UserInformationWidgetBuilder(_imagePaths, context, controller.mailboxDashBoardController.userProfile.value)
               ..addOnLogoutAction(() => controller.mailboxDashBoardController.goToSettings()))
@@ -233,7 +238,7 @@ class MailboxView extends GetWidget<MailboxController> {
       padding: EdgeInsets.only(
           top: _responsiveUtils.isDesktop(context) ? 16 : 12,
           bottom: 16,
-          left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16,
+          left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
           right: 16),
       child: (SearchBarView(_imagePaths)
           ..hintTextSearch(AppLocalizations.of(context).hint_search_mailboxes)
@@ -263,15 +268,14 @@ class MailboxView extends GetWidget<MailboxController> {
       padding: EdgeInsets.only(bottom: controller.isSelectionEnabled() ? 16 : 0),
       children: [
         Obx(() {
-          if ((controller.isSelectionEnabled()
+          if ((controller.isSelectionEnabled() && _responsiveUtils.isLandscapeMobile(context))
-              && _responsiveUtils.isMobile(context)
+              || (BuildUtils.isWeb && _responsiveUtils.isDesktop(context))) {
-              && _responsiveUtils.isLandscape(context))
-              || _responsiveUtils.isDesktop(context)) {
             return const SizedBox.shrink();
           }
           return _buildUserInformation(context);
         }),
-        if (!_responsiveUtils.isDesktop(context)) _buildSearchBarWidget(context),
+        if ((BuildUtils.isWeb && !_responsiveUtils.isDesktop(context))
+          || !BuildUtils.isWeb) _buildSearchBarWidget(context),
         _buildLoadingView(),
         Obx(() => controller.defaultMailboxTree.value.root.childrenItems?.isNotEmpty ?? false
           ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultMailboxTree.value.root)
@@ -287,7 +291,7 @@ class MailboxView extends GetWidget<MailboxController> {
   Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
     return Padding(
         padding: EdgeInsets.only(
-            left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 8 : 28,
+            left: _responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
             right: 16),
         child: Row(children: [
           Expanded(child: Text(categories.getTitle(context),
@@ -311,7 +315,7 @@ class MailboxView extends GetWidget<MailboxController> {
     return Container(
         decoration: BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white),
         margin: EdgeInsets.only(
-            left: _responsiveUtils.isMobile(context) && _responsiveUtils.isLandscape(context) ? 0 : 16,
+            left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16,
             right: 16),
         padding: const EdgeInsets.only(left: 12, right: 8),
         child: TreeView(
@@ -384,16 +388,10 @@ class MailboxView extends GetWidget<MailboxController> {
 
   Widget _buildBackSearchButton(BuildContext context) {
     return Padding(
-        padding: const EdgeInsets.only(left: 5),
+        padding: EdgeInsets.only(left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 5),
-        child: Material(
+        child: buildIconWeb(
-            shape: const CircleBorder(),
+          onTap: () => controller.disableSearch(context),
-            color: Colors.transparent,
+          icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton),
-            child: IconButton(
-                splashRadius: 20,
-                color: AppColor.colorTextButton,
-                icon: SvgPicture.asset(_imagePaths.icBack, width: 20, height: 20, color: AppColor.colorTextButton, fit: BoxFit.fill),
-                onPressed: () => controller.disableSearch(context)
-            )
         ));
   }
 
@@ -406,7 +404,7 @@ class MailboxView extends GetWidget<MailboxController> {
             ? BoxDecoration(borderRadius: BorderRadius.circular(14), color: Colors.white)
             : null,
         child: ListView.builder(
-            padding: const EdgeInsets.only(left: 16, right: 8),
+            padding: EdgeInsets.only(left: _responsiveUtils.isLandscapeMobile(context) ? 0 : 16, right: 8),
             key: const Key('list_mailbox_searched'),
             itemCount: controller.listMailboxSearched.length,
             shrinkWrap: true,

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -147,10 +147,7 @@ class MailboxView extends GetWidget<MailboxController> {
             left: _responsiveUtils.isDesktop(context) ? 20 : 0),
         children: [
           Obx(() {
-            if ((controller.isSelectionEnabled()
+            if (controller.isSelectionEnabled() || _responsiveUtils.isDesktop(context)) {
-                && _responsiveUtils.isMobile(context)
-                && _responsiveUtils.isLandscape(context))
-                || _responsiveUtils.isDesktop(context)) {
               return const SizedBox.shrink();
             }
             return _buildUserInformation(context);

lib/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart

@@ -161,15 +161,18 @@ class MailBoxFolderTileBuilder {
   }
 
   Widget _buildSelectModeIcon() {
-    return Transform(
+    return Container(
-        transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0),
+      color: Colors.transparent,
-        child: buildIconWeb(
+      child: Transform(
-            icon: SvgPicture.asset(
+          transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0),
-                _mailboxNode.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
+          child: buildIconWeb(
-                width: kIsWeb ? 20 : 24,
+              icon: SvgPicture.asset(
-                height: kIsWeb ? 20 : 24,
+                  _mailboxNode.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
-                fit: BoxFit.fill),
+                  width: kIsWeb ? 20 : 24,
-            onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode)));
+                  height: kIsWeb ? 20 : 24,
+                  fit: BoxFit.fill),
+              onTap: () => _onSelectMailboxFolderClick?.call(_mailboxNode))),
+    );
   }
 
   Color get backgroundColorItem {

lib/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart

@@ -116,14 +116,17 @@ class MailboxSearchTileBuilder {
   }
 
   Widget _buildSelectModeIcon() {
-    return Transform(
+    return Container(
-        transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0),
+      color: Colors.transparent,
-        child: buildIconWeb(
+      child: Transform(
-            icon: SvgPicture.asset(
+          transform: Matrix4.translationValues(kIsWeb ? -8.0 : -10.0, 0.0, 0.0),
-                _presentationMailbox.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
+          child: buildIconWeb(
-                width: kIsWeb ? 20 : 24,
+              icon: SvgPicture.asset(
-                height: kIsWeb ? 20 : 24,
+                  _presentationMailbox.selectMode == SelectMode.ACTIVE ? _imagePaths.icSelected : _imagePaths.icUnSelected,
-                fit: BoxFit.fill),
+                  width: kIsWeb ? 20 : 24,
-            onTap: () => _onSelectMailboxActionClick?.call(_presentationMailbox)));
+                  height: kIsWeb ? 20 : 24,
+                  fit: BoxFit.fill),
+              onTap: () => _onSelectMailboxActionClick?.call(_presentationMailbox))),
+    );
   }
 }

lib/features/mailbox_creator/presentation/mailbox_creator_view.dart

@@ -24,16 +24,17 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
           child: ResponsiveWidget(
               responsiveUtils: _responsiveUtils,
               mobile: SizedBox(child: _buildBody(context), width: double.infinity),
+              landscapeMobile: SizedBox(child: _buildBody(context), width: double.infinity),
               tablet: Row(children: [
-                SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawer),
                 Expanded(child: Container(color: Colors.transparent)),
               ]),
               tabletLarge: Row(children: [
-                SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawer),
                 Expanded(child: Container(color: Colors.transparent)),
               ]),
               desktop: Row(children: [
-                SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+                SizedBox(child: _buildBody(context), width: _responsiveUtils.defaultSizeDrawer),
                 Expanded(child: Container(color: Colors.transparent)),
               ])
           ),

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view.dart

@@ -24,20 +24,22 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       key: controller.scaffoldKey,
       drawer: ResponsiveWidget(
         responsiveUtils: _responsiveUtils,
-        mobile: _responsiveUtils.isPortrait(context)
+        mobile: SizedBox(child: MailboxView(), width: double.infinity),
-            ? SizedBox(child: MailboxView(), width: double.infinity)
+        landscapeMobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
-            : SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+        tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
-        tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
         tabletLarge: const SizedBox.shrink(),
         desktop: const SizedBox.shrink(),
       ),
-      drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context),
+      drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context)
+          || _responsiveUtils.isLandscapeMobile(context)
+          || _responsiveUtils.isTablet(context),
       body: Stack(children: [
         ResponsiveWidget(
           responsiveUtils: _responsiveUtils,
           desktop: _buildLargeScreenView(context),
           tabletLarge: _buildLargeScreenView(context),
           tablet: ThreadView(),
+          landscapeMobile: ThreadView(),
           mobile: ThreadView(),
         ),
         Obx(() => controller.dashBoardAction.value is ComposeEmailAction
@@ -96,7 +98,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
     return Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
+        SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
         Expanded(child: _wrapContainerForThreadAndEmail(context))
       ],
     );

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -41,8 +41,8 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       backgroundColor: Colors.white,
       drawer: ResponsiveWidget(
           responsiveUtils: _responsiveUtils,
-          mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
+          mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
-          tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
+          tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
           tabletLarge: const SizedBox.shrink(),
           desktop: const SizedBox.shrink(),
       ),
@@ -83,7 +83,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
               Expanded(child: Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
+                  SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenu),
                   Expanded(child: _wrapContainerForThreadAndEmail(context))
                 ],
               ))
@@ -91,7 +91,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
             tabletLarge: Row(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
+                SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
                 Expanded(child: _wrapContainerForThreadAndEmail(context))
               ],
             ),

lib/features/manage_account/presentation/manage_account_dashboard_view.dart

@@ -32,7 +32,7 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
       backgroundColor: Colors.white,
       drawer: ResponsiveWidget(
           responsiveUtils: _responsiveUtils,
-          mobile: SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
+          mobile: SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeDrawer),
           desktop: const SizedBox.shrink()
       ),
       drawerEnableOpenDragGesture: !_responsiveUtils.isDesktop(context),
@@ -73,7 +73,7 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
               Expanded(child: Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
+                  SizedBox(child: ManageAccountMenuView(), width: _responsiveUtils.defaultSizeMenu),
                   Expanded(child: _viewDisplayedOfAccountMenuItem())
                 ],
               ))

lib/features/thread/presentation/thread_view.dart

@@ -1,5 +1,4 @@
 import 'package:core/core.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
@@ -32,9 +31,12 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
       onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
       child: Scaffold(
         resizeToAvoidBottomInset: false,
-        backgroundColor: _responsiveUtils.isDesktop(context) ? AppColor.colorBgDesktop : Colors.white,
+        backgroundColor: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
+            ? AppColor.colorBgDesktop
+            : Colors.white,
         body: Row(children: [
-          if ((!kIsWeb && !_responsiveUtils.isMobile(context)) || (kIsWeb && _responsiveUtils.isTabletLarge(context)))
+          if ((!BuildUtils.isWeb && _responsiveUtils.isDesktop(context) && _responsiveUtils.isTabletLarge(context))
+              || (BuildUtils.isWeb && _responsiveUtils.isTabletLarge(context)))
             const VerticalDivider(color: AppColor.lineItemListColor, width: 1, thickness: 0.2),
           Expanded(child: SafeArea(
               right: _responsiveUtils.isLandscapeMobile(context),
@@ -42,26 +44,33 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
               child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    Obx(() => !controller.isSearchActive() && !_responsiveUtils.isDesktop(context)
+                    Obx(() => !controller.isSearchActive()
+                        && ((!_responsiveUtils.isDesktop(context) && BuildUtils.isWeb) || !BuildUtils.isWeb)
                       ? _buildAppBarNormal(context)
                       : const SizedBox.shrink()),
                     _buildSearchInputFormForMobile(context),
                     Container(
-                        color: kIsWeb ? AppColor.colorBgDesktop : Colors.white,
+                        color: BuildUtils.isWeb ? AppColor.colorBgDesktop : Colors.white,
                         padding: EdgeInsets.zero,
                         child: _buildSearchButtonViewForMobile(context)),
                     Obx(() => controller.isMailboxTrash && controller.emailList.isNotEmpty && !controller.isSearchActive()
                         ? _buildEmptyTrashButton(context)
                         : const SizedBox.shrink()),
                     Expanded(child: Container(
-                        color: kIsWeb ? AppColor.colorBgDesktop : Colors.white,
+                        color: BuildUtils.isWeb ? AppColor.colorBgDesktop : Colors.white,
-                        padding: _responsiveUtils.isDesktop(context) ? const EdgeInsets.only(left: 32, right: 24, top: 16, bottom: 24) : EdgeInsets.zero,
+                        padding: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
+                            ? const EdgeInsets.only(left: 32, right: 24, top: 16, bottom: 24)
+                            : EdgeInsets.zero,
                         child: Stack(children: [
                           Container(
                               alignment: Alignment.center,
                               decoration: BoxDecoration(
-                                  borderRadius: _responsiveUtils.isDesktop(context) ? BorderRadius.circular(20) : null,
+                                  borderRadius: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
-                                  border: _responsiveUtils.isDesktop(context) ? Border.all(color: AppColor.colorBorderBodyThread, width: 1) : null,
+                                      ? BorderRadius.circular(20)
+                                      : null,
+                                  border: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
+                                      ? Border.all(color: AppColor.colorBorderBodyThread, width: 1)
+                                      : null,
                                   color: Colors.white),
                               child: Column(
                                   crossAxisAlignment: CrossAxisAlignment.start,
@@ -112,12 +121,13 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
 
   Widget _buildSearchButtonViewForMobile(BuildContext context) {
     return Obx(() {
-      if (!controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) {
+      if (!controller.isSearchActive() &&
+          ((!_responsiveUtils.isDesktop(context) && BuildUtils.isWeb) || !BuildUtils.isWeb)) {
         return Container(
           color: Colors.white,
           padding: const EdgeInsets.only(left: 16, right: 16, bottom: 10),
           child: (SearchBarView(_imagePaths)
-              ..hintTextSearch(kIsWeb ? AppLocalizations.of(context).search_emails : AppLocalizations.of(context).hint_search_emails)
+              ..hintTextSearch(BuildUtils.isWeb ? AppLocalizations.of(context).search_emails : AppLocalizations.of(context).hint_search_emails)
               ..addOnOpenSearchViewAction(() => controller.enableSearch(context)))
             .build());
       } else {
@@ -128,7 +138,8 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
 
   Widget _buildSearchInputFormForMobile(BuildContext context) {
     return Obx(() {
-      if (controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) {
+      if (controller.isSearchActive() &&
+          ((!_responsiveUtils.isDesktop(context) && BuildUtils.isWeb) || !BuildUtils.isWeb)) {
         return Column(children: [
           _buildSearchForm(context),
           const Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2),
@@ -172,7 +183,7 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
           ..addOnEmailSelectionAction((actionType, selectionEmail) =>
               controller.pressEmailSelectionAction(context, actionType, selectionEmail))
           ..addOnFilterEmailAction((filterMessageOption, position) =>
-              _responsiveUtils.isMobileDevice(context)
+              _responsiveUtils.isScreenWithShortestSide(context)
                 ? controller.openContextMenuAction(
                     context,
                     _filterMessagesCupertinoActionTile(context, filterMessageOption))
@@ -186,9 +197,12 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
 
   Widget _buildFloatingButtonCompose(BuildContext context) {
     return Obx(() {
-      if (!controller.isSearchActive() && !_responsiveUtils.isDesktop(context)) {
+      if (!controller.isSearchActive()
+          && (!BuildUtils.isWeb || (BuildUtils.isWeb && !_responsiveUtils.isDesktop(context)))) {
         return Container(
-          padding: EdgeInsets.zero,
+          padding: BuildUtils.isWeb
+              ? EdgeInsets.zero
+              : controller.isSelectionEnabled() ? const EdgeInsets.only(bottom: 70) : EdgeInsets.zero,
           child: Align(
             alignment: Alignment.bottomRight,
             child: ScrollingFloatingButtonAnimated(
@@ -317,7 +331,7 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
 
   Widget _buildListEmail(BuildContext context) {
     return Container(
-      margin: _responsiveUtils.isDesktop(context)
+      margin: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
           ? EdgeInsets.symmetric(vertical: controller.isSelectionEnabled() ? 4 : 12, horizontal: 4)
           : EdgeInsets.only(top: controller.isSearchActive() ? 8 : 0),
       alignment: Alignment.center,
@@ -381,7 +395,7 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
         physics: const AlwaysScrollableScrollPhysics(),
         key: const PageStorageKey('list_presentation_email_in_threads'),
         itemCount: listPresentationEmail.length,
-        padding: EdgeInsets.only(top: kIsWeb && !_responsiveUtils.isDesktop(context) ? 10 : 0),
+        padding: EdgeInsets.only(top: BuildUtils.isWeb && !_responsiveUtils.isDesktop(context) ? 10 : 0),
         itemBuilder: (context, index) => Obx(() => (EmailTileBuilder(
                 context,
                 listPresentationEmail[index],
@@ -434,7 +448,7 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
               width: double.infinity,
               padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
               decoration: BoxDecoration(
-                  borderRadius: _responsiveUtils.isDesktop(context)
+                  borderRadius: BuildUtils.isWeb && _responsiveUtils.isDesktop(context)
                       ? const BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20))
                       : null,
                   color: AppColor.bgStatusResultSearch),
@@ -456,10 +470,10 @@ class ThreadView extends GetWidget<ThreadController> with AppLoaderMixin {
           border: Border.all(color: AppColor.colorLineLeftEmailView),
           color: Colors.white),
       margin: EdgeInsets.only(
-          left: _responsiveUtils.isDesktop(context) ? 32 : 16,
+          left: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 32 : 16,
-          right: _responsiveUtils.isDesktop(context) ? 20 : 16,
+          right: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 20 : 16,
-          bottom: _responsiveUtils.isDesktop(context) ? 0 : 16,
+          bottom: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 0 : 16,
-          top: _responsiveUtils.isDesktop(context) ? 16 : 0),
+          top: BuildUtils.isWeb && _responsiveUtils.isDesktop(context) ? 16 : 0),
       padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
       child: Row(children: [
         Padding(

lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart

@@ -148,7 +148,7 @@ class AppBarThreadWidgetBuilder {
                         padding: const EdgeInsets.only(left: 40, right: 40),
                         child: _buildContentCenterAppBar()),
                     Transform(
-                        transform: Matrix4.translationValues(_responsiveUtils.isDesktop(_context) ? -2.0 : -16.0, -8.0, 0.0),
+                        transform: Matrix4.translationValues(_getXTranslationValues(), -8.0, 0.0),
                         child: Text(
                             _filterMessageOption.getTitle(_context),
                             style: const TextStyle(fontSize: 11, color: AppColor.colorContentEmail)))
@@ -213,7 +213,7 @@ class AppBarThreadWidgetBuilder {
         padding: const EdgeInsets.only(left: 16, right: 16),
         child: GestureDetector(
             onTap: () {
-              if (_onFilterEmailAction != null && _responsiveUtils.isMobileDevice(_context)) {
+              if (_onFilterEmailAction != null && _responsiveUtils.isScreenWithShortestSide(_context)) {
                 _onFilterEmailAction!.call(_filterMessageOption, null);
               }
             },
@@ -224,7 +224,7 @@ class AppBarThreadWidgetBuilder {
                   : AppColor.colorFilterMessageEnabled,
               fit: BoxFit.fill),
             onTapDown: (detail) {
-              if (_onFilterEmailAction != null && !_responsiveUtils.isMobileDevice(_context)) {
+              if (_onFilterEmailAction != null && !_responsiveUtils.isScreenWithShortestSide(_context)) {
                 final screenSize = MediaQuery.of(_context).size;
                 final offset = detail.globalPosition;
                 final position = RelativeRect.fromLTRB(
@@ -309,4 +309,12 @@ class AppBarThreadWidgetBuilder {
     final maxWidth = width > widthSiblingsWidget ? width - widthSiblingsWidget : 0.0;
     return maxWidth;
   }
+
+  double _getXTranslationValues() {
+    if (BuildUtils.isWeb) {
+      return _responsiveUtils.isDesktop(_context) && BuildUtils.isWeb ? -2.0 : -16.0;
+    } else {
+      return _responsiveUtils.isTabletLarge(_context) ? 0.0 : -16.0;
+    }
+  }
 }

lib/features/thread/presentation/widgets/email_tile_builder.dart

@@ -6,14 +6,12 @@ import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
 import 'package:tmail_ui_user/features/thread/presentation/model/search_status.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 typedef OnPressEmailActionClick = void Function(EmailActionType, PresentationEmail);
 typedef OnMoreActionClick = void Function(PresentationEmail, RelativeRect?);
 
 class EmailTileBuilder {
 
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
   final _imagePaths = Get.find<ImagePaths>();
 
   final PresentationEmail _presentationEmail;
@@ -50,254 +48,125 @@ class EmailTileBuilder {
     return Theme(
       key: const Key('thread_tile'),
       data: ThemeData(splashColor: Colors.transparent, highlightColor: Colors.transparent),
-      child: ResponsiveWidget(
+      child: Padding(
-        responsiveUtils: _responsiveUtils,
+        padding: const EdgeInsets.only(left: 16, right: 16, bottom: 4),
-        mobile: _wrapContainerForTile(_buildListTile()),
+        child: Column(children: [
-        desktop: _wrapContainerForTile(_buildListTileForDesktop()),
+          ListTile(
-      )
+            contentPadding: EdgeInsets.zero,
-    );
+            onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail),
-  }
+            onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail),
-
+            leading: GestureDetector(
-  Widget _wrapContainerForTile(Widget tile) {
+              onTap: () => _emailActionClick?.call(
-    return Padding(
+                  _selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview,
-      padding: const EdgeInsets.only(left: 16, right: 16, bottom: 4),
+                  _presentationEmail),
-      child: tile);
+              child: Container(
-  }
+                  width: 56,
-
+                  height: 56,
-  Widget _buildListTile() {
+                  color: Colors.transparent,
-    return Column(children: [
+                  alignment: Alignment.center,
-      ListTile(
+                  child: _buildAvatarIcon()),
-        contentPadding: EdgeInsets.zero,
+            ),
-        onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail),
+            title: Row(
-        onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail),
+              children: [
-        leading: GestureDetector(
+                if (!_presentationEmail.hasRead)
-          onTap: () => _emailActionClick?.call(
+                  Padding(
-              _selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview,
+                      padding: const EdgeInsets.only(right: 5),
-              _presentationEmail),
+                      child: SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)),
-          child: Container(
+                Expanded(
-              width: 56,
+                    child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-              height: 56,
+                        ? RichTextBuilder(
-              color: Colors.transparent,
+                            _getInformationSender(),
-              alignment: Alignment.center,
+                            _searchQuery!.value,
-              child: _buildAvatarIcon()),
+                            const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
-        ),
+                            TextStyle(fontSize: 15, color: _buildTextColorForReadEmail(), backgroundColor: AppColor.bgWordSearch, fontWeight: _buildFontForReadEmail())).build()
-        title: Row(
+                        : Text(
-          children: [
+                            _getInformationSender(),
-            if (!_presentationEmail.hasRead)
+                            maxLines: 1,
-              Padding(
+                            overflow:TextOverflow.ellipsis,
-                  padding: const EdgeInsets.only(right: 5),
+                            style:  TextStyle(fontSize: 15, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()))
-                  child: SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)),
+                ),
-            Expanded(
+                if (_presentationEmail.hasAttachment == true)
-                child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
+                  Padding(
-                    ? RichTextBuilder(
+                      padding: const EdgeInsets.only(left: 8),
-                        _getInformationSender(),
+                      child: SvgPicture.asset(_imagePaths.icAttachment, width: 16, height: 16, fit: BoxFit.fill)),
-                        _searchQuery!.value,
+                Padding(
-                        const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
+                    padding: const EdgeInsets.only(right: 4, left: 8),
-                        TextStyle(fontSize: 15, color: _buildTextColorForReadEmail(), backgroundColor: AppColor.bgWordSearch, fontWeight: _buildFontForReadEmail())).build()
+                    child: Text(
-                    : Text(
+                        _presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag()),
-                        _getInformationSender(),
                         maxLines: 1,
                         overflow:TextOverflow.ellipsis,
-                        style:  TextStyle(fontSize: 15, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()))
+                        style:  TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()))),
+                SvgPicture.asset(_imagePaths.icChevron, width: 16, height: 16, fit: BoxFit.fill),
+              ],
             ),
-            if (_presentationEmail.hasAttachment == true)
+            subtitle: Column(
-              Padding(
+              crossAxisAlignment: CrossAxisAlignment.start,
-                  padding: const EdgeInsets.only(left: 8),
+              mainAxisSize: MainAxisSize.min,
-                  child: SvgPicture.asset(_imagePaths.icAttachment, width: 16, height: 16, fit: BoxFit.fill)),
+              children: [
-            Padding(
+                Padding(
-                padding: const EdgeInsets.only(right: 4, left: 8),
+                    padding: const EdgeInsets.only(top: 6),
-                child: Text(
+                    child: Row(
-                    _presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag()),
+                      mainAxisSize: MainAxisSize.min,
-                    maxLines: 1,
+                      children: [
-                    overflow:TextOverflow.ellipsis,
+                        Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-                    style:  TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()))),
+                            ? RichTextBuilder(
-            SvgPicture.asset(_imagePaths.icChevron, width: 16, height: 16, fit: BoxFit.fill),
+                                _presentationEmail.getEmailTitle(),
-          ],
+                                _searchQuery!.value,
-        ),
+                                TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()),
-        subtitle: Column(
+                                TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail())).build()
-          crossAxisAlignment: CrossAxisAlignment.start,
+                            : Text(
-          mainAxisSize: MainAxisSize.min,
+                                _presentationEmail.getEmailTitle(),
-          children: [
+                                maxLines: 1,
-            Padding(
+                                overflow: TextOverflow.ellipsis,
-                padding: const EdgeInsets.only(top: 6),
+                                style:  TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()))
-                child: Row(
+                        ),
-                  mainAxisSize: MainAxisSize.min,
+                        if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
-                  children: [
+                          Container(
-                    Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
+                              margin: const EdgeInsets.only(left: 8),
-                        ? RichTextBuilder(
+                              padding: const EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3),
-                            _presentationEmail.getEmailTitle(),
+                              constraints: const BoxConstraints(maxWidth: 100),
-                            _searchQuery!.value,
+                              decoration: BoxDecoration(
-                             TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()),
+                                  borderRadius: BorderRadius.circular(10),
-                             TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail())).build()
+                                  color: AppColor.backgroundCounterMailboxColor),
-                        : Text(
+                              child: Text(
-                            _presentationEmail.getEmailTitle(),
+                                _presentationEmail.mailboxName,
-                            maxLines: 1,
+                                maxLines: 1,
-                            overflow: TextOverflow.ellipsis,
+                                overflow: TextOverflow.ellipsis,
-                            style:  TextStyle(fontSize: 13, color: _buildTextColorForReadEmail(), fontWeight: _buildFontForReadEmail()))
+                                style: const TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
-                    ),
+                              )
-                    if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
+                          ),
-                      Container(
+                        if (_presentationEmail.hasStarred)
-                          margin: const EdgeInsets.only(left: 8),
+                          SvgPicture.asset(_imagePaths.icStar, width: 15, height: 15, fit: BoxFit.fill)
-                          padding: const EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3),
+                      ],
-                          constraints: const BoxConstraints(maxWidth: 100),
+                    )),
-                          decoration: BoxDecoration(
+                Padding(
-                              borderRadius: BorderRadius.circular(10),
+                    padding: const EdgeInsets.only(top: 6),
-                              color: AppColor.backgroundCounterMailboxColor),
+                    child: Row(children: [
-                          child: Text(
+                      Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-                            _presentationEmail.mailboxName,
+                          ? RichTextBuilder(
-                            maxLines: 1,
+                              _presentationEmail.getPartialContent(),
-                            overflow: TextOverflow.ellipsis,
+                              _searchQuery!.value,
-                            style: const TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
+                              const TextStyle(fontSize: 13, color: AppColor.colorContentEmail),
-                          )
+                              const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, backgroundColor: AppColor.bgWordSearch)).build()
+                          : Text(
+                              _presentationEmail.getPartialContent(),
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                              style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail))
                       ),
-                    if (_presentationEmail.hasStarred)
+                    ])
-                      SvgPicture.asset(_imagePaths.icStar, width: 15, height: 15, fit: BoxFit.fill)
+                ),
-                  ],
+              ],
-                )),
-            Padding(
-                padding: const EdgeInsets.only(top: 6),
-                child: Row(children: [
-                  Expanded(child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-                      ? RichTextBuilder(
-                          _presentationEmail.getPartialContent(),
-                          _searchQuery!.value,
-                          const TextStyle(fontSize: 13, color: AppColor.colorContentEmail),
-                          const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, backgroundColor: AppColor.bgWordSearch)).build()
-                      : Text(
-                          _presentationEmail.getPartialContent(),
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                          style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail))
-                  ),
-                ])
-            ),
-          ],
-        ),
-      ),
-      const Padding(
-          padding: EdgeInsets.only(top: 4),
-          child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
-    ]);
-  }
-
-  Widget _buildListTileForDesktop() {
-    return GestureDetector(
-      onTap: () => _emailActionClick?.call(EmailActionType.preview, _presentationEmail),
-      onLongPress: () => _emailActionClick?.call(EmailActionType.selection, _presentationEmail),
-      child: Column(children: [
-        Row(children: [
-          Container(
-              alignment: Alignment.center,
-              child: !_presentationEmail.hasRead
-                  ? SvgPicture.asset(_imagePaths.icUnreadStatus, width: 9, height: 9, fit: BoxFit.fill)
-                  : const SizedBox(width: 9)),
-          buildIconWeb(
-              icon: SvgPicture.asset(
-                  _presentationEmail.hasStarred ? _imagePaths.icStar : _imagePaths.icUnStar,
-                  width: 20,
-                  height: 20,
-                  fit: BoxFit.fill),
-              tooltip: _presentationEmail.hasStarred ? AppLocalizations.of(_context).starred : AppLocalizations.of(_context).not_starred,
-              onTap: () => _emailActionClick?.call(
-                  _presentationEmail.hasStarred ?  EmailActionType.unMarkAsStarred :  EmailActionType.markAsStarred,
-                  _presentationEmail)),
-          GestureDetector(
-            onTap: () => _emailActionClick?.call(
-                _selectModeAll == SelectMode.ACTIVE ? EmailActionType.selection : EmailActionType.preview,
-                _presentationEmail),
-            child: Container(
-                width: 40,
-                height: 56,
-                color: Colors.transparent,
-                alignment: Alignment.center,
-                child: _buildAvatarIcon(
-                  iconSize: 40,
-                  textStyle: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: Colors.white))
             ),
           ),
-          const SizedBox(width: 10),
-          SizedBox(
-            width: 160,
-            child: _isSearchEnabled
-              ? RichTextBuilder(
-                  _getInformationSender(),
-                  _searchQuery!.value,
-                  const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
-                  const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, backgroundColor: AppColor.bgWordSearch, fontWeight: FontWeight.w600)).build()
-              : Text(_getInformationSender(),
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: const TextStyle(fontSize: 15, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600)),
-          ),
-          const SizedBox(width: 24),
-          Expanded(child: _buildSubjectAndContent()),
-          const SizedBox(width: 16),
-          if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
-            Container(
-                margin: const EdgeInsets.only(left: 8),
-                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
-                constraints: const BoxConstraints(maxWidth: 80),
-                decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.backgroundCounterMailboxColor),
-                child: Text(_presentationEmail.mailboxName,
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: const TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
-                )
-            ),
-          if (_presentationEmail.hasAttachment == true)
-            Padding(padding: const EdgeInsets.only(left: 8),
-                child: SvgPicture.asset(_imagePaths.icAttachment, width: 16, height: 16, fit: BoxFit.fill)),
-          Padding(
-              padding: const EdgeInsets.only(right: 20, left: 8),
-              child: Text(_presentationEmail.getReceivedAt(Localizations.localeOf(_context).toLanguageTag()),
-                  maxLines: 1,
-                  textAlign: TextAlign.right,
-                  overflow: TextOverflow.ellipsis,
-                  style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.normal))),
-        ]),
-        if (_selectModeAll == SelectMode.INACTIVE)
           const Padding(
-              padding: EdgeInsets.only(left: 85),
+              padding: EdgeInsets.only(top: 4),
               child: Divider(color: AppColor.lineItemListColor, height: 1, thickness: 0.2)),
-      ]),
+        ]),
+      )
     );
   }
 
-  Widget _buildSubjectAndContent() {
-    return LayoutBuilder(builder: (context, constraints) {
-      return Row(children: [
-        Container(
-            constraints: BoxConstraints(maxWidth: constraints.maxWidth / 2),
-            child: _isSearchEnabled
-                ? RichTextBuilder(
-                    _presentationEmail.getEmailTitle(),
-                    _searchQuery!.value,
-                    const TextStyle(fontSize: 13, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600),
-                    const TextStyle(fontSize: 13, backgroundColor: AppColor.bgWordSearch, color: AppColor.colorNameEmail)).build()
-                : Text(_presentationEmail.getEmailTitle(),
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                    style: const TextStyle(fontSize: 13, color: AppColor.colorNameEmail, fontWeight: FontWeight.w600))
-        ),
-        if (_presentationEmail.getEmailTitle().isNotEmpty) const SizedBox(width: 12),
-        Expanded(
-          child: Container(
-            child: _isSearchEnabled
-              ? RichTextBuilder(
-                  _presentationEmail.getPartialContent(),
-                  _searchQuery!.value,
-                  const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.normal),
-                  const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, backgroundColor: AppColor.bgWordSearch)).build()
-              : Text(_presentationEmail.getPartialContent(),
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                  style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.normal))
-          )
-        ),
-      ]);
-    });
-  }
-
   Widget _buildAvatarIcon({
     double? iconSize,
     TextStyle? textStyle
@@ -334,13 +203,11 @@ class EmailTileBuilder {
   }
 
   FontWeight _buildFontForReadEmail() {
-    if (!_presentationEmail.hasRead) return FontWeight.w600;
+    return !_presentationEmail.hasRead ? FontWeight.w600 : FontWeight.normal;
-    return FontWeight.normal;
   }
 
   Color _buildTextColorForReadEmail() {
-    if (_presentationEmail.hasRead) return AppColor.colorContentEmail;
+    return _presentationEmail.hasRead ? AppColor.colorContentEmail : AppColor.colorNameEmail;
-    return AppColor.colorNameEmail;
   }
 
   String _getInformationSender() {
@@ -351,8 +218,4 @@ class EmailTileBuilder {
     }
     return _presentationEmail.getSenderName();
   }
-
-  bool get _isSearchEnabled => _searchStatus == SearchStatus.ACTIVE
-      && _searchQuery != null
-      && _searchQuery!.value.isNotEmpty;
 }