[Fixes #1520] Too short visible list for Schema compatibility level selector (#1524)

* Updates Select styles to always show scrollbar on webkit

Co-authored-by: Damir Abdulganiev <dabdulganiev@provectus.com>

kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -335,6 +335,11 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "hover": "#171A1C",
           "normal": "#171A1C",
         },
+        "optionList": Object {
+          "scrollbar": Object {
+            "backgroundColor": "#ABB5BA",
+          },
+        },
       },
       "switch": Object {
         "checked": "#29A352",

kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap

@@ -342,6 +342,11 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "hover": "#171A1C",
           "normal": "#171A1C",
         },
+        "optionList": Object {
+          "scrollbar": Object {
+            "backgroundColor": "#ABB5BA",
+          },
+        },
       },
       "switch": Object {
         "checked": "#29A352",

kafka-ui-react-app/src/components/common/Select/Select.styled.ts

@@ -70,6 +70,17 @@ export const OptionList = styled.ul`
   color: ${(props) => props.theme.select.color.normal};
   overflow-y: scroll;
   z-index: 10;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: ${(props) =>
+      props.theme.select.optionList.scrollbar.backgroundColor};
+  }
 `;
 
 export const Option = styled.li<OptionProps>`

kafka-ui-react-app/src/theme/theme.ts

@@ -240,6 +240,11 @@ const theme = {
       active: Colors.neutral[70],
       disabled: Colors.neutral[10],
     },
+    optionList: {
+      scrollbar: {
+        backgroundColor: Colors.neutral[30],
+      },
+    },
   },
   input: {
     borderColor: {