Merge branch 'master' into dependabot/npm_and_yarn/site/base-x-3.0.11

Author: amitamrutiya

src/custom/CatalogDetail/OverviewSection.tsx

@@ -7,7 +7,7 @@ import MetricsDisplay from './MetricsDisplay';
 import PatternInfo from './PatternInfo';
 import SocialSharePopper from './SocialSharePopper';
 import UserInfo from './UserInfo';
-import { ContentRow, DesignHeading, OverviewContainer } from './style';
+import { ContentRow, DesignHeading, OverviewContainer, OverviewContainerHeader } from './style';
 import { Class } from './types';
 
 interface OverviewSectionProps {
@@ -50,15 +50,7 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
 }) => {
   return (
     <OverviewContainer>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          width: '100%',
-          flexWrap: 'wrap',
-          fontFamily: fontFamily || 'inherit'
-        }}
-      >
+      <OverviewContainerHeader>
         <DesignHeading>{details?.name}</DesignHeading>
         <SocialSharePopper
           details={details}
@@ -70,7 +62,7 @@ const OverviewSection: React.FC<OverviewSectionProps> = ({
           showShareAction={showShareAction}
           handleShare={handleShare}
         />
-      </div>
+      </OverviewContainerHeader>
       <Grid container spacing={2}>
         <Grid item lg={4} md={4} sm={12} xs={12}>
           <Grid container>

src/custom/CatalogDetail/style.tsx

@@ -200,6 +200,18 @@ export const OverviewContainer = styled('div')(({ theme }) => ({
   borderRadius: '0.4rem'
 }));
 
+export const OverviewContainerHeader = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  width: '100%',
+  flexWrap: 'wrap',
+  fontFamily: 'inherit',
+
+  [theme.breakpoints.down('sm')]: {
+    flexDirection: 'column'
+  }
+}));
+
 export const DesignHeading = styled('h1')(({ theme }) => ({
   textAlign: 'left',
   margin: '0rem 0rem 2rem 0rem',

src/custom/CatalogFilterSection/CatalogFilterSidebar.tsx

@@ -141,7 +141,8 @@ const CatalogFilterSidebar: React.FC<CatalogFilterSidebarProps> = ({
               style={{
                 height: '75vh',
                 overflowY: 'auto',
-                background: theme.palette.background.surfaces
+                background: theme.palette.background.surfaces,
+                padding: '0 16px'
               }}
             >
               <CatalogFilterSidebarState

src/custom/PerformersSection/PerformersSection.tsx

@@ -9,6 +9,7 @@ import {
   TropyIcon
 } from '../../icons';
 import { useTheme } from '../../theme';
+import { Carousel } from '../Carousel';
 import { Pattern } from '../CustomCatalog/CustomCard';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { StateCardSekeleton } from './PerformersToogleButton';
@@ -284,6 +285,17 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
       </MainContainer>
     );
 
+  const statComponents = stats.map((stat, index) => (
+    <StatCard
+      key={`${stat.id}-${index}`}
+      {...stat}
+      onCardClick={onCardClick}
+      onIconClick={onIconClick}
+      onAuthorClick={onAuthorClick}
+      onStatusClick={onStatusClick}
+    />
+  ));
+
   return (
     <ErrorBoundary>
       <MainContainer>
@@ -299,17 +311,7 @@ const PerformersSection: React.FC<PerformersSectionProps> = ({
         </Title>
         <CardsContainer>
           {isLoading && <StateCardSekeleton />}
-          {!isLoading &&
-            stats.map((stat, index) => (
-              <StatCard
-                key={`${stat.id}-${index}`}
-                {...stat}
-                onCardClick={onCardClick}
-                onIconClick={onIconClick}
-                onAuthorClick={onAuthorClick}
-                onStatusClick={onStatusClick}
-              />
-            ))}
+          <Carousel items={statComponents} />
         </CardsContainer>
       </MainContainer>
     </ErrorBoundary>

src/custom/PerformersSection/styles.tsx

@@ -222,10 +222,9 @@ export const UserNameText = styled(Typography)(({ theme }) => ({
 
 export const CardsContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
-  gap: '18px',
+  gap: '15px',
   width: '100%',
-  overflowX: 'auto',
-  padding: '18px',
+  padding: '20px',
   background:
     theme.palette.mode === 'light'
       ? theme.palette.background.default