mobile

src/app/pages/fastcheck-page/fastcheck-page.scss

@@ -14,6 +14,7 @@
   justify-content: center;
   padding: 0 16px;
   height: 48px;
+  min-width: 64px;
   border-radius: 12px;
   font-size: 14px;
   font-weight: 700;
@@ -23,6 +24,7 @@
   font-family: inherit;
   white-space: nowrap;
   transition: opacity .15s, transform .1s, background .15s;
+  -webkit-appearance: none;
 
   &--ghost {
     background: #f1f5f9;
@@ -69,6 +71,8 @@
   justify-content: center;
   padding: 16px;
   animation: fade-in .15s ease-out;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 
   @media (max-width: 480px) {
     align-items: flex-end;
@@ -85,29 +89,32 @@
     text-align: center;
     box-shadow: 0 24px 60px rgba(0,0,0,.25);
     animation: pop-in .2s ease-out;
+    margin: auto;
 
     @media (max-width: 480px) {
       max-width: 100%;
       border-radius: 24px 24px 0 0;
-      padding: 24px 20px 32px;
+      padding: 24px 20px calc(28px + env(safe-area-inset-bottom));
+      margin: auto 0 0;
     }
   }
 
   &__close {
     position: absolute;
-    top: 10px;
-    right: 12px;
-    width: 36px;
-    height: 36px;
+    top: 8px;
+    right: 8px;
+    width: 44px;
+    height: 44px;
     border-radius: 50%;
     border: none;
     background: #f1f5f9;
     color: #475569;
-    font-size: 22px;
+    font-size: 24px;
     line-height: 1;
     cursor: pointer;
     font-family: inherit;
     transition: background .15s;
+    -webkit-appearance: none;
 
     &:hover { background: #e2e8f0; }
   }
@@ -155,10 +162,11 @@
   padding: 12px;
   width: 264px;
   height: 264px;
+  max-width: 100%;
   margin: 0 auto;
 
-  @media (max-width: 360px) {
-    width: 100%;
+  @media (max-width: 380px) {
+    width: min(264px, 70vw);
     height: auto;
     aspect-ratio: 1;
   }
@@ -179,18 +187,21 @@
 .tg-link {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
   margin-top: 16px;
-  padding: 12px 20px;
+  padding: 14px 22px;
+  min-height: 48px;
   border-radius: 12px;
   background: #229ED9;
   color: #fff;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 700;
   text-decoration: none;
   transition: opacity .15s;
 
   &:hover { opacity: .9; }
+  &:active { transform: scale(.97); }
 }
 
 @keyframes fade-in {