Fixed issue where color panel git cut off in value selector (#664)

webapp/src/widgets/valueSelector.scss

@@ -7,6 +7,7 @@
     > .Label {
         margin: 0 10px;
         max-width: calc(100% - 10px);
+
         &.empty {
             color: rgba(var(--body-color), 0.6);
         }
@@ -41,21 +42,32 @@
         width: 100%;
         justify-content: center;
         align-items: center;
+
         .label-container {
             flex-grow: 1;
             display: flex;
         }
+
         .MenuWrapper {
             display: flex;
             align-self: flex-end;
+
             .IconButton {
                 background-color: unset;
+
                 &:hover {
                     background-color: rgba(var(--body-color), 0.1);
                 }
             }
         }
     }
+
+    div:nth-child(3) {
+        div {
+            overflow-y: unset;
+            overflow-x: unset;
+        }
+    }
 }
 
 .label-container > .Label {

webapp/src/widgets/valueSelector.tsx

@@ -126,13 +126,19 @@ const valueSelectorStyle = {
     multiValueRemove: (): CSSObject => ({
         display: 'none',
     }),
+    menu: (provided: CSSObject): CSSObject => ({
+        ...provided,
+        width: 'unset',
+        background: 'rgb(var(--main-bg))',
+        minWidth: '260px',
+    }),
 }
 
 function ValueSelector(props: Props): JSX.Element {
     return (
         <CreatableSelect
             captureMenuScroll={true}
-            maxMenuHeight={580}
+            maxMenuHeight={1200}
             isMulti={props.isMulti}
             isClearable={true}
             styles={valueSelectorStyle}