@loafmarkets/ui 0.1.39 → 0.1.41

package/dist/index.d.mts

@@ -901,7 +901,7 @@ type PropertyBuyProps = {
     walletUsdcBalance?: number | null;
     walletPropertyTokenBalance?: number | null;
     onPurchase?: (tokenAmount: number) => Promise<void>;
-    purchaseStatus?: 'idle' | 'checking-allowance' | 'approving' | 'purchasing' | 'success' | 'error';
+    purchaseStatus?: 'idle' | 'checking-allowance' | 'approving' | 'purchasing' | 'pending-allocation' | 'success' | 'error';
     purchaseError?: string | null;
     onDeposit?: () => void;
     initialUserSubscriptions?: PropertySubscription[];

package/dist/index.d.ts

@@ -901,7 +901,7 @@ type PropertyBuyProps = {
     walletUsdcBalance?: number | null;
     walletPropertyTokenBalance?: number | null;
     onPurchase?: (tokenAmount: number) => Promise<void>;
-    purchaseStatus?: 'idle' | 'checking-allowance' | 'approving' | 'purchasing' | 'success' | 'error';
+    purchaseStatus?: 'idle' | 'checking-allowance' | 'approving' | 'purchasing' | 'pending-allocation' | 'success' | 'error';
     purchaseError?: string | null;
     onDeposit?: () => void;
     initialUserSubscriptions?: PropertySubscription[];

package/dist/index.js

@@ -2009,7 +2009,7 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "divide-y divide-white/5 overflow-y-auto",
+            className: "flex flex-col justify-end divide-y divide-white/5 overflow-y-auto",
             style: { height: `${sectionHeight}px`, scrollbarGutter: "stable" },
             children: asks.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
@@ -4875,6 +4875,7 @@ var Header = ({
   const portfolioActive = resolvedActiveTab === "portfolio";
   const learnActive = resolvedActiveTab === "learn";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SafeAreaCover, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
     /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
@@ -5124,6 +5125,17 @@ var Header = ({
   ] });
 };
 Header.displayName = "Header";
+var SafeAreaCover = styled24__default.default.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: env(safe-area-inset-top, 0px);
+  min-height: env(safe-area-inset-top, 0px);
+  background-color: #0d1117;
+  z-index: 1001;
+  pointer-events: none;
+`;
 var Overlay = styled24__default.default.div`
   display: ${(props) => props.$isOpen ? "block" : "none"};
   position: fixed;
@@ -5170,20 +5182,24 @@ var HeaderContainer = styled24__default.default.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  /* Split padding so browsers that don't support env() inside shorthand
+     still get the horizontal padding — only the top falls back to 0 */
   padding: 0 2rem;
+  padding-top: env(safe-area-inset-top, 0px);
   background-color: #0d1117;
   border-bottom: 1px solid #232a32;
   position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
   z-index: 1000;
   width: 100%;
-  height: 56px;
+  /* Fallback min-height for browsers that can't evaluate calc+env */
+  min-height: 56px;
+  min-height: calc(56px + env(safe-area-inset-top, 0px));
   box-sizing: border-box;
 
   @media (max-width: 768px) {
     padding: 0 1rem;
+    padding-top: env(safe-area-inset-top, 0px);
   }
 `;
 var Logo = styled24__default.default.div`
@@ -7295,7 +7311,7 @@ function GalleryMapSection({
   const [carouselIndex, setCarouselIndex] = React5.useState(0);
   const [showVideo, setShowVideo] = React5.useState(false);
   const [autoPlaying, setAutoPlaying] = React5.useState(autoPlay);
-  const resolvedMapUrl = mapUrl ?? (tokenName ? `https://demo.loafmarkets.com/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
+  const resolvedMapUrl = mapUrl ?? (tokenName ? `/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
   React5.useEffect(() => {
     if (!autoPlaying || images.length <= 1) return;
     const interval = setInterval(() => {
@@ -8970,6 +8986,16 @@ var IPOAssetSelector = styled24__default.default.div`
   z-index: 10;
   transition: all 0.3s ease;
   &:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.15); }
+
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.6rem 0.75rem;
+  }
 `;
 var AssetSelectorDropdown = styled24__default.default.div`
   display: flex;
@@ -8989,6 +9015,15 @@ var AssetName = styled24__default.default.div`
   letter-spacing: -0.02em;
   svg { margin-left: 0.75rem; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); opacity: 0.7; }
   &:hover svg { opacity: 1; }
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.9rem;
+    svg { margin-left: 0.4rem; width: 16px; height: 16px; }
+  }
 `;
 var SelectorMetrics = styled24__default.default.div`
   display: flex;
@@ -9000,6 +9035,20 @@ var SelectorMetrics = styled24__default.default.div`
   background: rgba(255,255,255,0.03);
   border-radius: 8px;
   border: 1px solid rgba(255,255,255,0.05);
+
+  @media (max-width: 768px) {
+    gap: 0.6rem;
+    padding: 0.4rem 0.75rem;
+    margin-right: 0;
+  }
+
+  @media (max-width: 480px) {
+    width: 100%;
+    justify-content: center;
+    margin-left: 0;
+    padding: 0.35rem 0.5rem;
+    gap: 0.5rem;
+  }
 `;
 var MetricLabel2 = styled24__default.default.span`
   font-size: 0.75rem;
@@ -9008,11 +9057,24 @@ var MetricLabel2 = styled24__default.default.span`
   letter-spacing: 0.05em;
   font-weight: 500;
   margin-right: 0.5rem;
+
+  @media (max-width: 768px) {
+    font-size: 0.65rem;
+    margin-right: 0.35rem;
+  }
 `;
 var MetricValue = styled24__default.default.span`
   font-size: 1.25rem;
   font-weight: 700;
   color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
+
+  @media (max-width: 768px) {
+    font-size: 1.05rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.95rem;
+  }
 `;
 var MetricChange = styled24__default.default.span`
   font-size: 0.85rem;
@@ -9021,6 +9083,10 @@ var MetricChange = styled24__default.default.span`
   display: flex;
   align-items: center;
   gap: 0.25rem;
+
+  @media (max-width: 768px) {
+    font-size: 0.75rem;
+  }
 `;
 var Separator = styled24__default.default.span`
   font-size: 1rem;
@@ -9039,6 +9105,11 @@ var IPODropdown = styled24__default.default.div`
   max-height: 360px;
   overflow-y: auto;
   border: 1px solid rgba(255,255,255,0.08);
+
+  @media (max-width: 480px) {
+    max-height: 280px;
+    border-radius: 12px;
+  }
   animation: slideDown 0.3s cubic-bezier(0.4,0,0.2,1);
   @keyframes slideDown {
     from { opacity: 0; transform: translateY(-10px); }
@@ -9726,6 +9797,7 @@ function OrderPanel({
   displayedOwnedTokens,
   ownedTokensJustUpdated,
   lastOrderQuantity,
+  orderPendingAllocation,
   orderPlacedSuccess,
   lastOrderDetails,
   tokenQuantity,
@@ -9788,7 +9860,40 @@ function OrderPanel({
         statusLabel
       ] })
     ] }),
-    orderPlacedSuccess ? /* @__PURE__ */ jsxRuntime.jsxs(OrderSuccessCard, { children: [
+    orderPendingAllocation ? /* @__PURE__ */ jsxRuntime.jsxs(OrderPendingCard, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pending-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "spinner" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Processing Order" }),
+          /* @__PURE__ */ jsxRuntime.jsx("small", { children: "Awaiting allocation..." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pending-body", children: [
+        [
+          { label: "Units Requested", value: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            lastOrderDetails?.tokens?.toFixed(2) || "0.00",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.4)", fontWeight: 400 }, children: tokenSymbol })
+          ] }) },
+          { label: "Price Per Unit", value: `$${tokenPrice.toFixed(2)}` },
+          {
+            label: `${tokenDisplayName} Exposure`,
+            value: `${((lastOrderDetails?.tokens ?? 0) / supplyToSell * 100).toFixed(3)}%`
+          }
+        ].map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pending-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: row.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: row.value })
+        ] }, row.label)),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pending-total", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total Investment" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+            "$",
+            lastOrderDetails?.total?.toLocaleString() || "0"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pending-footnote", children: "Your order has been submitted and is being processed. This usually takes a few seconds." })
+    ] }) : orderPlacedSuccess ? /* @__PURE__ */ jsxRuntime.jsxs(OrderSuccessCard, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "success-header", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "icon", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -9967,7 +10072,7 @@ function OrderPanel({
         ] })
       ] })
     ] }),
