From cb144ae47273deeb7058d4b1380e480ebccdaf81 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Mon, 15 Apr 2024 09:21:31 +0200
Subject: [PATCH] Fix inability to tap outside modal on mobile

This commit addresses touch target size issues on mobile devices by
adjusting modal margins. The larger margin allows for easier interaction
for modal dialogs by tapping outside the modal area on smaller screens.

Key changes:

- Introduce 30px margin on larger screens and 20px on smaller devices
  around modals, adhering to accessibility guidelines.
- Remove `max-height: 90vh;` in favor of consistent vertical margins,
  centralizing the spacing control via the `margin` property.
- Remove `max-height: 90v;` used to display scroll-bars as the vertical
  margin is now handled by `margin` property in single place.
---
 .../components/Shared/Modal/ModalContainer.vue      |  3 ++-
 .../components/Shared/Modal/ModalContent.vue        | 13 ++++++++++++-
 tests/e2e/no-unintended-layout-shifts.cy.ts         |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/presentation/components/Shared/Modal/ModalContainer.vue b/src/presentation/components/Shared/Modal/ModalContainer.vue
index eb6f434e..9ff00590 100644
--- a/src/presentation/components/Shared/Modal/ModalContainer.vue
+++ b/src/presentation/components/Shared/Modal/ModalContainer.vue
@@ -9,7 +9,6 @@
       @click="onBackgroundOverlayClick"
     />
     <ModalContent
-      class="modal-content"
       :show="isOpen"
       @transitioned-out="onContentTransitionedOut"
     >
@@ -138,6 +137,8 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
 .modal-container {
   position: fixed;
   box-sizing: border-box;
diff --git a/src/presentation/components/Shared/Modal/ModalContent.vue b/src/presentation/components/Shared/Modal/ModalContent.vue
index 60ef2c61..67c8f14c 100644
--- a/src/presentation/components/Shared/Modal/ModalContent.vue
+++ b/src/presentation/components/Shared/Modal/ModalContent.vue
@@ -59,7 +59,7 @@ $modal-content-offset-upward: $spacing-absolute-x-large;
 
 @mixin scrollable() {
   overflow-y: auto;
-  max-height: 90vh;
+  max-height: 100%;
 }
 
 .modal-content-wrapper {
@@ -74,6 +74,17 @@ $modal-content-offset-upward: $spacing-absolute-x-large;
   right: 0;
   bottom: 0;
   left: 0;
+
+  // Margin around modal content ensures visual comfort and consistency across devices.
+  // It provides:
+  // - A visually comfortable space preventing a claustrophobic feeling, especially on smaller screens.
+  // - Consistent appearance on various screen sizes by using absolute spacing.
+  // - Focus on the modal by dimming the background and emphasizing the task.
+  // - Sufficient space on small devices for users to tap outside and close the modal.
+  margin: $spacing-absolute-xx-large;
+  @media screen and (max-width: $media-screen-small-width) {
+    margin: $spacing-absolute-x-large; // Google and Apple recommend at least 44x44px for touch targets
+  }
 }
 
 .modal-content-content {
diff --git a/tests/e2e/no-unintended-layout-shifts.cy.ts b/tests/e2e/no-unintended-layout-shifts.cy.ts
index 50c73697..ab7c544b 100644
--- a/tests/e2e/no-unintended-layout-shifts.cy.ts
+++ b/tests/e2e/no-unintended-layout-shifts.cy.ts
@@ -19,7 +19,7 @@ describe('Layout stability', () => {
             .contains('button', 'Privacy')
             .click();
           cy
-            .get('.modal-content')
+            .get('.modal-content-content')
             .should('be.visible');
         });
       });