diff --git a/src/components/App/SideBar/FilterSearch/NodeTypes/index.tsx b/src/components/App/SideBar/FilterSearch/NodeTypes/index.tsx index 1e866df0f..a2e036aea 100644 --- a/src/components/App/SideBar/FilterSearch/NodeTypes/index.tsx +++ b/src/components/App/SideBar/FilterSearch/NodeTypes/index.tsx @@ -15,7 +15,11 @@ type Props = { export const NodeTypes = ({ handleSchemaTypeClick, selectedTypes, schemaAll }: Props) => { const [showAllSchemas, setShowAllSchemas] = useState(false) - const uniqueSchemas = (showAllSchemas ? schemaAll : schemaAll.slice(0, 4)).filter( + const schemasPerRow = 3 + const MAX_ROWS = 4 + const maxVisibleSchemas = schemasPerRow * MAX_ROWS + + const uniqueSchemas = (showAllSchemas ? schemaAll : schemaAll.slice(0, maxVisibleSchemas)).filter( (schema, index, self) => index === self.findIndex((s) => s.type === schema.type), ) @@ -40,7 +44,7 @@ export const NodeTypes = ({ handleSchemaTypeClick, selectedTypes, schemaAll }: P ))} - {!showAllSchemas && schemaAll.length > 4 && ( + {!showAllSchemas && schemaAll.length > maxVisibleSchemas && ( setShowAllSchemas(true)}> View More