Repository: provectus/kafka-ui
Issue: Too short visible list for Schema compatibility level selector
Labels: type/bug
scope/frontend
status/accepted
status/confirmed
type/regression

### Is your proposal related to a problem?

<!--
  Provide a clear and concise description of what the problem is.
  For example, "I'm always frustrated when..."
-->

(Write your answer here.)
There is list of 3 levels (other are invisible) on Schema overview and Schema Edit pages (see attachment)
 There is a scroll slider there but it`s not visible by default.

### Describe the solution you'd like

<!--
  Provide a clear and concise description of what you want to happen.
-->

(Describe your proposed solution here.)
Make the scroll slider visible by default for the selector of Schema Compatibility level
### Describe alternatives you've considered

<!--
  Let us know about other solutions you've tried or researched.
-->

(Write your answer here.)

### Additional context

<!--
  Is there anything else you can add about the proposal?
  You might want to link to related issues here, if you haven't already.
-->

(Write your answer here.)
<img width="1499" alt="Screenshot 2022-01-31 at 10 59 34" src="https://user-images.githubusercontent.com/92585878/151766141-5bd8aa5d-414d-4a14-8a1d-cb4b3de6acac.png">


Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
index 0f83bd30884..282738e8de0 100644
--- a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
+++ b/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",
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
index fb75a98ba78..84e17d8d92c 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
+++ b/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",
diff --git a/kafka-ui-react-app/src/components/common/Select/Select.styled.ts b/kafka-ui-react-app/src/components/common/Select/Select.styled.ts
index 67df6d86f7c..dd5f730d72b 100644
--- a/kafka-ui-react-app/src/components/common/Select/Select.styled.ts
+++ b/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>`
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index b480a657767..4edae75f6ae 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/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: {


Test patch: