change scroller bg color

src/components/Group/GroupInvites.tsx

@@ -125,6 +125,7 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
             maxHeight: "300px",
             overflow: "auto",
           }}
+          className="scrollable-container"
         >
           {groupsWithJoinRequests?.map((group) => {
             return (

src/components/Group/GroupJoinRequests.tsx

@@ -172,7 +172,7 @@ export const GroupJoinRequests = ({ myAddress, groups, setOpenManageMembers, get
     </Typography>
   </Box>
     )}
-    <List sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
+    <List className="scrollable-container" sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper", maxHeight: '300px', overflow: 'auto' }}>
       {filteredJoinRequests?.map((group)=> {
         if(group?.data?.length === 0) return null
         return (

src/components/Group/ListOfGroupPromotions.tsx

@@ -685,6 +685,7 @@ export const ListOfGroupPromotions = () => {
                 rowHeight={cache.rowHeight}
                 rowRenderer={rowRenderer}
                 deferredMeasurementCache={cache}
+                className="scrollable-container"
               />
             )}
           </AutoSizer>

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -135,6 +135,7 @@ export const ListOfThreadPostsWatched = () => {
         )}
         {posts?.length > 0 && (
                <List
+               className="scrollable-container"
                sx={{
                  width: "100%",
                  maxWidth: 360,

src/components/Group/QMailMessages.tsx

@@ -129,6 +129,7 @@ export const QMailMessages = ({userName, userAddress}) => {
     </Box>
 
     <Box
+    className="scrollable-container"
       sx={{
         width: "322px",
         height: isMobile ? "165px" : "250px",