@rpg-engine/long-bow 0.8.217 → 0.8.219

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.217",
+  "version": "0.8.219",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/DraggableContainer.tsx

@@ -12,6 +12,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;
@@ -36,6 +42,9 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   height,
   minHeight,
   minWidth,
+  mobileWidth,
+  mobileHeight,
+  mobileBreakpoint = 768,
   className,
   type = RPGUIContainerTypes.FramedGold,
   onCloseButton,
@@ -117,6 +126,9 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
         height={height || 'auto'}
         minWidth={minWidth}
         minHeight={minHeight}
+        mobileWidth={mobileWidth}
+        mobileHeight={mobileHeight}
+        mobileBreakpoint={mobileBreakpoint}
         className={`rpgui-container ${type} ${className}`}
         isFullScreen={isFullScreen}
         opacity={opacity}
@@ -149,6 +161,9 @@ interface IContainerProps {
   height: string;
   minWidth?: string;
   minHeight?: string;
+  mobileWidth?: string;
+  mobileHeight?: string;
+  mobileBreakpoint?: number;
   isFullScreen?: boolean;
   opacity?: number;
 }
@@ -178,6 +193,15 @@ const Container = styled.div<IContainerProps>`
       align-content: flex-start;
     `}
 
+  ${({ mobileWidth, mobileHeight, mobileBreakpoint }) =>
+    (mobileWidth || mobileHeight) &&
+    css`
+      @media (max-width: ${mobileBreakpoint ?? 768}px) {
+        ${mobileWidth && `width: ${mobileWidth}; min-width: unset;`}
+        ${mobileHeight && `height: ${mobileHeight}; min-height: unset;`}
+      }
+    `}
+
   &.rpgui-container {
     padding-top: 1.5rem;
   }

package/src/components/Store/Store.tsx

@@ -51,8 +51,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 "auto". */
+  /** 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;
@@ -116,6 +122,9 @@ export const Store: React.FC<IStoreProps> = ({
   fullScreen = false,
   containerWidth,
   containerHeight,
+  mobileContainerWidth,
+  mobileContainerHeight,
+  mobileBreakpoint,
   packsTabLabel = 'Packs',
   packsBadge,
   featuredItems,
@@ -412,7 +421,10 @@ export const Store: React.FC<IStoreProps> = ({
       onCloseButton={onClose}
       width={containerWidth ?? "1000px"}
       minWidth="700px"
-      height={containerHeight ?? "auto"}
+      height={containerHeight ?? "min(85vh, 900px)"}
+      mobileWidth={mobileContainerWidth ?? "95vw"}
+      mobileHeight={mobileContainerHeight ?? "95vh"}
+      mobileBreakpoint={mobileBreakpoint}
       type={RPGUIContainerTypes.Framed}
       cancelDrag="[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button"
       isFullScreen={fullScreen}