Bazaar ProjectPreview style override via HomePage

Signed-off-by: Simon Chapman <sdcpublic@outlook.com>

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

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: <SortView />,
+      children: <SortView fullWidth={fullWidth} fullHeight={fullHeight} />,
     },
     {
       path: '/about',

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'}
       />
       <Content noPadding className={classes.container} />
     </Content>