fix dropdown

Author: yilinxia

src/lib/consts.ts

@@ -114,6 +114,16 @@ export const RANGE_STYLE = {
 };
 export const DEFAULT_SELECT_PROPS = {
   classNamePrefix: "react-select",
+  styles: {
+    menu: (provided: any) => ({
+      ...provided,
+      zIndex: 9999,
+    }),
+    menuPortal: (provided: any) => ({
+      ...provided,
+      zIndex: 9999,
+    }),
+  },
 };
 export const DEFAULT_LINKIFY_PROPS: Partial<LinkifyProps> = {
   textDecorator: (str) => str.replace(/^https?:\/\//, ""),

src/styles/_base.scss

@@ -152,13 +152,14 @@ input::-webkit-inner-spin-button {
  * Vendors:
  */
 .react-select__menu-portal {
-  z-index: $zindex-tooltip !important;
+  z-index: 9999 !important;
 }
 .react-select__control {
   border-color: black !important;
 }
 .react-select__menu {
   margin-bottom: 1em;
+  z-index: 9999 !important;
 }
 .react-select__menu-list {
   @extend .custom-scrollbar;

src/views/ReadabilityBlock.tsx

@@ -8,19 +8,14 @@ import { VscSettings } from "react-icons/vsc";
 import Select from "react-select";
 
 import {
-  DEFAULT_EDGE_SIZE_RATIO,
   DEFAULT_LABEL_SIZE,
   DEFAULT_LABEL_THRESHOLD,
-  DEFAULT_NODE_SIZE_RATIO,
   LABEL_SIZE_STEP,
   LABEL_THRESHOLD_STEP,
   MAX_LABEL_SIZE,
   MAX_LABEL_THRESHOLD,
-  MAX_NODE_SIZE_RATIO,
   MIN_LABEL_SIZE,
   MIN_LABEL_THRESHOLD,
-  MIN_NODE_SIZE_RATIO,
-  NODE_SIZE_RATIO_STEP,
   RANGE_STYLE,
   SLIDER_STYLE,
   DEFAULT_SELECT_PROPS,
@@ -36,13 +31,11 @@ interface Option {
 
 const ReadabilityBlock: FC = () => {
   // const { navState, setNavState } = useContext(GraphContext);
-  const { navState, setNavState, showEditionPanel, setShowEditionPanel, setShowEdgePanel, data } = useContext(GraphContext);
+  const { navState, setNavState, setShowEditionPanel, setShowEdgePanel, data } = useContext(GraphContext);
   const [initialNavState] = useState<NavState>(navState);
 
   const minLabelSize = typeof navState.minLabelSize === "number" ? navState.minLabelSize : DEFAULT_LABEL_SIZE;
   const maxLabelSize = typeof navState.maxLabelSize === "number" ? navState.maxLabelSize : DEFAULT_LABEL_SIZE;
-  const nodeSizeRatio = typeof navState.nodeSizeRatio === "number" ? navState.nodeSizeRatio : DEFAULT_NODE_SIZE_RATIO;
-  const edgeSizeRatio = typeof navState.edgeSizeRatio === "number" ? navState.edgeSizeRatio : DEFAULT_EDGE_SIZE_RATIO;
   const labelThresholdRatio =
     typeof navState.labelThresholdRatio === "number" ? navState.labelThresholdRatio : DEFAULT_LABEL_THRESHOLD;
 
@@ -144,7 +137,7 @@ const ReadabilityBlock: FC = () => {
             <FaTimes /> Restore default
           </button>
         </h3>
-        <div className="pb-3">
+        <div className="pb-3" style={{ marginBottom: '2rem' }}>
           <Select
             {...DEFAULT_SELECT_PROPS}
             isMulti