@rpg-engine/long-bow 0.8.23 → 0.8.24

package/package.json

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

package/src/components/InformationCenter/InformationCenter.tsx

@@ -7,6 +7,7 @@ import {
   IInformationCenterNPC,
   IVideoGuide,
 } from '@rpg-engine/shared';
+import { DraggableContainer } from '../DraggableContainer';
 import { InternalTabs } from '../InternalTabs/InternalTabs';
 import { InformationCenterBestiarySection } from './sections/bestiary/InformationCenterBestiarySection';
 import { InformationCenterFAQSection } from './sections/faq/InformationCenterFaqSection';
@@ -116,29 +117,33 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   ];
 
   return (
-    <Container>
-      <InternalTabs
-        tabs={tabs}
-        activeTextColor="#000000"
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-        activeColor="#fef08a"
-        inactiveColor="#6b7280"
-        borderColor="#f59e0b"
-        hoverColor="#fef3c7"
-      />
-      {selectedItem && (
-        <InformationCenterItemDetails
-          item={selectedItem}
-          itemsAtlasJSON={itemsAtlasJSON}
-          itemsAtlasIMG={itemsAtlasIMG}
-          droppedBy={bestiaryItems.filter(npc =>
-            npc.loots?.some(loot => loot.itemBlueprintKey === selectedItem.key)
-          )}
-          onBack={() => setSelectedItem(null)}
+    <DraggableContainer title="Information Center">
+      <Container>
+        <InternalTabs
+          tabs={tabs}
+          activeTextColor="#000000"
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          activeColor="#fef08a"
+          inactiveColor="#6b7280"
+          borderColor="#f59e0b"
+          hoverColor="#fef3c7"
         />
-      )}
-    </Container>
+        {selectedItem && (
+          <InformationCenterItemDetails
+            item={selectedItem}
+            itemsAtlasJSON={itemsAtlasJSON}
+            itemsAtlasIMG={itemsAtlasIMG}
+            droppedBy={bestiaryItems.filter(npc =>
+              npc.loots?.some(
+                loot => loot.itemBlueprintKey === selectedItem.key
+              )
+            )}
+            onBack={() => setSelectedItem(null)}
+          />
+        )}
+      </Container>
+    </DraggableContainer>
   );
 };
 

package/src/components/InformationCenter/shared/BaseInformationDetails.tsx

@@ -49,33 +49,24 @@ export const BaseInformationDetails: React.FC<IBaseInformationDetailsProps> = ({
 };
 
 const Container = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  position: absolute;
+  inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
-  height: 90%;
-  width: 90%;
 `;
 
 const Overlay = styled.div`
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   background-color: rgba(0, 0, 0, 0.8);
 `;
 
 const Modal = styled.div`
   position: relative;
   width: 90%;
-  max-width: 800px;
-  max-height: 90vh;
+  height: 90%;
   background-color: rgba(0, 0, 0, 0.95);
   border-radius: 4px;
   padding: 16px;
@@ -136,6 +127,8 @@ const Content = styled.div`
   display: flex;
   flex-direction: column;
   gap: 16px;
+  height: 100%;
+  overflow: auto;
 `;
 
 const Title = styled.h2`