fix: #1171 pagnination rps issue (#1187)

packages/marketplace/src/components/ui/__tests__/__snapshots__/app-list.tsx.snap

@@ -9,7 +9,7 @@ exports[`AppList should match a snapshot 1`] = `
     Title
   </Component>
   <Component
-    className=" "
+    className="undefined "
     data-test="app-list-container"
   >
     <Component
@@ -97,7 +97,7 @@ exports[`AppList should match a snapshot when use empty infoType 1`] = `
     Title
   </Component>
   <Component
-    className=" "
+    className="undefined "
     data-test="app-list-container"
   >
     <Component

packages/marketplace/src/components/ui/app-list.tsx

@@ -50,7 +50,10 @@ export const AppList: React.FunctionComponent<AppListProps> = ({
             : 'We are unable to find any Apps that match your search criteria. Please try again.'}
         </Helper>
       ) : (
-        <GridFourCol className={` ${loading ? styles.contentIsLoading : ''}`} data-test="app-list-container">
+        <GridFourCol
+          className={`${styles.flexGrow} ${loading ? styles.contentIsLoading : ''}`}
+          data-test="app-list-container"
+        >
           {list.map(app => (
             <WrapperContainer key={app.id}>
               <AppCard

packages/marketplace/src/styles/blocks/app-list.scss

@@ -3,7 +3,7 @@
   margin-bottom: 1.5rem;
 }
 
-.loader-container {
+.loaderContainer {
   position: absolute;
   left: 0;
   right: 0;
@@ -14,6 +14,11 @@
   align-items: center;
 }
 
-.content-is-loading {
+.contentIsLoading {
   opacity: 0.75;
 }
+
+// to fix old chrome/safari flex-box bug
+.flexGrow {
+  flex: 1 0;
+}