diff --git a/plugins/bazaar/README.md b/plugins/bazaar/README.md
index dbaed74b3b..bd4589f2d3 100644
--- a/plugins/bazaar/README.md
+++ b/plugins/bazaar/README.md
@@ -39,6 +39,8 @@ const routes = (
```
+`BazaarPage` can be given the optional properties `fullHeight` and `fullWidth` which are used to adjust the cards styling to fit more or less on the page as required (both default to `true`).
+
Add a **Bazaar icon** to the Sidebar to easily access the Bazaar. In `packages/app/src/components/Root.tsx` add:
```diff
diff --git a/plugins/bazaar/src/components/HomePage/HomePage.tsx b/plugins/bazaar/src/components/HomePage/HomePage.tsx
index 73a8cd7922..98ee6a5196 100644
--- a/plugins/bazaar/src/components/HomePage/HomePage.tsx
+++ b/plugins/bazaar/src/components/HomePage/HomePage.tsx
@@ -23,16 +23,18 @@ import { About } from '../About';
export type HomePageProps = {
title?: string;
subtitle?: string;
+ fullWidth?: boolean;
+ fullHeight?: boolean;
};
export const HomePage = (props: HomePageProps) => {
- const { title, subtitle } = props;
+ const { title, subtitle, fullWidth, fullHeight } = props;
const tabContent = [
{
path: '/',
title: 'Home',
- children: ,
+ children: ,
},
{
path: '/about',
diff --git a/plugins/bazaar/src/components/SortView/SortView.tsx b/plugins/bazaar/src/components/SortView/SortView.tsx
index b3e592fc6f..46f4c64c42 100644
--- a/plugins/bazaar/src/components/SortView/SortView.tsx
+++ b/plugins/bazaar/src/components/SortView/SortView.tsx
@@ -67,7 +67,14 @@ const getUnlinkedCatalogEntities = (
};
/** @public */
-export const SortView = () => {
+export type SortViewProps = {
+ fullWidth?: boolean;
+ fullHeight?: boolean;
+};
+
+/** @public */
+export const SortView = (props: SortViewProps) => {
+ const { fullWidth = true, fullHeight = true } = props;
const bazaarApi = useApi(bazaarApiRef);
const catalogApi = useApi(catalogApiRef);
const classes = useStyles();
@@ -199,7 +206,8 @@ export const SortView = () => {
bazaarProjects={getSearchResults() || []}
fetchBazaarProjects={fetchBazaarProjects}
catalogEntities={unlinkedCatalogEntities || []}
- height="large"
+ gridSize={fullWidth ? 2 : 4}
+ height={fullHeight ? 'large' : 'small'}
/>