@rpg-engine/long-bow 0.8.38 → 0.8.39

package/package.json

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

package/src/components/InformationCenter/InformationCenter.tsx

@@ -29,6 +29,7 @@ interface IInformationCenterProps {
   loading?: boolean;
   error?: string;
   initialSearchQuery?: string;
+  onClose?: () => void;
 }
 
 export const InformationCenter: React.FC<IInformationCenterProps> = ({
@@ -44,6 +45,7 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   loading = false,
   error,
   initialSearchQuery = '',
+  onClose,
 }) => {
   const [activeTab, setActiveTab] = useState('bestiary');
   const isMobile = isMobileOrTablet();
@@ -108,6 +110,8 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
       width={isMobile ? '95%' : '80%'}
       minWidth="300px"
       cancelDrag=".PaginatedContent-content"
+      isFullScreen={isMobile}
+      onCloseButton={onClose}
     >
       <Container>
         <InternalTabs

package/src/components/shared/AdvancedFilters/AdvancedFilters.tsx

@@ -1,3 +1,4 @@
+import { isMobileOrTablet } from '@rpg-engine/shared';
 import React, { useEffect, useRef } from 'react';
 import {
   AiFillCaretRight,
@@ -30,6 +31,7 @@ interface IAdvancedFiltersProps {
   sections: IFilterSection[];
   onClearAll: () => void;
   hasActiveFilters: boolean;
+  onClose?: () => void;
 }
 
 export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
@@ -38,6 +40,7 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
   sections,
   onClearAll,
   hasActiveFilters,
+  onClose,
 }) => {
   const renderFilterSection = (section: IFilterSection) => {
     switch (section.type) {
@@ -106,13 +109,13 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
   });
   const buttonRef = useRef<HTMLButtonElement>(null);
   const panelRef = useRef<HTMLDivElement>(null);
+  const isMobile = isMobileOrTablet();
 
   useEffect(() => {
     if (isOpen && buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
-      const isMobileView = window.innerWidth < 480;
 
-      if (isMobileView) {
+      if (isMobile) {
         // For mobile, position in center of screen
         setButtonPosition({
           top: window.innerHeight / 2,
@@ -128,7 +131,7 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
         });
       }
     }
-  }, [isOpen]);
+  }, [isOpen, isMobile]);
 
   // Handle click outside to close the panel
   useEffect(() => {
@@ -153,6 +156,13 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
     };
   }, [isOpen, onToggle]);
 
+  const handleClose = () => {
+    onToggle();
+    if (onClose) {
+      onClose();
+    }
+  };
+
   return (
     <Container>
       <FilterButton
@@ -185,24 +195,20 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
 
       {isOpen && (
         <Portal>
+          {isMobile && <Overlay />}
           <FiltersPanel
             ref={panelRef}
             style={{
               position: 'fixed',
-              top: buttonPosition.isMobile ? '50vh' : `${buttonPosition.top}px`,
-              left: buttonPosition.isMobile
-                ? '50vw'
-                : `${buttonPosition.left}px`,
-              transform: buttonPosition.isMobile
-                ? 'translate(-50%, -50%)'
-                : 'translateX(-50%)',
+              top: isMobile ? '50vh' : `${buttonPosition.top}px`,
+              left: isMobile ? '50vw' : `${buttonPosition.left}px`,
               zIndex: 9999,
             }}
-            $isMobile={buttonPosition.isMobile}
+            $isMobile={isMobile}
           >
             <FilterHeader>
               <FilterTitle>Advanced Filters</FilterTitle>
-              <CloseButton onClick={onToggle}>×</CloseButton>
+              <CloseButton onClick={handleClose}>×</CloseButton>
             </FilterHeader>
 
             {sections.map(renderFilterSection)}
@@ -267,19 +273,21 @@ const FiltersPanel = styled.div<{ $isMobile?: boolean }>`
   background: #1a1a1a;
   border: 1px solid #333;
   border-radius: 6px;
-  padding: 1rem;
-  width: 280px;
+  padding: ${props => (props.$isMobile ? '0.75rem' : '1rem')};
+  width: ${props => (props.$isMobile ? '240px' : '280px')};
   max-width: calc(100vw - 20px);
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: ${props => (props.$isMobile ? '0.75rem' : '1rem')};
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   font-family: 'Press Start 2P', cursive;
+  transform: ${props =>
+    props.$isMobile ? 'translate(-50%, -50%) scale(0.9)' : 'translateX(-50%)'};
 
   @media (max-width: 320px) {
-    width: 250px;
-    padding: 0.75rem;
-    gap: 0.75rem;
+    width: 220px;
+    padding: 0.65rem;
+    gap: 0.65rem;
   }
 
   &:before {
@@ -306,6 +314,26 @@ const FilterHeader = styled.div`
   border-bottom: 1px solid #333;
 `;
 
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 9998;
+  animation: fadeIn 0.2s ease-out;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
 const FilterTitle = styled.div`
   font-weight: 600;
   color: #ffd700;