Merge branch 'layer5io:master' into master

Author: amitamrutiya

src/custom/CatalogFilterSection/FilterSection.tsx

@@ -76,7 +76,10 @@ const FilterSection: React.FC<FilterSectionProps> = ({
             sx={{
               overflowY: 'auto',
               maxHeight: '25rem',
-              backgroundColor: styleProps.backgroundColor
+              backgroundColor: styleProps.backgroundColor,
+              '&::-webkit-scrollbar': {
+                width: '6px'
+              }
             }}
           >
             {showSearch && (

src/custom/CatalogFilterSection/style.tsx

@@ -16,7 +16,10 @@ export const FiltersCardDiv = styled(Box)<{ styleProps: StyleProps }>(({ stylePr
   ['@media (max-width:900px)']: {
     display: 'none'
   },
-  fontFamily: styleProps.fontFamily
+  fontFamily: styleProps.fontFamily,
+  '&::-webkit-scrollbar': {
+    width: '6px'
+  }
 }));
 
 export const FilterDrawerDiv = styled('div')(() => ({

src/custom/PerformersSection/PerformersSection.tsx

@@ -48,6 +48,7 @@ interface BaseQueryParams {
 
 interface StatCardProps {
   label: string;
+  countKey: string;
   count: number;
   patternName: string;
   pattern: Pattern;
@@ -57,7 +58,7 @@ interface StatCardProps {
   status: string;
   id: string;
   onCardClick: (pattern: Pattern) => void;
-  onIconClick: () => void;
+  onIconClick: (sortOrder: string) => void;
   onAuthorClick: (userId: string) => void;
   onStatusClick: (status: string) => void;
 }
@@ -121,6 +122,7 @@ const createQueryParams = (metric: MetricType): BaseQueryParams => ({
 
 const StatCardComponent: React.FC<StatCardProps> = ({
   label,
+  countKey,
   count,
   patternName,
   pattern,
@@ -138,9 +140,9 @@ const StatCardComponent: React.FC<StatCardProps> = ({
     onCardClick(pattern);
   };
 
-  const handleIconClick = (e: React.MouseEvent) => {
+  const handleIconClick = (e: React.MouseEvent, sortOrder: string) => {
     e.stopPropagation();
-    onIconClick();
+    onIconClick(sortOrder);
   };
 
   const handleAuthorClick = (e: React.MouseEvent) => {
@@ -158,7 +160,7 @@ const StatCardComponent: React.FC<StatCardProps> = ({
       <ContentWrapper cardId={id}>
         <HeaderSection>
           <HeaderTitle>{label}</HeaderTitle>
-          <IconContainer onClick={handleIconClick}>
+          <IconContainer onClick={(e) => handleIconClick(e, `${countKey}+desc`)}>
             <Icon className={id} />
           </IconContainer>
         </HeaderSection>
@@ -238,6 +240,7 @@ const processQueryData = (
 
   return {
     label: config.label,
+    countKey: config.countKey,
     count: pattern[config.countKey],
     patternName: pattern.name || 'Unknown',
     pattern: pattern,

src/custom/PerformersSection/styles.tsx

@@ -73,7 +73,6 @@ export const MainContainer = styled(Box)(({ theme }) => ({
       : theme.palette.background.secondary,
   paddingTop: theme.spacing(2),
   borderRadius: '1rem',
-  marginBottom: theme.spacing(4),
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column'
@@ -137,22 +136,21 @@ export const IconContainer = styled(Box)(() => ({
   }
 }));
 
-export const ContentWrapper = styled(CardContent)<ContentWrapperProps>(({ cardId, theme }) => ({
+export const ContentWrapper = styled(CardContent)<ContentWrapperProps>(() => ({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
-  padding: theme.spacing(2),
-  paddingInline: cardId === 'download-icon' ? '12px' : theme.spacing(2),
+  padding: '12px',
   '&:last-child': {
-    paddingBottom: theme.spacing(2)
+    paddingBottom: '12px'
   }
 }));
 
 export const HeaderSection = styled(Box)({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'flex-start',
-  marginBottom: '1rem',
+  marginBottom: '0.5rem',
   gap: '0.6rem'
 });
 
@@ -163,7 +161,14 @@ export const HeaderTitle = styled(Typography)(({ theme }) => ({
   lineHeight: 1.2,
   marginTop: '4px',
   textTransform: 'uppercase',
-  letterSpacing: '0.5px'
+  letterSpacing: '0.5px',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  textOverflow: 'clip',
+  maxWidth: '70%',
+  height: '2.4em'
 }));
 
 export const StatsValue = styled(Typography)(({ theme }) => ({
@@ -175,7 +180,7 @@ export const StatsValue = styled(Typography)(({ theme }) => ({
 }));
 
 export const RepoSection = styled(Box)(({ theme }) => ({
-  marginBlock: '.35rem',
+  marginBottom: '1rem',
   padding: '8px',
   borderRadius: '8px',
   background: theme.palette.mode === 'light' ? '#f8fafc' : DARK_TEAL,
@@ -197,7 +202,8 @@ export const RepoTitle = styled(Typography)(({ theme }) => ({
   WebkitBoxOrient: 'vertical',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  height: '2.6em'
+  minHeight: 'fit-content',
+  maxHeight: '2.6em'
 }));
 
 export const UserNameText = styled(Typography)(({ theme }) => ({