mobile

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

@@ -6,10 +6,10 @@
 
 .back {
   position: absolute;
-  top: 18px;
-  left: 18px;
-  width: 38px;
-  height: 38px;
+  top: 14px;
+  left: 14px;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
@@ -44,6 +44,10 @@
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
+
+  @media (max-width: 360px) {
+    gap: 6px;
+  }
 }
 
 .method {
@@ -57,6 +61,13 @@
   background: #fff;
   cursor: pointer;
   transition: border-color .15s, background .15s, transform .1s, box-shadow .15s;
+  -webkit-appearance: none;
+  font-family: inherit;
+
+  @media (max-width: 360px) {
+    height: 52px;
+    padding: 6px;
+  }
 
   &__logo {
     max-width: 100%;
@@ -102,16 +113,17 @@
   align-items: center;
   gap: 6px;
   padding: 0 14px;
-  height: 38px;
+  height: 44px;
   border-radius: 999px;
   border: 2px solid #e2e8f0;
   background: #f8fafc;
   color: #475569;
   font-family: inherit;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   transition: border-color .15s, background .15s, color .15s;
+  -webkit-appearance: none;
 
   &__flag { font-size: 16px; line-height: 1; }
   &__sign {

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 {

src/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Оплата через СБП</title>
   <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="theme-color" content="#2563eb">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">

src/shared.scss

@@ -7,10 +7,12 @@
   align-items: center;
   justify-content: center;
   padding: 16px;
+  padding-top: max(16px, env(safe-area-inset-top));
+  padding-bottom: max(16px, env(safe-area-inset-bottom));
   background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #0ea5e9 100%);
 
   @media (max-width: 480px) {
-    align-items: flex-end;
+    align-items: stretch;
     padding: 0;
   }
 }
@@ -24,15 +26,22 @@
   overflow: hidden;
 
   @media (max-width: 480px) {
-    border-radius: 24px 24px 0 0;
+    border-radius: 0;
     max-width: 100%;
-    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+    min-height: 100dvh;
+    display: flex;
+    flex-direction: column;
   }
 
   &__header {
     background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
     padding: 28px 24px 24px;
     text-align: center;
+
+    @media (max-width: 480px) {
+      padding-top: calc(28px + env(safe-area-inset-top));
+    }
   }
 
   &__title {
@@ -54,6 +63,11 @@
 
     @media (max-width: 480px) {
       padding: 22px 18px 16px;
+      flex: 1;
+    }
+
+    @media (max-width: 360px) {
+      padding: 18px 14px 12px;
     }
   }
 
@@ -63,7 +77,7 @@
     justify-content: center;
 
     @media (max-width: 480px) {
-      padding: 0 18px 28px;
+      padding: 0 18px calc(22px + env(safe-area-inset-bottom));
     }
   }
 }
@@ -153,6 +167,7 @@
   justify-content: center;
   gap: 10px;
   padding: 16px 24px;
+  min-height: 52px;
   background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
   color: #fff;
   border: none;
@@ -164,6 +179,7 @@
   transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
   box-shadow: 0 6px 20px rgba(37, 99, 235, 0.38);
   font-family: inherit;
+  -webkit-appearance: none;
 
   &:hover { opacity: 0.92; box-shadow: 0 8px 28px rgba(37, 99, 235, 0.45); }
   &:active { transform: scale(0.98); opacity: 0.88; }

src/styles.scss

@@ -2,15 +2,36 @@
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  -webkit-tap-highlight-color: transparent;
 }
 
 html, body {
   height: 100%;
 }
 
+html {
+  // Prevent iOS rubber-band overscroll showing white background
+  background: #1e40af;
+  // Prevent iOS auto-zoom on form fields with small text
+  -webkit-text-size-adjust: 100%;
+}
+
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background: #1e40af;
+  // Avoid iOS overscroll bounce leaking other pages on PWA
+  overscroll-behavior-y: none;
+}
+
+// Disable long-press image saving / callout on payment-method logos
+img {
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+// Inputs: ensure ≥16px font-size to prevent iOS Safari from auto-zooming on focus
+input, textarea, select, button {
+  font-size: 16px;
 }