TF-1611 Fix bottom padding too large in vacation view

(cherry picked from commit 943102f54285fc3c9291160cc685e42bbdfbf168)

lib/features/manage_account/presentation/base/setting_detail_view_builder.dart

@@ -7,24 +7,32 @@ class SettingDetailViewBuilder extends StatelessWidget {
 
   final ResponsiveUtils responsiveUtils;
   final Widget child;
+  final EdgeInsets? padding;
+  final VoidCallback? onTapGestureDetector;
 
   const SettingDetailViewBuilder({
     super.key,
     required this.responsiveUtils,
-    required this.child
+    required this.child,
+    this.padding,
+    this.onTapGestureDetector
   });
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: SettingsUtils.getBackgroundColor(context, responsiveUtils),
-      body: Container(
+      body: GestureDetector(
-        width: double.infinity,
+        onTap: onTapGestureDetector,
-        height: double.infinity,
+        child: Container(
-        color: SettingsUtils.getContentBackgroundColor(context, responsiveUtils),
+          width: double.infinity,
-        decoration: SettingsUtils.getBoxDecorationForContent(context, responsiveUtils),
+          height: double.infinity,
-        margin: SettingsUtils.getMarginSettingDetailsView(context, responsiveUtils),
+          color: SettingsUtils.getContentBackgroundColor(context, responsiveUtils),
-        child: child,
+          decoration: SettingsUtils.getBoxDecorationForContent(context, responsiveUtils),
+          margin: SettingsUtils.getMarginSettingDetailsView(context, responsiveUtils),
+          padding: padding,
+          child: child,
+        ),
       ),
     );
   }

lib/features/manage_account/presentation/vacation/utils/vacation_utils.dart

@@ -1,4 +1,17 @@
 
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+
 class VacationUtils {
   static const String vacationTagName = 'Vacation';
+
+  static EdgeInsets getPaddingView(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isDesktop(context)) {
+      return const EdgeInsets.symmetric(vertical: 24, horizontal: 20);
+    } else if (responsiveUtils.isTabletLarge(context) || responsiveUtils.isTablet(context)) {
+      return const EdgeInsets.symmetric(horizontal: 28, vertical: 24);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 12, vertical: 24);
+    }
+  }
 }

lib/features/manage_account/presentation/vacation/vacation_view.dart

@@ -11,10 +11,11 @@ import 'package:tmail_ui_user/features/base/widget/text_input_decoration_builder
 import 'package:tmail_ui_user/features/base/widget/text_input_field_builder.dart';
 import 'package:tmail_ui_user/features/composer/presentation/mixin/rich_text_button_mixin.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/button_layout_type.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/vacation/date_type.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/vacation/vacation_message_type.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/vacation/vacation_responder_status.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/vacation/utils/vacation_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/vacation_controller.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:html_editor_enhanced/html_editor.dart' as html_editor_browser;
