@rpg-engine/long-bow 0.5.19 → 0.5.21

package/package.json

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

package/src/components/Abstractions/SlotsContainer.tsx

@@ -13,7 +13,6 @@ interface IProps {
   onOutsideClick?: () => void;
   initialPosition?: IPosition;
   scale?: number;
-  width?: string;
 }
 
 export const SlotsContainer: React.FC<IProps> = ({
@@ -26,7 +25,6 @@ export const SlotsContainer: React.FC<IProps> = ({
   onOutsideClick,
   initialPosition,
   scale,
-  width,
 }) => {
   return (
     <DraggableContainer
@@ -37,7 +35,7 @@ export const SlotsContainer: React.FC<IProps> = ({
           onClose();
         }
       }}
-      width={width ?? '415px'}
+      width="450px"
       cancelDrag=".item-container-body, #shortcuts_list"
       onPositionChange={({ x, y }) => {
         if (onPositionChange) {

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -218,7 +218,7 @@ const ItemsContainer = styled.div`
   max-height: 270px;
   overflow-y: auto;
   overflow-x: hidden;
-  width: 415px;
+  width: 450px;
 `;
 
 const QuantitySelectorContainer = styled.div`

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -123,13 +123,6 @@ export const ItemSlot: React.FC<IProps> = observer(
     const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
     const dragContainer = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-      // This fixes an issue where if you drag an item inside of a scrollable container (overflow), its cut out
-      if (dragContainer.current) {
-        dragContainer.current.style.position = 'fixed';
-      }
-    }, []);
-
     const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
       []
     );
@@ -532,10 +525,9 @@ const Container = styled.div<ContainerTypes>`
   margin: 0.1rem;
 
   .react-draggable-dragging {
-    opacity: 0.5; 
+    opacity: 0.5;
   }
-  
-  
+
   .sprite-from-atlas-img--item {
     position: relative;
     top: 1.5rem;
@@ -576,8 +568,10 @@ const Container = styled.div<ContainerTypes>`
 `;
 
 const ItemContainer = styled.div<{ isFocused?: boolean }>`
-  width: 64px;
-  height: 64px;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
   ${props => props.isFocused && 'z-index: 100; pointer-events: none;'}
 `;