Merge pull request #828 from amitamrutiya/update-performer

Change the width of the scrollbar for catalog modal
layer5io · Nov 28, 2024 · bf2512e · bf2512e
2 parents f90d63a + 1945e7e
commit bf2512e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/custom/CatalogFilterSection/FilterSection.tsx b/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 && (

diff --git a/src/custom/CatalogFilterSection/style.tsx b/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')(() => ({

diff --git a/src/custom/PerformersSection/styles.tsx b/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'
@@ -181,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,
@@ -203,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 }) => ({