@@ -28,266 +29,255 @@ class VacationView extends GetWidget<VacationController> with RichTextButtonMixi
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    if (BuildUtils.isWeb) {
-      backgroundColor: _responsiveUtils.isWebDesktop(context)
+      return _buildVacationFormView(context);
-          ? AppColor.colorBgDesktop
+    } else {
-          : Colors.white,
+      return KeyboardRichText(
-      body: GestureDetector(
+        richTextController: controller.richTextControllerForMobile,
-        onTap: () => FocusScope.of(context).unfocus(),
+        keyBroadToolbar: RichTextKeyboardToolBar(
-        child: KeyboardRichText(
+          titleBack: AppLocalizations.of(context).format,
+          backgroundKeyboardToolBarColor: AppColor.colorBackgroundKeyboard,
+          titleFormatBottomSheet: AppLocalizations.of(context).format,
           richTextController: controller.richTextControllerForMobile,
-          keyBroadToolbar: RichTextKeyboardToolBar(
+          titleQuickStyleBottomSheet: AppLocalizations.of(context).quickStyles,
-            titleBack: AppLocalizations.of(context).format,
+          titleBackgroundBottomSheet: AppLocalizations.of(context).background,
-            backgroundKeyboardToolBarColor: AppColor.colorBackgroundKeyboard,
+          titleForegroundBottomSheet: AppLocalizations.of(context).foreground,
-            titleFormatBottomSheet: AppLocalizations.of(context).format,
+        ),
-            richTextController: controller.richTextControllerForMobile,
+        child: _buildVacationFormView(context)
-            titleQuickStyleBottomSheet: AppLocalizations.of(context).quickStyles,
+      );
-            titleBackgroundBottomSheet: AppLocalizations.of(context).background,
+    }
-            titleForegroundBottomSheet: AppLocalizations.of(context).foreground,
+  }
-          ),
+
-          child: Container(
+  Widget _buildVacationFormView(BuildContext context) {
-            width: double.infinity,
+    return SettingDetailViewBuilder(
-            height: double.infinity,
+      responsiveUtils: _responsiveUtils,
-            margin: _responsiveUtils.isWebDesktop(context)
+      padding: const EdgeInsets.symmetric(horizontal: 4),
-                ? const EdgeInsets.all(24)
+      onTapGestureDetector: () => controller.clearFocusEditor(context),
-                : EdgeInsets.zero,
+      child: SingleChildScrollView(
-            decoration: _responsiveUtils.isWebDesktop(context)
+        physics: const ClampingScrollPhysics(),
-                ? BoxDecoration(
+        controller: controller.scrollController,
-                    borderRadius: BorderRadius.circular(20),
+        child: Padding(
-                    border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
+          padding: VacationUtils.getPaddingView(context, _responsiveUtils),
-                    color: Colors.white)
+          child: Column(
-                : null,
+            crossAxisAlignment: CrossAxisAlignment.start,
-            padding: SettingsUtils.getMarginViewForSettingDetails(context, _responsiveUtils),
+            children: [
-            child: SingleChildScrollView(
+              if (_responsiveUtils.isWebDesktop(context))
-              physics: const ClampingScrollPhysics(),
+                ...[
-              controller: controller.scrollController,
+                  Text(
-              child: Column(
+                    AppLocalizations.of(context).vacation,
-                  crossAxisAlignment: CrossAxisAlignment.start,
+                    style: const TextStyle(
-                  children: [
+                      fontSize: 20,
-                    if (_responsiveUtils.isWebDesktop(context))
+                      fontWeight: FontWeight.w500,
-                     ...[
+                      color: Colors.black
-                       Text(AppLocalizations.of(context).vacation,
+                    )
-                           style: const TextStyle(
+                  ),
-                               fontSize: 20,
+                  const SizedBox(height: 8)
-                               fontWeight: FontWeight.w500,
+                ],
-                               color: Colors.black)),
+              Text(
-                       const SizedBox(height: 8)
+                AppLocalizations.of(context).vacationSettingExplanation,
-                     ],
+                style: const TextStyle(
-                    Text(AppLocalizations.of(context).vacationSettingExplanation,
+                  fontSize: 16,
-                        style: const TextStyle(
+                  fontWeight: FontWeight.normal,
-                            fontSize: 16,
+                  color: AppColor.colorVacationSettingExplanation
-                            fontWeight: FontWeight.normal,
+                )
-                            color: AppColor.colorVacationSettingExplanation)),
+              ),
-                    const SizedBox(height: 24),
+              const SizedBox(height: 24),
-                    Row(children: [
+              Row(children: [
-                      Obx(() {
+                Obx(() {
-                        return InkWell(
+                  return InkWell(
-                            onTap: () {
+                    onTap: () {
-                              final newStatus = controller.isVacationDeactivated
+                      final newStatus = controller.isVacationDeactivated
-                                  ? VacationResponderStatus.activated
+                        ? VacationResponderStatus.activated
-                                  : VacationResponderStatus.deactivated;
+                        : VacationResponderStatus.deactivated;
-                              controller.updateVacationPresentation(newStatus: newStatus);
+                      controller.updateVacationPresentation(newStatus: newStatus);
-                            },
+                    },
-                            child: SvgPicture.asset(
+                    child: SvgPicture.asset(
-                                controller.isVacationDeactivated
+                      controller.isVacationDeactivated ? _imagePaths.icSwitchOff : _imagePaths.icSwitchOn,
-                                    ? _imagePaths.icSwitchOff
+                      fit: BoxFit.fill,
-                                    : _imagePaths.icSwitchOn,
+                      width: 24,
-                                fit: BoxFit.fill,
+                      height: 24
-                                width: 24,
+                    )
-                                height: 24)
+                  );
-                        );
+                }),
-                      }),
+                const SizedBox(width: 16),
-                      const SizedBox(width: 16),
+                Expanded(
-                      Expanded(
+                  child: Text(
-                        child: Text(AppLocalizations.of(context).vacationSettingToggleButtonAutoReply,
+                    AppLocalizations.of(context).vacationSettingToggleButtonAutoReply,
+                    style: const TextStyle(
+                      fontSize: 16,
+                      fontWeight: FontWeight.normal,
+                      color: Colors.black
+                    )
+                  ),
+                )
+              ]),
+              const SizedBox(height: 28),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
+                child: Column(children: [
+                  Obx(() => AbsorbPointer(
+                    absorbing: controller.isVacationDeactivated,
+                    child: Opacity(
+                      opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
+                      child: _responsiveUtils.isPortraitMobile(context)
+                        ? Column(children: [
+                            BorderButtonField<DateTime>(
+                              label: AppLocalizations.of(context).startDate,
+                              value: controller.vacationPresentation.value.startDate,
+                              mouseCursor: SystemMouseCursors.text,
+                              backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                              isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.startDateIsNull,
+                              hintText: AppLocalizations.of(context).startDate,
+                              tapActionCallback: (value) => controller.selectDate(context, DateType.start, value)),
+                            const SizedBox(height: 18),
+                            BorderButtonField<TimeOfDay>(
+                              label: AppLocalizations.of(context).startTime,
+                              value: controller.vacationPresentation.value.startTime,
+                              mouseCursor: SystemMouseCursors.text,
+                              backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                              isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.starTimeIsNull,
+                              hintText: AppLocalizations.of(context).noStartTime,
+                              tapActionCallback: (value) => controller.selectTime(context, DateType.start, value)),
+                          ])
+                        : Row(children: [
+                            Expanded(child: BorderButtonField<DateTime>(
+                              label: AppLocalizations.of(context).startDate,
+                              value: controller.vacationPresentation.value.startDate,
+                              mouseCursor: SystemMouseCursors.text,
+                              backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                              isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.startDateIsNull,
+                              hintText: AppLocalizations.of(context).startDate,
+                              tapActionCallback: (value) => controller.selectDate(context, DateType.start, value))),
+                            const SizedBox(width: 24),
+                            Expanded(child: BorderButtonField<TimeOfDay>(
+                              label: AppLocalizations.of(context).startTime,
+                              value: controller.vacationPresentation.value.startTime,
+                              mouseCursor: SystemMouseCursors.text,
+                              backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                              isEmpty: !controller.isVacationDeactivated && controller.vacationPresentation.value.starTimeIsNull,
+                              hintText: AppLocalizations.of(context).noStartTime,
+                              tapActionCallback: (value) => controller.selectTime(context, DateType.start, value))),
+                          ]),
+                    ),
+                  )),
+                  const SizedBox(height: 24),
+                  Obx(() => AbsorbPointer(
+                    absorbing: controller.isVacationDeactivated,
+                    child: Opacity(
+                      opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
+                      child: Row(children: [
+                        Obx(() => InkWell(
+                          onTap: () {
+                            final value = !controller.vacationPresentation.value.vacationStopEnabled;
+                            controller.updateVacationPresentation(vacationStopEnabled: value);
+                          },
+                          child: SvgPicture.asset(
+                            controller.vacationPresentation.value.vacationStopEnabled
+                              ? _imagePaths.icSwitchOn
+                              : _imagePaths.icSwitchOff,
+                            fit: BoxFit.fill,
+                            width: 24,
+                            height: 24
+                          )
+                        )),
+                        const SizedBox(width: 16),
+                        Expanded(
+                          child: Text(
+                            AppLocalizations.of(context).vacationStopsAt,
                             style: const TextStyle(
-                                fontSize: 16,
+                              fontSize: 16,
-                                fontWeight: FontWeight.normal,
+                              fontWeight: FontWeight.normal,
-                                color: Colors.black)
+                              color: Colors.black
-                        ),
-                      )
-                    ]),
-                    const SizedBox(height: 28),
-                    Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
-                      child: Column(children: [
-                        Obx(() => AbsorbPointer(
-                          absorbing: controller.isVacationDeactivated,
-                          child: Opacity(
-                            opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                            child: _responsiveUtils.isPortraitMobile(context)
-                              ? Column(children: [
-                                  BorderButtonField<DateTime>(
-                                      label: AppLocalizations.of(context).startDate,
-                                      value: controller.vacationPresentation.value.startDate,
-                                      mouseCursor: SystemMouseCursors.text,
-                                      backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                      isEmpty: !controller.isVacationDeactivated &&
-                                          controller.vacationPresentation.value.startDateIsNull,
-                                      hintText: AppLocalizations.of(context).startDate,
-                                      tapActionCallback: (value) =>
-                                          controller.selectDate(context, DateType.start, value)),
-                                  const SizedBox(height: 18),
-                                  BorderButtonField<TimeOfDay>(
-                                      label: AppLocalizations.of(context).startTime,
-                                      value: controller.vacationPresentation.value.startTime,
-                                      mouseCursor: SystemMouseCursors.text,
-                                      backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                      isEmpty: !controller.isVacationDeactivated &&
-                                          controller.vacationPresentation.value.starTimeIsNull,
-                                      hintText: AppLocalizations.of(context).noStartTime,
-                                      tapActionCallback: (value) =>
-                                          controller.selectTime(context, DateType.start, value)),
-                                ])
-                            : Row(children: [
-                                Expanded(child: BorderButtonField<DateTime>(
-                                    label: AppLocalizations.of(context).startDate,
-                                    value: controller.vacationPresentation.value.startDate,
-                                    mouseCursor: SystemMouseCursors.text,
-                                    backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                    isEmpty: !controller.isVacationDeactivated &&
-                                        controller.vacationPresentation.value.startDateIsNull,
-                                    hintText: AppLocalizations.of(context).startDate,
-                                    tapActionCallback: (value) =>
-                                        controller.selectDate(context, DateType.start, value))),
-                                const SizedBox(width: 24),
-                                Expanded(child: BorderButtonField<TimeOfDay>(
-                                    label: AppLocalizations.of(context).startTime,
-                                    value: controller.vacationPresentation.value.startTime,
-                                    mouseCursor: SystemMouseCursors.text,
-                                    backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                    isEmpty: !controller.isVacationDeactivated &&
-                                        controller.vacationPresentation.value.starTimeIsNull,
-                                    hintText: AppLocalizations.of(context).noStartTime,
-                                    tapActionCallback: (value) =>
-                                        controller.selectTime(context, DateType.start, value))),
-                              ]),
-                          ),
-                        )),
-                        const SizedBox(height: 24),
-                        Obx(() => AbsorbPointer(
-                            absorbing: controller.isVacationDeactivated,
-                            child: Opacity(
-                              opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                              child: Row(children: [
-                                Obx(() => InkWell(
-                                    onTap: () {
-                                      final value = !controller.vacationPresentation.value.vacationStopEnabled;
-                                      controller.updateVacationPresentation(vacationStopEnabled: value);
-                                    },
-                                    child: SvgPicture.asset(
-                                        controller.vacationPresentation.value.vacationStopEnabled
-                                            ? _imagePaths.icSwitchOn
-                                            : _imagePaths.icSwitchOff,
-                                        fit: BoxFit.fill,
-                                        width: 24,
-                                        height: 24)
-                                )
-                                ),
-                                const SizedBox(width: 16),
-                                Expanded(
-                                  child: Text(AppLocalizations.of(context).vacationStopsAt,
-                                      style: const TextStyle(
-                                          fontSize: 16,
-                                          fontWeight: FontWeight.normal,
-                                          color: Colors.black)
-                                  ),
-                                )
-                              ]),
                             )
-                        )),
-                        const SizedBox(height: 24),
-                        Obx(() => AbsorbPointer(
-                            absorbing: !controller.canChangeEndDate,
-                            child: Opacity(
-                              opacity: !controller.canChangeEndDate ? 0.3 : 1.0,
-                              child: _responsiveUtils.isPortraitMobile(context)
-                                ? Column(children: [
-                                    BorderButtonField<DateTime>(
-                                        label: AppLocalizations.of(context).endDate,
-                                        value: controller.vacationPresentation.value.endDate,
-                                        mouseCursor: SystemMouseCursors.text,
-                                        backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                        isEmpty: controller.canChangeEndDate &&
-                                            controller.vacationPresentation.value.endDateIsNull,
-                                        hintText: AppLocalizations.of(context).noEndDate,
-                                        tapActionCallback: (value) =>
-                                            controller.selectDate(context, DateType.end, value)),
-                                    const SizedBox(height: 18),
-                                    BorderButtonField<TimeOfDay>(
-                                        label: AppLocalizations.of(context).endTime,
-                                        value: controller.vacationPresentation.value.endTime,
-                                        mouseCursor: SystemMouseCursors.text,
-                                        backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                        isEmpty: controller.canChangeEndDate &&
-                                            controller.vacationPresentation.value.endTimeIsNull,
-                                        hintText: AppLocalizations.of(context).noEndTime,
-                                        tapActionCallback: (value) =>
-                                            controller.selectTime(context, DateType.end, value)),
-                                  ])
-                                : Row(children: [
-                                    Expanded(child: BorderButtonField<DateTime>(
-                                        label: AppLocalizations.of(context).endDate,
-                                        value: controller.vacationPresentation.value.endDate,
-                                        mouseCursor: SystemMouseCursors.text,
-                                        backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                        isEmpty: controller.canChangeEndDate &&
-                                            controller.vacationPresentation.value.endDateIsNull,
-                                        hintText: AppLocalizations.of(context).noEndDate,
-                                        tapActionCallback: (value) =>
-                                            controller.selectDate(context, DateType.end, value))),
-                                    const SizedBox(width: 24),
-                                    Expanded(child: BorderButtonField<TimeOfDay>(
-                                        label: AppLocalizations.of(context).endTime,
-                                        value: controller.vacationPresentation.value.endTime,
-                                        mouseCursor: SystemMouseCursors.text,
-                                        backgroundColor: AppColor.colorBackgroundVacationSettingField,
-                                        isEmpty: controller.canChangeEndDate &&
-                                            controller.vacationPresentation.value.endTimeIsNull,
-                                        hintText: AppLocalizations.of(context).noEndTime,
-                                        tapActionCallback: (value) =>
-                                            controller.selectTime(context, DateType.end, value))),
-                                  ]),
-                            )
-                        )),
-                        const SizedBox(height: 24),
-                        Obx(() => AbsorbPointer(
-                            absorbing: controller.isVacationDeactivated,
-                            child: _responsiveUtils.isPortraitMobile(context)
-                                ? Opacity(
-                                    opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                                    child: TextInputFieldBuilder(
-                                    label: AppLocalizations.of(context).subject,
-                                    hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
-                                    editingController: controller.subjectTextController),
-                                  )
-                                : Row(children: [
-                                    Expanded(child: Opacity(
-                                      opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                                      child: TextInputFieldBuilder(
-                                          label: AppLocalizations.of(context).subject,
-                                          hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
-                                          editingController: controller.subjectTextController),
-                                    )),
-                                    const SizedBox(width: 24),
-                                    const Expanded(child: SizedBox.shrink())
-                                  ])
-                        )),
-                        const SizedBox(height: 24),
-                        Obx(() => AbsorbPointer(
-                          absorbing: controller.isVacationDeactivated,
-                          child: Opacity(
-                            opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
-                            child: _buildVacationMessage(context),
                           ),
-                        )),
+                        )
-                        const SizedBox(height: 24),
-                        _buildListButtonAction(context)
                       ]),
                     )
-                  ]
+                  )),
-              ),
+                  const SizedBox(height: 24),
-            ),
+                  Obx(() => AbsorbPointer(
+                    absorbing: !controller.canChangeEndDate,
+                    child: Opacity(
+                      opacity: !controller.canChangeEndDate ? 0.3 : 1.0,
+                      child: _responsiveUtils.isPortraitMobile(context)
+                        ? Column(children: [
+                            BorderButtonField<DateTime>(
+                              label: AppLocalizations.of(context).endDate,
+                              value: controller.vacationPresentation.value.endDate,
+                              mouseCursor: SystemMouseCursors.text,
+                              backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                              isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endDateIsNull,
+                              hintText: AppLocalizations.of(context).noEndDate,
+                              tapActionCallback: (value) => controller.selectDate(context, DateType.end, value)),
+                            const SizedBox(height: 18),
+                            BorderButtonField<TimeOfDay>(
+                              label: AppLocalizations.of(context).endTime,
+                              value: controller.vacationPresentation.value.endTime,
+                              mouseCursor: SystemMouseCursors.text,
+                              backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                              isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endTimeIsNull,
+                              hintText: AppLocalizations.of(context).noEndTime,
+                              tapActionCallback: (value) => controller.selectTime(context, DateType.end, value)),
+                          ])
+                        : Row(children: [
+                            Expanded(child: BorderButtonField<DateTime>(
+                              label: AppLocalizations.of(context).endDate,
+                              value: controller.vacationPresentation.value.endDate,
+                              mouseCursor: SystemMouseCursors.text,
+                              backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                              isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endDateIsNull,
+                              hintText: AppLocalizations.of(context).noEndDate,
+                              tapActionCallback: (value) => controller.selectDate(context, DateType.end, value))),
+                            const SizedBox(width: 24),
+                            Expanded(child: BorderButtonField<TimeOfDay>(
+                              label: AppLocalizations.of(context).endTime,
+                              value: controller.vacationPresentation.value.endTime,
+                              mouseCursor: SystemMouseCursors.text,
+                              backgroundColor: AppColor.colorBackgroundVacationSettingField,
+                              isEmpty: controller.canChangeEndDate && controller.vacationPresentation.value.endTimeIsNull,
+                              hintText: AppLocalizations.of(context).noEndTime,
+                              tapActionCallback: (value) => controller.selectTime(context, DateType.end, value))),
+                          ]),
+                    )
+                  )),
+                  const SizedBox(height: 24),
+                  Obx(() => AbsorbPointer(
+                    absorbing: controller.isVacationDeactivated,
+                    child: _responsiveUtils.isPortraitMobile(context)
+                      ? Opacity(
+                          opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
+                          child: TextInputFieldBuilder(
+                            label: AppLocalizations.of(context).subject,
+                            hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
+                            editingController: controller.subjectTextController
+                          ),
+                        )
+                      : Row(children: [
+                          Expanded(child: Opacity(
+                            opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
+                            child: TextInputFieldBuilder(
+                              label: AppLocalizations.of(context).subject,
+                              hint: AppLocalizations.of(context).hintSubjectInputVacationSetting,
+                              editingController: controller.subjectTextController
+                            ),
+                          )),
+                          const SizedBox(width: 24),
+                          const Expanded(child: SizedBox.shrink())
+                        ])
+                  )),
+                  const SizedBox(height: 24),
+                  Obx(() => AbsorbPointer(
+                    absorbing: controller.isVacationDeactivated,
+                    child: Opacity(
+                      opacity: controller.isVacationDeactivated ? 0.3 : 1.0,
+                      child: _buildVacationMessage(context),
+                    ),
+                  )),
+                  const SizedBox(height: 24),
+                  _buildListButtonAction(context)
+                ]),
+              )
+            ]
           ),
         ),
       ),