@loafmarkets/ui 0.1.284 → 0.1.286

package/dist/index.js

@@ -14912,6 +14912,7 @@ var CRow = styled9__default.default.button`
   grid-template-columns: 1fr 1fr 1fr 24px;
   align-items: center;
   width: calc(100% - 1rem);
+  max-width: 460px;
   margin: 0.25rem 0.5rem;
   margin-bottom: ${(p) => p.$expanded ? "0" : "0.25rem"};
   padding: 0.55rem 0.65rem;
@@ -14979,6 +14980,7 @@ var CChevronWrap = styled9__default.default.span`
 `;
 var CExpandedWrap = styled9__default.default.div`
   margin: 0 0.5rem 0.25rem;
+  max-width: 460px;
   padding: 0.4rem 0.65rem 0.5rem;
   background: rgba(255, 255, 255, 0.035);
   border: 1px solid rgba(255, 255, 255, 0.06);
@@ -15210,34 +15212,53 @@ function PropertyBuy({
           isPrivateClient
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(RecentOrderPanel, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "roa-header", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(LiveDot, { $active: ipoStarted && !ipoEnded }),
-            "Recent Order Activity"
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: ipoEnded ? `Sale ended${ordersAllocated > 0 ? ` \xB7 ${ordersAllocated.toLocaleString()} orders` : ""}` : ipoStarted ? isLoadingActivity && sortedOrders.length === 0 ? "Loading orders\u2026" : `Active orders: ${ordersAllocated.toLocaleString()}` : "Waiting for Offer to Open" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "roa-content", children: ipoStarted && isLoadingActivity && sortedOrders.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(FeedList, { children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(SkeletonFeedRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "info-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 14 }),
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 56, height: 10 })
+      /* @__PURE__ */ jsxRuntime.jsxs(BottomRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ActivityWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          PortfolioActivityPanel,
+          {
+            positions: portfolioActivity?.positions,
+            showPositionsTab: true,
+            onPositionClick: portfolioActivity?.onPositionClick,
+            offeringOrders: portfolioActivity?.offeringOrders,
+            openOrders: portfolioActivity?.openOrders,
+            orderHistory: portfolioActivity?.orderHistory,
+            tradeHistory: portfolioActivity?.tradeHistory,
+            transfers: portfolioActivity?.transfers,
+            onCancelOrder: portfolioActivity?.onCancelOrder,
+            cancellingOrderId: portfolioActivity?.cancellingOrderId,
+            defaultTab: "subscriptions",
+            pageSize: 6
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(RecentOrderPanel, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "roa-header", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LiveDot, { $active: ipoStarted && !ipoEnded }),
+              "Recent Order Activity"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: ipoEnded ? `Sale ended${ordersAllocated > 0 ? ` \xB7 ${ordersAllocated.toLocaleString()} orders` : ""}` : ipoStarted ? isLoadingActivity && sortedOrders.length === 0 ? "Loading orders\u2026" : `Active orders: ${ordersAllocated.toLocaleString()}` : "Waiting for Offer to Open" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 70, height: 14 })
-        ] }, `skel-${i}`)) }) : ipoStarted || ipoEnded && sortedOrders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FeedList, { children: sortedOrders.map((order, index) => {
-          const amount = tokenPrice * order.quantity;
-          const barPercent = Math.min(85, Math.max(15, amount / 6e4 * 100));
-          return /* @__PURE__ */ jsxRuntime.jsxs(PurchaseItem, { $barWidth: `${barPercent}%`, $isAlternate: index % 2 === 1, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(PurchaseInfo, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PurchaseName, { children: order.buyerHandle || `${order.buyerAddress.slice(0, 6)}...${order.buyerAddress.slice(-4)}` }),
-              /* @__PURE__ */ jsxRuntime.jsx(PurchaseTime, { children: formatTimeAgo2(order.timestamp) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "roa-content", children: ipoStarted && isLoadingActivity && sortedOrders.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(FeedList, { children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(SkeletonFeedRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "info-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 14 }),
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 56, height: 10 })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(PurchaseAmount, { children: formatOrderCurrency(amount) })
-          ] }, order.txHash);
-        }) }) : ipoEnded ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "roa-empty", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Sale ended \u2014 no orders were placed." }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "roa-empty", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "roa-spinner" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Activity will appear once the Offering opens" })
-        ] }) })
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 70, height: 14 })
+          ] }, `skel-${i}`)) }) : ipoStarted || ipoEnded && sortedOrders.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(FeedList, { children: sortedOrders.map((order, index) => {
+            const amount = tokenPrice * order.quantity;
+            const barPercent = Math.min(85, Math.max(15, amount / 6e4 * 100));
+            return /* @__PURE__ */ jsxRuntime.jsxs(PurchaseItem, { $barWidth: `${barPercent}%`, $isAlternate: index % 2 === 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(PurchaseInfo, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(PurchaseName, { children: order.buyerHandle || `${order.buyerAddress.slice(0, 6)}...${order.buyerAddress.slice(-4)}` }),
+                /* @__PURE__ */ jsxRuntime.jsx(PurchaseTime, { children: formatTimeAgo2(order.timestamp) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(PurchaseAmount, { children: formatOrderCurrency(amount) })
+            ] }, order.txHash);
+          }) }) : ipoEnded ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "roa-empty", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Sale ended \u2014 no orders were placed." }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "roa-empty", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "roa-spinner" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Activity will appear once the Offering opens" })
+          ] }) })
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -15278,23 +15299,6 @@ function PropertyBuy({
         purchaseError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "0.75rem", padding: "0.75rem 1rem", borderRadius: "8px", background: "rgba(246,70,93,0.1)", border: "1px solid rgba(246,70,93,0.3)", color: "#f6465d", fontSize: "0.8rem", fontWeight: 500 }, children: purchaseError })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ActivityWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      PortfolioActivityPanel,
