@loafmarkets/ui 0.1.379 → 0.1.380

package/dist/index.mjs

@@ -6649,6 +6649,20 @@ var LoginPopup = ({
   const [signInMode, setSignInMode] = useState(false);
   const [loading, setLoading] = useState(false);
   const [isSignUp, setIsSignUp] = useState(false);
+  const [gateViewportH, setGateViewportH] = useState(void 0);
+  useEffect(() => {
+    if (!gate || typeof window === "undefined") return;
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const sync = () => setGateViewportH(vv.height);
+    sync();
+    vv.addEventListener("resize", sync);
+    vv.addEventListener("scroll", sync);
+    return () => {
+      vv.removeEventListener("resize", sync);
+      vv.removeEventListener("scroll", sync);
+    };
+  }, [gate]);
   const [fundingAmount] = useState("");
   const [kycLoading, setKycLoading] = useState(false);
   const [showKycWidget, setShowKycWidget] = useState(false);
@@ -7170,7 +7184,7 @@ var LoginPopup = ({
   }
   if (view === "otp") {
     if (gate) {
-      return /* @__PURE__ */ jsxs(GateShell, { children: [
+      return /* @__PURE__ */ jsxs(GateShell, { $h: gateViewportH, children: [
         /* @__PURE__ */ jsx(GateTint, { $reveal: otpStatus === "valid" ? 3 : 2 }),
         /* @__PURE__ */ jsxs(GateForm, { children: [
           /* @__PURE__ */ jsxs(GateBrand, { children: [
@@ -7551,7 +7565,7 @@ var LoginPopup = ({
     if (gate) {
       const codeAccepted = codeStatus === "valid";
       const showSignIn = signInMode || signInRevealed;
-      return /* @__PURE__ */ jsxs(GateShell, { children: [
+      return /* @__PURE__ */ jsxs(GateShell, { $h: gateViewportH, children: [
         /* @__PURE__ */ jsx(GateTint, { $reveal: showSignIn ? 1 : 0 }),
         /* @__PURE__ */ jsxs(GateForm, { children: [
           /* @__PURE__ */ jsxs(GateBrand, { children: [
@@ -8178,12 +8192,21 @@ var GateForm = styled10.div`
 `;
 var GateShell = styled10.div`
   position: fixed;
-  inset: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  /* Visual-viewport height when available (see gateViewportH) so the gate ends
+     at the keyboard top with nothing hidden below it to scroll to; 100% else. */
+  height: ${(props) => props.$h ? `${props.$h}px` : "100%"};
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10000;
   background-color: rgba(10, 10, 12, 0.66);
+  /* If content can't fit the visible area (very short screen + keyboard), scroll
+     WITHIN the gate only — never chain to the platform underneath. */
+  overflow-y: auto;
+  overscroll-behavior: contain;
 `;
 var GateTint = styled10.div`
   position: absolute;