From 65f864402b97b2c473e38269cf041ef937b86ce6 Mon Sep 17 00:00:00 2001
From: iMac7 <macharian77@gmail.com>
Date: Thu, 28 Mar 2024 10:11:42 +0000
Subject: [PATCH 1/3] modal-width to tailwind

---
 components/collection/drop/AddFundsModal.vue     |  8 +-------
 .../collection/drop/modal/DropConfirmModal.vue   |  2 +-
 .../drop/modal/newsletter/EmailSignup.vue        |  4 ----
 .../common/autoTeleport/AutoTeleportModal.vue    | 12 +-----------
 .../autoTeleport/AutoTeleportWelcomeModal.vue    | 10 +---------
 .../ConfirmPurchaseModal.vue                     |  2 +-
 .../common/itemTransfer/ItemTransferModal.vue    | 16 +++++-----------
 components/create/Confirm/MintConfirmModal.vue   |  2 +-
 components/shared/modals/ModalBody.vue           | 13 +++----------
 libs/ui/src/components/NeoModal/NeoModal.scss    |  5 -----
 10 files changed, 14 insertions(+), 60 deletions(-)

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
index 197e3539e6..ace2e042cc 100644
--- a/components/collection/drop/AddFundsModal.vue
+++ b/components/collection/drop/AddFundsModal.vue
@@ -2,7 +2,7 @@
   <NeoModal
     :value="modelValue"
     :can-cancel="['outside', 'escape']"
-    content-class="add-funds-modal"
+    content-class="add-funds-modal !w-[unset]"
     @close="onClose">
     <ModalBody
       :title="$t('mint.unlockable.addFundsModal.title')"
@@ -124,10 +124,4 @@ const handleModalClose = (completed: boolean) => {
     height: initial;
   }
 }
-
-@include mobile() {
-  .modal-width {
-    width: unset;
-  }
-}
 </style>
diff --git a/components/collection/drop/modal/DropConfirmModal.vue b/components/collection/drop/modal/DropConfirmModal.vue
index 03891e116f..108098d3c5 100644
--- a/components/collection/drop/modal/DropConfirmModal.vue
+++ b/components/collection/drop/modal/DropConfirmModal.vue
@@ -3,7 +3,7 @@
     :value="isModalActive"
     :can-cancel="isClaimingDropStep ? false : ['outside', 'escape']"
     class="top"
-    content-class="modal-width"
+    content-class="!w-[unset]"
     @close="onClose">
     <ModalBody :title="title" @close="onClose">
       <EmailSignup