-      {
-        positions: portfolioActivity?.positions,
-        showPositionsTab: true,
-        onPositionClick: portfolioActivity?.onPositionClick,
-        offeringOrders: portfolioActivity?.offeringOrders,
-        openOrders: portfolioActivity?.openOrders,
-        orderHistory: portfolioActivity?.orderHistory,
-        tradeHistory: portfolioActivity?.tradeHistory,
-        transfers: portfolioActivity?.transfers,
-        onCancelOrder: portfolioActivity?.onCancelOrder,
-        cancellingOrderId: portfolioActivity?.cancellingOrderId,
-        defaultTab: "subscriptions",
-        pageSize: 6
-      }
-    ) }),
     /* @__PURE__ */ jsxRuntime.jsxs(NewsVideoRow, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         PropertyNewsUpdates,
@@ -15411,6 +15415,8 @@ var HeroGrid = styled9__default.default.div`
   }
 `;
 var ActivityWrapper = styled9__default.default.div`
+  flex: 1;
+  min-width: 0;
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;
@@ -15425,7 +15431,19 @@ var ActivityWrapper = styled9__default.default.div`
     min-height: auto;
   }
 `;
+var BottomRow = styled9__default.default.div`
+  display: flex;
+  gap: 1.5rem;
+  align-items: stretch;
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    gap: 1rem;
+  }
+`;
 var RecentOrderPanel = styled9__default.default.div`
+  flex: 0 0 auto;
+  min-width: 380px;
+  max-width: 480px;
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;
@@ -15434,6 +15452,11 @@ var RecentOrderPanel = styled9__default.default.div`
   box-shadow: 0 4px 8px rgba(0,0,0,0.2);
   border: 1px solid var(--color-border);
   overflow: hidden;
+  @media (max-width: 1024px) {
+    min-width: 0;
+    max-width: none;
+    width: 100%;
+  }
   @media (max-width: 768px) {
     padding: 1rem;
   }