-    !orderPlacedSuccess && /* @__PURE__ */ jsxRuntime.jsx(
+    !orderPlacedSuccess && !orderPendingAllocation && /* @__PURE__ */ jsxRuntime.jsx(
       SubscribeButton,
       {
         type: "button",
@@ -10048,9 +10153,10 @@ var Panel2 = styled24__default.default.div`
   }
   @media (max-width: 768px) {
     padding: 1rem;
-    input[style*="font-size: 1.75rem"] {
-      font-size: 1.25rem !important;
-    }
+  }
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+    border-radius: 6px;
   }
 `;
 var PanelHeader2 = styled24__default.default.div`
@@ -10084,6 +10190,11 @@ var Card2 = styled24__default.default.div`
   border: 1px solid rgba(255,255,255,0.15);
   border-radius: 12px;
   padding: 1rem 1.25rem;
+
+  @media (max-width: 480px) {
+    padding: 0.75rem 1rem;
+    border-radius: 10px;
+  }
 `;
 var CardLabel = styled24__default.default.div`
   font-size: 0.75rem;
@@ -10102,6 +10213,10 @@ var CardInputRow = styled24__default.default.div`
     font-weight: 600;
     color: #fff;
     width: 100%;
+
+    @media (max-width: 480px) {
+      font-size: 1.35rem;
+    }
   }
   span {
     font-size: 1rem;
@@ -10115,8 +10230,10 @@ var QuickSelectRow = styled24__default.default.div`
   display: flex;
   gap: 0.5rem;
   margin-top: 0.75rem;
+  flex-wrap: wrap;
   button {
     flex: 1;
+    min-width: 50px;
     padding: 0.4rem 0;
     font-size: 0.75rem;
     font-weight: 500;
@@ -10132,6 +10249,11 @@ var QuickSelectRow = styled24__default.default.div`
     border-color: rgba(212,175,55,0.5);
     color: #D4AF37;
   }
+
+  @media (max-width: 480px) {
+    gap: 0.35rem;
+    button { font-size: 0.7rem; padding: 0.35rem 0; }
+  }
 `;
 var FundsRow = styled24__default.default.div`
   display: flex;
@@ -10255,6 +10377,10 @@ var BalanceValue = styled24__default.default.div`
     color: #0ecb81;
     font-weight: 600;
   }
+
+  @media (max-width: 480px) {
+    font-size: 1.2rem;
+  }
 `;
 var BalanceAction = styled24__default.default.div`
   font-size: 0.75rem;
@@ -10269,6 +10395,110 @@ var BalanceSub = styled24__default.default.div`
   color: var(--color-text-secondary);
   margin-top: 0.25rem;
 `;
+var OrderPendingCard = styled24__default.default.div`
+  margin-bottom: 1.5rem;
+  background: linear-gradient(180deg, rgba(25,27,31,0.95) 0%, rgba(18,20,24,0.98) 100%);
+  border: 1px solid rgba(212,175,55,0.08);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
+
+  .pending-header {
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    padding: 1.25rem 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+    background: linear-gradient(135deg, rgba(212,175,55,0.04) 0%, transparent 100%);
+
+    .spinner {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      border: 2.5px solid rgba(212,175,55,0.15);
+      border-top-color: #D4AF37;
+      animation: spin 0.8s linear infinite;
+      flex-shrink: 0;
+    }
+
+    p {
+      font-size: 0.95rem;
+      font-weight: 600;
+      color: #fff;
+      margin: 0;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    small {
+      font-size: 0.7rem;
+      color: rgba(255,255,255,0.4);
+    }
+  }
+
+  .pending-body {
+    padding: 1.25rem 1.5rem;
+  }
+  .pending-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 0.875rem;
+    margin-bottom: 0.875rem;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    span {
+      font-size: 0.75rem;
+      color: rgba(255,255,255,0.4);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-weight: 500;
+    }
+    strong {
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: rgba(255,255,255,0.5);
+      font-family: monospace;
+    }
+  }
+  .pending-total {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.875rem;
+    background: rgba(212,175,55,0.03);
+    border-radius: 8px;
+    border: 1px solid rgba(212,175,55,0.06);
+    span {
+      font-size: 0.75rem;
+      color: rgba(255,255,255,0.5);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-weight: 500;
+    }
+    strong {
+      font-size: 1.05rem;
+      font-weight: 700;
+      color: rgba(212,175,55,0.7);
+      font-family: monospace;
+    }
+  }
+  .pending-footnote {
+    padding: 1rem 1.5rem;
+    border-top: 1px solid rgba(255,255,255,0.06);
+    background: rgba(0,0,0,0.2);
+    font-size: 0.75rem;
+    color: rgba(255,255,255,0.4);
+    line-height: 1.6;
+    animation: pulse 2s ease-in-out infinite;
+  }
+`;
 var OrderSuccessCard = styled24__default.default.div`
   margin-bottom: 1.5rem;
   background: linear-gradient(180deg, rgba(25,27,31,0.95) 0%, rgba(18,20,24,0.98) 100%);
@@ -10713,6 +10943,10 @@ var TabContainer = styled24__default.default.div`
   gap: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   margin-bottom: 0.75rem;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
 `;
 var Tab = styled24__default.default.button`
   background: transparent;
@@ -10720,6 +10954,8 @@ var Tab = styled24__default.default.button`
   padding: 0.6rem 1rem;
   font-size: 0.75rem;
   font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
   color: ${({ $active }) => $active ? "#f0b90b" : "rgba(255, 255, 255, 0.4)"};
   cursor: pointer;
   transition: color 0.15s;
@@ -10990,8 +11226,14 @@ var Row2 = styled24__default.default.div`
   max-width: 1800px;
   margin-left: auto;
   margin-right: auto;
-  @media (max-width: 1024px) {
+  overflow: hidden;
+  @media (max-width: 768px) {
     grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  & > * {
+    min-width: 0;
+    overflow: hidden;
   }
 `;
 var TradeNewsPanel = styled24__default.default.div`
@@ -11003,8 +11245,8 @@ var TradeNewsPanel = styled24__default.default.div`
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   border: 1px solid var(--color-border);
   min-height: 280px;
-  overflow: visible !important;
-  @media (max-width: 1024px) {
+  overflow: hidden;
+  @media (max-width: 768px) {
     max-width: 100%;
     flex: 0 0 100%;
   }
@@ -11112,6 +11354,7 @@ function OrderConfirmationModal({
   tokenQuantity,
   tokenPrice,
   propertyName,
+  tokenSymbol,
   estExposure,
   orderTotal,
   availableBalance,
@@ -11126,7 +11369,7 @@ function OrderConfirmationModal({
     /* @__PURE__ */ jsxRuntime.jsx(ModalBody, { children: [
       { label: "Order Type", value: "Primary Offering" },
       { label: "Property", value: propertyName },
-      { label: "Units", value: `${tokenQuantity.toLocaleString()} MUS`, highlight: true },
+      { label: "Units", value: `${tokenQuantity.toLocaleString()} ${tokenSymbol}`, highlight: true },
       {
         label: "Unit Price",
         value: `$${tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
@@ -11157,7 +11400,9 @@ function OrderConfirmationModal({
       "Your order for ",
       /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
         tokenQuantity.toLocaleString(),
-        " MUS units"
+        " ",
+        tokenSymbol,
+        " units"
       ] }),
       " in the",
       " ",
@@ -11386,6 +11631,7 @@ function PropertyBuy({
   const [displayedOwnedTokens, setDisplayedOwnedTokens] = React5.useState(0);
   const [ownedTokensJustUpdated, setOwnedTokensJustUpdated] = React5.useState(false);
   const [lastOrderQuantity, setLastOrderQuantity] = React5.useState(0);
+  const [orderPendingAllocation, setOrderPendingAllocation] = React5.useState(false);
   const [orderPlacedSuccess, setOrderPlacedSuccess] = React5.useState(false);
   const [lastOrderDetails, setLastOrderDetails] = React5.useState(null);
   const [showOrderConfirmModal, setShowOrderConfirmModal] = React5.useState(false);
@@ -11433,12 +11679,23 @@ function PropertyBuy({
     }
     setShowOrderConfirmModal(true);
   };
-  const isPurchaseInFlight = purchaseStatus === "checking-allowance" || purchaseStatus === "approving" || purchaseStatus === "purchasing";
+  React5.useEffect(() => {
+    if (purchaseStatus === "success" && orderPendingAllocation) {
+      setOrderPendingAllocation(false);
+      setOrderPlacedSuccess(true);
+    }
+  }, [purchaseStatus, orderPendingAllocation]);
+  const handlePlaceAnotherOrder = React5.useCallback(() => {
+    setOrderPlacedSuccess(false);
+    setOrderPendingAllocation(false);
+  }, []);
+  const isPurchaseInFlight = purchaseStatus === "checking-allowance" || purchaseStatus === "approving" || purchaseStatus === "purchasing" || purchaseStatus === "pending-allocation";
   const getOrderButtonText = () => {
     if (!isAuthenticated) return "Sign In to Invest";
     if (purchaseStatus === "checking-allowance") return "Checking allowance\u2026";
     if (purchaseStatus === "approving") return "Approving USDC\u2026";
     if (purchaseStatus === "purchasing") return "Confirming purchase\u2026";
+    if (purchaseStatus === "pending-allocation") return "Awaiting allocation\u2026";
     if (ipoStatus === "PENDING" && !isPrivateClient) return "Sale Not Open Yet";
     if (ipoStatus === "CLOSED") return "Sale Completed";
     if (ipoStatus === "CANCELLED") return "Sale Cancelled";
@@ -11481,7 +11738,7 @@ function PropertyBuy({
       total: orderTotal,
       price: tokenPrice
     });
-    setOrderPlacedSuccess(true);
+    setOrderPendingAllocation(true);
     setSliderValue(0);
     setManualOrderAmount(null);
   };
@@ -11567,6 +11824,7 @@ function PropertyBuy({
             displayedOwnedTokens,
             ownedTokensJustUpdated,
             lastOrderQuantity,
+            orderPendingAllocation,
             orderPlacedSuccess,
             lastOrderDetails,
             tokenQuantity,
@@ -11581,7 +11839,7 @@ function PropertyBuy({
             orderButtonText: getOrderButtonText(),
             isOrderButtonDisabled: isOrderButtonDisabled(),
             hasInsufficientFunds,
-            onPlaceAnotherOrder: () => setOrderPlacedSuccess(false),
+            onPlaceAnotherOrder: handlePlaceAnotherOrder,
             onDeposit
           }
         ),
@@ -11615,6 +11873,7 @@ function PropertyBuy({
         tokenQuantity,
         tokenPrice,
         propertyName,
+        tokenSymbol,
         estExposure,
         orderTotal,
         availableBalance,
@@ -11655,29 +11914,42 @@ var HeroGrid = styled24__default.default.div`
   }
 
   @media (max-width: 1024px) {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
+    display: flex;
+    flex-direction: column;
     gap: 1rem;
+    overflow: hidden;
 
     & > div:nth-child(1) {
       display: none;
     }
 
     & > div:nth-child(2) {
-      grid-column: 1 / -1;
       order: 1;
+      min-width: 0;
+      width: 100%;
     }
 
     & > div:nth-child(4) {
-      grid-column: 1 / -1;
       order: 2;
+      min-width: 0;
+      width: 100%;
+      height: auto;
     }
 
     & > div:nth-child(3) {
-      grid-column: 1 / -1;
       order: 3;
+      min-width: 0;
+      width: 100%;
     }
   }
+
+  @media (max-width: 768px) {
+    gap: 0.75rem;
+  }
+
+  @media (max-width: 480px) {
+    gap: 0.5rem;
+  }
 `;
 var PaymentOption = styled24__default.default.div`
   display: flex;