From b0d28dad6ad9225fba14c4a16414eec6814da94c Mon Sep 17 00:00:00 2001
From: Nastya <nastyab015@yandex.ru>
Date: Thu, 26 Sep 2024 22:12:11 +0300
Subject: [PATCH] fix scrollbar

---
 .../questions/Emoji/EmojiVariant.tsx                |  6 +++++-
 .../questions/Images/ImageVariant.tsx               |  2 ++
 .../questions/Variant/VariantItem.tsx               | 12 +++++++++---
 .../questions/Varimg/VarimgVariant.tsx              | 13 ++++++++++---
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
index c204020..b6f9e72 100644
--- a/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
+++ b/lib/components/ViewPublicationPage/questions/Emoji/EmojiVariant.tsx
@@ -65,6 +65,7 @@ const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputP
           "&::-webkit-scrollbar-thumb": {
             backgroundColor: theme.palette.primary.main,
           },
+          scrollbarColor: theme.palette.primary.main,
         }}
         value={ownAnswer}
         onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
@@ -187,10 +188,13 @@ export const EmojiVariant = ({
             wordBreak: "break-word",
             height: variant.answer.length <= 60 ? undefined : "60px",
             overflow: "auto",
-            "&::-webkit-scrollbar": { width: "4px" },
+            "&::-webkit-scrollbar": {
+              width: "4px",
+            },
             "&::-webkit-scrollbar-thumb": {
               backgroundColor: theme.palette.primary.main,
             },
+            scrollbarColor: theme.palette.primary.main,
           },
           "& .MuiFormControlLabel-label.Mui-disabled": {
             color: theme.palette.text.primary,
diff --git a/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx b/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx
index ae6b722..72eba2c 100644
--- a/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx
+++ b/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx
@@ -52,6 +52,7 @@ const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputP
           "&::-webkit-scrollbar-thumb": {
             backgroundColor: theme.palette.primary.main,
           },
+          scrollbarColor: theme.palette.primary.main,
         }}
         value={ownAnswer}
         onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
@@ -176,6 +177,7 @@ export const ImageVariant = ({
             "&::-webkit-scrollbar-thumb": {
               backgroundColor: theme.palette.primary.main,
             },
+            scrollbarColor: theme.palette.primary.main,
           },
         }}
         value={index}
diff --git a/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx b/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx
index d02e143..8164ac7 100644
--- a/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx
+++ b/lib/components/ViewPublicationPage/questions/Variant/VariantItem.tsx
@@ -49,8 +49,9 @@ const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputP
           width: "4px",
         },
         "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "#b8babf",
+          backgroundColor: theme.palette.primary.main,
         },
+        scrollbarColor: theme.palette.primary.main,
       }}
       value={ownAnswer}
       onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
@@ -154,8 +155,13 @@ export const VariantItem = ({
           height: variant.answer.length <= 60 ? undefined : "60px",
           overflow: "auto",
           lineHeight: "normal",
-          "&::-webkit-scrollbar": { width: "4px" },
-          "&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
+          "&::-webkit-scrollbar": {
+            width: "4px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: theme.palette.primary.main,
+          },
+          scrollbarColor: theme.palette.primary.main,
         },
         "& .MuiFormControlLabel-label.Mui-disabled": {
           color: theme.palette.text.primary,
diff --git a/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx b/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx
index 1437471..6269dbd 100644
--- a/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx
+++ b/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx
@@ -50,8 +50,10 @@ const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputP
           width: "4px",
         },
         "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "#b8babf",
+          backgroundColor: theme.palette.primary.main,
         },
+        scrollbarColor: theme.palette.primary.main,
+        maxHeight: "44px",
       }}
       value={ownAnswer}
       onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
@@ -130,8 +132,13 @@ export const VarimgVariant = ({
           overflow: "auto",
           lineHeight: "normal",
           width: "100%",
-          "&::-webkit-scrollbar": { width: "4px" },
-          "&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
+          "&::-webkit-scrollbar": {
+            width: "4px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: theme.palette.primary.main,
+          },
+          scrollbarColor: theme.palette.primary.main,
         },
         "& .MuiFormControlLabel-label.Mui-disabled": {
           color: theme.palette.text.primary,