@rpg-engine/long-bow 0.8.40 → 0.8.42

package/package.json

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

package/src/components/InformationCenter/sections/tutorials/InformationCenterTutorialsSection.tsx

@@ -19,8 +19,8 @@ interface ITutorialsSectionProps {
   tabId: string;
 }
 
-const ITEMS_PER_PAGE = 3;
-const GRID_COLUMNS = 3;
+const ITEMS_PER_PAGE = 4;
+const GRID_COLUMNS = 4;
 
 export const InformationCenterTutorialsSection: React.FC<ITutorialsSectionProps> = ({
   videoGuides,

package/src/components/shared/SearchHeader/SearchHeader.tsx

@@ -1,3 +1,4 @@
+import { isMobileOrTablet } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { Dropdown, IOptionsProps } from '../../Dropdown';
@@ -25,25 +26,32 @@ export const SearchHeader: React.FC<ISearchHeaderProps> = ({
 }) => {
   if (!searchOptions && !filterOptions) return null;
 
+  const isMobile = isMobileOrTablet();
+  const isSmallScreen = isMobile && window.innerWidth < 480;
+
   return (
     <HeaderContainer className={className}>
-      <HeaderContent>
+      <HeaderContent $isSmallScreen={isSmallScreen}>
         {searchOptions && (
           <SearchContainer>
             <StyledSearchBar
               value={searchOptions.value}
               onChange={searchOptions.onChange}
-              placeholder={searchOptions.placeholder || 'Search...'}
+              placeholder={
+                isSmallScreen
+                  ? 'Search...'
+                  : searchOptions.placeholder || 'Search...'
+              }
               rightElement={searchOptions.rightElement}
             />
           </SearchContainer>
         )}
         {filterOptions && (
-          <FilterContainer>
+          <FilterContainer $isSmallScreen={isSmallScreen}>
             <StyledDropdown
               options={filterOptions.options}
               onChange={filterOptions.onOptionChange}
-              width="200px"
+              width={isSmallScreen ? '100%' : '200px'}
             />
           </FilterContainer>
         )}
@@ -54,13 +62,14 @@ export const SearchHeader: React.FC<ISearchHeaderProps> = ({
 
 const HeaderContainer = styled.div``;
 
-const HeaderContent = styled.div`
+const HeaderContent = styled.div<{ $isSmallScreen?: boolean }>`
   display: flex;
+  flex-direction: ${props => (props.$isSmallScreen ? 'column' : 'row')};
   justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
+  align-items: ${props => (props.$isSmallScreen ? 'stretch' : 'center')};
+  gap: ${props => (props.$isSmallScreen ? '0.5rem' : '1rem')};
   background: rgba(0, 0, 0, 0.2);
-  padding: 1rem;
+  padding: ${props => (props.$isSmallScreen ? '0.5rem' : '1rem')};
   border-radius: 4px;
 `;
 
@@ -68,9 +77,10 @@ const SearchContainer = styled.div`
   flex: 1;
 `;
 
-const FilterContainer = styled.div`
+const FilterContainer = styled.div<{ $isSmallScreen?: boolean }>`
   display: flex;
-  justify-content: flex-end;
+  justify-content: ${props => (props.$isSmallScreen ? 'stretch' : 'flex-end')};
+  width: ${props => (props.$isSmallScreen ? '100%' : 'auto')};
 `;
 
 const StyledSearchBar = styled(SearchBar)`