@rpg-engine/long-bow 0.8.218 → 0.8.219

package/dist/components/DraggableContainer.d.ts

@@ -7,6 +7,12 @@ export interface IDraggableContainerProps {
     height?: string;
     minWidth?: string;
     minHeight?: string;
+    /** CSS override for width applied below `mobileBreakpoint`. Useful for responsive sizing without JS detection. */
+    mobileWidth?: string;
+    /** CSS override for height applied below `mobileBreakpoint`. Useful for responsive sizing without JS detection. */
+    mobileHeight?: string;
+    /** Viewport width in px under which mobile overrides apply. Defaults to 768. */
+    mobileBreakpoint?: number;
     className?: string;
     type?: RPGUIContainerTypes;
     title?: string;

package/dist/components/Store/Store.d.ts

@@ -28,8 +28,14 @@ export interface IStoreProps {
     fullScreen?: boolean;
     /** Override the DraggableContainer width (e.g. "90vw"). Defaults to "1000px". */
     containerWidth?: string;
-    /** Override the DraggableContainer height (e.g. "80vh"). Defaults to "80vh" so the inner scroll area is bounded. */
+    /** Override the DraggableContainer height (e.g. "80vh"). Defaults to "min(85vh, 900px)" so the inner scroll area is bounded. */
     containerHeight?: string;
+    /** Width applied below `mobileBreakpoint` (e.g. "95vw"). Defaults to "95vw". */
+    mobileContainerWidth?: string;
+    /** Height applied below `mobileBreakpoint` (e.g. "95vh"). Defaults to "95vh" so mobile fills the viewport. */
+    mobileContainerHeight?: string;
+    /** Viewport px under which mobile overrides apply. Defaults to 768. */
+    mobileBreakpoint?: number;
     packsBadge?: string;
     featuredItems?: IFeaturedItem[];
     onQuickBuy?: (item: IProductBlueprint, quantity?: number) => void;

package/dist/long-bow.cjs.development.js

@@ -2474,6 +2474,10 @@ var DraggableContainer = function DraggableContainer(_ref) {
     height = _ref.height,
     minHeight = _ref.minHeight,
     minWidth = _ref.minWidth,
+    mobileWidth = _ref.mobileWidth,
+    mobileHeight = _ref.mobileHeight,
+    _ref$mobileBreakpoint = _ref.mobileBreakpoint,
+    mobileBreakpoint = _ref$mobileBreakpoint === void 0 ? 768 : _ref$mobileBreakpoint,
     className = _ref.className,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? exports.RPGUIContainerTypes.FramedGold : _ref$type,
@@ -2550,6 +2554,9 @@ var DraggableContainer = function DraggableContainer(_ref) {
     height: height || 'auto',
     minWidth: minWidth,
     minHeight: minHeight,
+    mobileWidth: mobileWidth,
+    mobileHeight: mobileHeight,
+    mobileBreakpoint: mobileBreakpoint,
     className: "rpgui-container " + type + " " + className,
     isFullScreen: isFullScreen,
     opacity: opacity
@@ -2566,7 +2573,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
 var Container$a = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__Container",
   componentId: "sc-184mpyl-0"
-})(["height:", ";width:", ";min-width:", ";min-height:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;overflow-y:hidden;", " ", " &.rpgui-container{padding-top:1.5rem;}"], function (props) {
+})(["height:", ";width:", ";min-width:", ";min-height:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;overflow-y:hidden;", " ", " ", " &.rpgui-container{padding-top:1.5rem;}"], function (props) {
   return props.height;
 }, function (_ref2) {
   var width = _ref2.width;
@@ -2583,6 +2590,11 @@ var Container$a = /*#__PURE__*/styled__default.div.withConfig({
 }, function (_ref6) {
   var isFullScreen = _ref6.isFullScreen;
   return isFullScreen && styled.css(["justify-content:center;align-items:flex-start;align-content:flex-start;"]);
+}, function (_ref7) {
+  var mobileWidth = _ref7.mobileWidth,
+    mobileHeight = _ref7.mobileHeight,
+    mobileBreakpoint = _ref7.mobileBreakpoint;
+  return (mobileWidth || mobileHeight) && styled.css(["@media (max-width:", "px){", " ", "}"], mobileBreakpoint != null ? mobileBreakpoint : 768, mobileWidth && "width: " + mobileWidth + "; min-width: unset;", mobileHeight && "height: " + mobileHeight + "; min-height: unset;");
 });
 var CloseButton$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "DraggableContainer__CloseButton",
@@ -2599,8 +2611,8 @@ var Title$1 = /*#__PURE__*/styled__default.h1.withConfig({
 var Icon = /*#__PURE__*/styled__default.img.withConfig({
   displayName: "DraggableContainer__Icon",
   componentId: "sc-184mpyl-4"
-})(["color:white;z-index:22;font-size:", ";width:", ";margin-right:0.5rem;"], uiFonts.size.xsmall, function (_ref7) {
-  var width = _ref7.width;
+})(["color:white;z-index:22;font-size:", ";width:", ";margin-right:0.5rem;"], uiFonts.size.xsmall, function (_ref8) {
+  var width = _ref8.width;
   return width;
 });
 
@@ -39735,6 +39747,9 @@ var Store = function Store(_ref) {
     fullScreen = _ref$fullScreen === void 0 ? false : _ref$fullScreen,
     containerWidth = _ref.containerWidth,
     containerHeight = _ref.containerHeight,
+    mobileContainerWidth = _ref.mobileContainerWidth,
+    mobileContainerHeight = _ref.mobileContainerHeight,
+    mobileBreakpoint = _ref.mobileBreakpoint,
     _ref$packsTabLabel = _ref.packsTabLabel,
     packsTabLabel = _ref$packsTabLabel === void 0 ? 'Packs' : _ref$packsTabLabel,
     packsBadge = _ref.packsBadge,
@@ -40074,7 +40089,10 @@ var Store = function Store(_ref) {
     onCloseButton: onClose,
     width: containerWidth != null ? containerWidth : "1000px",
     minWidth: "700px",
-    height: containerHeight != null ? containerHeight : "80vh",
+    height: containerHeight != null ? containerHeight : "min(85vh, 900px)",
+    mobileWidth: mobileContainerWidth != null ? mobileContainerWidth : "95vw",
+    mobileHeight: mobileContainerHeight != null ? mobileContainerHeight : "95vh",
+    mobileBreakpoint: mobileBreakpoint,
     type: exports.RPGUIContainerTypes.Framed,
     cancelDrag: "[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button",
     isFullScreen: fullScreen