diff --git a/components/collection/drop/modal/newsletter/EmailSignup.vue b/components/collection/drop/modal/newsletter/EmailSignup.vue
index c06e6a0c05..ff298b1e44 100644
--- a/components/collection/drop/modal/newsletter/EmailSignup.vue
+++ b/components/collection/drop/modal/newsletter/EmailSignup.vue
@@ -105,10 +105,6 @@ const confirm = () => {
 @import '@/assets/styles/abstracts/variables';
 @import '@/assets/styles/abstracts/animations';
 
-.modal-width {
-  width: 25rem;
-}
-
 .shine:not(:hover):not(:disabled) {
   @include shineEffect(var(--k-accent-light-3), lightgrey, false);
 
diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
index d22555a96f..a85d8037b8 100644
--- a/components/common/autoTeleport/AutoTeleportModal.vue
+++ b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -4,7 +4,7 @@
     :can-cancel="['outside', 'escape']"
     class="z-[1000]"
     @close="onClose">
-    <div class="modal-width">
+    <div class="sm:w-[25rem]">
       <header class="py-5 pl-6 pr-5 flex justify-between items-center border-b">
         <span class="modal-card-title text-base font-bold">
           {{ $t('autoTeleport.signTransactions') }}
@@ -268,10 +268,6 @@ watch(autoteleportFinalized, () => {
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
-.modal-width {
-  width: 25rem;
-}
-
 .btn-height {
   height: 3.5rem;
 }
@@ -280,10 +276,4 @@ watch(autoteleportFinalized, () => {
   max-height: 80vh;
   overflow-y: auto;
 }
-
-@include mobile() {
-  .modal-width {
-    width: unset;
-  }
-}
 </style>
diff --git a/components/common/autoTeleport/AutoTeleportWelcomeModal.vue b/components/common/autoTeleport/AutoTeleportWelcomeModal.vue
index 0de7dbb510..0622a24177 100644
--- a/components/common/autoTeleport/AutoTeleportWelcomeModal.vue
+++ b/components/common/autoTeleport/AutoTeleportWelcomeModal.vue
@@ -4,7 +4,7 @@
     :can-cancel="['outside', 'escape']"
     class="z-[1000]"
     @close="onClose">
-    <div class="modal-width">
+    <div class="sm:w-[40rem]">
       <header class="py-5 pl-6 pr-5 flex justify-between items-center">
         <span class="capitalize text-[1.6rem] font-bold">
           {{ $t('autoTeleport.welcomeToAutoTeleport') }}
@@ -91,14 +91,6 @@ const onClose = () => {
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
-.modal-width {
-  width: 40rem;
-
-  @include mobile {
-    width: unset;
-  }
-}
-
 .btn-height {
   height: 3.5rem;
 }
diff --git a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
index f75eb47081..0197daf271 100644
--- a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
+++ b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
@@ -3,7 +3,7 @@
     :value="isModalActive"
     :can-cancel="['outside', 'escape']"
     class="z-[1000]"
-    content-class="modal-width"
+    content-class="!w-[unset]"
     @close="onClose">
     <ModalBody
       :title="$t('confirmPurchase.action')"
diff --git a/components/common/itemTransfer/ItemTransferModal.vue b/components/common/itemTransfer/ItemTransferModal.vue
index ba7959cae4..2741673739 100644
--- a/components/common/itemTransfer/ItemTransferModal.vue
+++ b/components/common/itemTransfer/ItemTransferModal.vue
@@ -6,8 +6,11 @@
       :status="status"
       @try-again="transfer" />
 
-    <NeoModal :value="isModalActive" @close="onClose">
-      <div class="modal-width">
+    <NeoModal
+      :value="isModalActive"
+      content-class="!w-[unset]"
+      @close="onClose">
+      <div class="lg:w-[25rem]">
         <header
           class="border-b border-grey flex items-center justify-between px-6">
           <p class="py-5 text-base font-bold">
@@ -218,15 +221,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
 
-.modal-width {
-  width: 25rem;
-}
-
-@include touch() {
-  .modal-width {
-    width: unset;
-  }
-}
 .btn-height {
   height: 3.5rem;
 }
diff --git a/components/create/Confirm/MintConfirmModal.vue b/components/create/Confirm/MintConfirmModal.vue
index 80f59de5b9..c079d22fcc 100644
--- a/components/create/Confirm/MintConfirmModal.vue
+++ b/components/create/Confirm/MintConfirmModal.vue
@@ -4,7 +4,7 @@
     :can-cancel="['outside', 'escape']"
     class="z-[1000]"
     max-height="calc(100vh - 180px)"
-    content-class="modal-width"
+    content-class="!w-[unset]"
     @close="onClose">
     <ModalBody
       :title="$t('mint.nft.modal.action')"
diff --git a/components/shared/modals/ModalBody.vue b/components/shared/modals/ModalBody.vue
index 464789534c..a80436219a 100644
--- a/components/shared/modals/ModalBody.vue
+++ b/components/shared/modals/ModalBody.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="modal-width">
+  <div
+    class="w-[unset]"
+    :class="[`sm:w-[${modalWidth}]`, `max-w-[${modalMaxHeight}]`]">
     <header class="px-6 py-4 flex justify-between border-b items-center">
       <NeoSkeleton
         v-if="loading"
@@ -124,15 +126,6 @@ $x-padding: 2rem;
 $t-padding: 1.5rem;
 $b-padding: 1.25rem;
 
-.modal-width {
-  width: v-bind(modalWidth);
-  max-width: v-bind(modalMaxHeight);
-
-  @include mobile {
-    width: unset;
-  }
-}
-
 .limit-height {
   &__scrollabe {
     max-height: v-bind(modalMaxHeight);
diff --git a/libs/ui/src/components/NeoModal/NeoModal.scss b/libs/ui/src/components/NeoModal/NeoModal.scss
index 9cc351b45e..5509cf9cd6 100644
--- a/libs/ui/src/components/NeoModal/NeoModal.scss
+++ b/libs/ui/src/components/NeoModal/NeoModal.scss
@@ -23,11 +23,6 @@ $modal-overlay-background-color: rgb(0 0 0 / 0.17);
     &.enable-mobile {
       @media screen and (max-width: 425px) {
         @apply absolute -bottom-[1px] -right-[1px] -left-[1px] flex flex-col;
-
-        .modal-width,
-        &.modal-width {
-          @apply w-[unset];
-        }
       }
     }
   }

From ecb67d878e1a119e510c38fd7973e86736e06da8 Mon Sep 17 00:00:00 2001
From: iMac <macharian77@gmail.com>
Date: Thu, 28 Mar 2024 13:18:25 +0300
Subject: [PATCH 2/3] Update ItemTransferModal.vue

---
 components/common/itemTransfer/ItemTransferModal.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/common/itemTransfer/ItemTransferModal.vue b/components/common/itemTransfer/ItemTransferModal.vue
index 2741673739..018b06a297 100644
--- a/components/common/itemTransfer/ItemTransferModal.vue
+++ b/components/common/itemTransfer/ItemTransferModal.vue
@@ -6,10 +6,7 @@
       :status="status"
       @try-again="transfer" />
 
-    <NeoModal
-      :value="isModalActive"
-      content-class="!w-[unset]"
-      @close="onClose">
+    <NeoModal :value="isModalActive" @close="onClose">
       <div class="lg:w-[25rem]">
         <header
           class="border-b border-grey flex items-center justify-between px-6">

From b424bf6a4491b1840be2a72dcac3339cf4113fc2 Mon Sep 17 00:00:00 2001
From: iMac7 <macharian77@gmail.com>
Date: Thu, 28 Mar 2024 11:42:59 +0000
Subject: [PATCH 3/3] fix failing test

---
 assets/styles/components/_connect-wallet.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/styles/components/_connect-wallet.scss b/assets/styles/components/_connect-wallet.scss
index eb7166ed5b..9999748ce5 100644
--- a/assets/styles/components/_connect-wallet.scss
+++ b/assets/styles/components/_connect-wallet.scss
@@ -30,6 +30,7 @@
     width: 100%;
 
     @include mobile {
+      inset: 0;
       border-left: none !important;
       max-width: 100vw;
       height: calc(100% - $navbar-mobile-min-height) ;