use small scrollbars on variant items

lib/components/ViewPublicationPage/questions/Emoji.tsx

@@ -34,7 +34,11 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
 
     return (
         <Box>
-            <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
+            <Typography
+                variant="h5"
+                color={theme.palette.text.primary}
+                sx={{ wordBreak: "break-word" }}
+            >{currentQuestion.title}</Typography>
             <RadioGroup
                 name={currentQuestion.id}
                 value={currentQuestion.content.variants.findIndex(
@@ -109,6 +113,12 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
                                         height: variant.answer.length <= 60 ? undefined : "60px",
                                         overflow: "auto",
                                         paddingLeft: "45px",
+                                        "&::-webkit-scrollbar": {
+                                            width: "4px",
+                                        },
+                                        "&::-webkit-scrollbar-thumb": {
+                                            backgroundColor: "#b8babf",
+                                        }
                                     },
                                 }}
                                 value={index}
@@ -166,5 +176,4 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
             </RadioGroup>
         </Box>
     );
-
 };

lib/components/ViewPublicationPage/questions/Images.tsx

@@ -138,6 +138,12 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
                                         height: variant.answer.length <= 60 ? undefined : "60px",
                                         overflow: "auto",
                                         paddingLeft: "45px",
+                                        "&::-webkit-scrollbar": {
+                                            width: "4px",
+                                        },
+                                        "&::-webkit-scrollbar-thumb": {
+                                            backgroundColor: "#b8babf",
+                                        }
                                     },
                                 }}
                                 value={index}

lib/components/ViewPublicationPage/questions/Variant.tsx

@@ -168,6 +168,12 @@ const VariantItem = ({
                     wordBreak: "break-word",
                     height: variant.answer.length <= 60 ? undefined : "60px",
                     overflow: "auto",
+                    "&::-webkit-scrollbar": {
+                        width: "4px",
+                    },
+                    "&::-webkit-scrollbar-thumb": {
+                        backgroundColor: "#b8babf",
+                    }
                 }
             }}
             value={index}

lib/components/ViewPublicationPage/questions/Varimg.tsx

@@ -80,6 +80,12 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
                                         height: variant.answer.length <= 60 ? undefined : "60px",
                                         overflow: "auto",
                                         paddingLeft: "45px",
+                                        "&::-webkit-scrollbar": {
+                                            width: "4px",
+                                        },
+                                        "&::-webkit-scrollbar-thumb": {
+                                            backgroundColor: "#b8babf",
+                                        }
                                     }
                                 }}
                                 value={index}