From 36101876997f65607c20ac86cafd7f1f24b57283 Mon Sep 17 00:00:00 2001 From: Myron Blair Date: Sat, 6 Jun 2026 11:28:39 +0000 Subject: [PATCH] Fix token package pill scroller not swiping - pay-form: overflow:hidden -> overflow:visible so it no longer blocks horizontal touch events on the pkg-scroll child - pay-form-header: gets its own top border-radius to maintain visual corner clipping without relying on parent overflow:hidden - pkg-scroll: added touch-action:pan-x so browser hands horizontal swipe gestures to this element rather than the page scroll Co-Authored-By: Claude Sonnet 4.6 --- index.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.php b/index.php index 811814c..d0d855d 100644 --- a/index.php +++ b/index.php @@ -225,15 +225,15 @@ body::before{content:'';position:fixed;inset:0;background-image:linear-gradient( .play-btn{font-size:12px;color:var(--text2);font-weight:600;letter-spacing:.5px} /* ─── PAYMENT FORM (milkyswipe style) ─── */ -.pay-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:14px} -.pay-form-header{background:linear-gradient(135deg,#0d1a2e,#0a1220);padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px} +.pay-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:visible;margin-bottom:14px} +.pay-form-header{background:linear-gradient(135deg,#0d1a2e,#0a1220);padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;border-radius:var(--radius) var(--radius) 0 0} .pay-form-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#d4a017);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .pay-form-title{font-family:'Exo 2',sans-serif;font-weight:700;font-size:17px;color:var(--text)} .pay-form-sub{font-size:14px;color:var(--text2);margin-top:1px} .pay-form-body{padding:18px} /* Package pills */ -.pkg-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none} +.pkg-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x} .pkg-scroll::-webkit-scrollbar{display:none} .pkg-pill{flex-shrink:0;background:var(--bg3);border:1.5px solid var(--border);border-radius:30px;padding:8px 16px;cursor:pointer;transition:all .2s;text-align:center;min-width:72px} .pkg-pill.popular{border-color:var(--gold)}