fix: update form

src/shared/ui/modal/modal.module.scss

@@ -0,0 +1,144 @@
+.ModalBackdrop {
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 0;
+
+  @include iftablet {
+    position: fixed;
+    height: 100vh;
+    padding: 0 rem(20px);
+  }
+
+  @include iflaptop {
+    padding: 0 rem(48px);
+  }
+  animation: fadeIn ease 0.3s;
+
+  &_open {
+    animation: fadeOut ease 0.3s;
+  }
+
+  &_isIOS {
+    height: 150vh !important;
+
+    @include iftablet {
+      height: unset;
+    }
+  }
+}
+
+.ModalContent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: white;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  //max-height: 90%;
+  overflow: auto;
+  width: 100%;
+  //border-radius: 8px;
+  animation: fadeIn ease 0.3s;
+
+  @include iftablet {
+    position: relative;
+    top: unset;
+    bottom: unset;
+    left: unset;
+    right: unset;
+    height: 100%;
+    border-radius: rem(8px);
+  }
+
+  &_open {
+    animation: fadeOut ease 0.3s;
+  }
+
+  &_isIOS {
+    height: 100vh !important;
+
+    @include iftablet {
+      height: 100%;
+    }
+  }
+
+  &__Inner {
+    position: relative;
+    overflow: hidden;
+    height: fit-content;
+  }
+}
+
+.Modal {
+  position: relative;
+
+  &__Close {
+    position: absolute;
+    top: rem(5px);
+    right: rem(5px);
+    width: rem(36px);
+    height: rem(36px);
+    padding: rem(10px);
+    cursor: pointer;
+    margin-bottom: rem(4px);
+    transform: rotate(0deg);
+    transition: transform 0.3s;
+
+    @include iftablet {
+      top: rem(35px);
+      right: rem(35px);
+      margin-bottom: 0;
+    }
+
+    @include iflaptop {
+      top: rem(50px);
+      right: rem(50px);
+    }
+
+    &:hover,
+    &:active {
+      transform: rotate(45deg);
+      transition: transform 0.3s;
+    }
+
+    svg {
+      width: rem(17px);
+      height: rem(17px);
+    }
+
+    //svg {
+    //  transform: rotate(0deg);
+    //  transition: transform 0.3s;
+    //  &:hover,
+    //  &:active {
+    //    transform: rotate(45deg);
+    //    transition: transform 0.3s;
+    //  }
+    //}
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}