fix: notebooks single stat view stays in place when users configure (#3560)

Author: appletreeisyellow

src/flows/pipes/Notification/readOnly.tsx

@@ -11,7 +11,7 @@ import {
   ComponentSize,
   Panel,
   AlignItems,
-  Dropdown,
+  List,
   InfluxColors,
   TechnoSpinner,
   SpinnerContainer,
@@ -143,13 +143,13 @@ const ReadOnly: FC<PipeProp> = ({Context}) => {
                     <Form.Element
                       required={true}
                       label="Endpoint"
-                      className="endpoint-dropdown--element"
+                      className="endpoint-list--element"
                     >
-                      <Dropdown.Menu className="flows-endpoints--dropdown">
-                        <Dropdown.Item selected={true}>
+                      <List>
+                        <List.Item selected={true}>
                           {ENDPOINT_DEFINITIONS[data.endpoint].name}
-                        </Dropdown.Item>
-                      </Dropdown.Menu>
+                        </List.Item>
+                      </List>
                     </Form.Element>
                     <FlexBox.Child grow={1} shrink={1}>
                       <Form.Element

src/flows/pipes/Notification/styles.scss

@@ -1,8 +1,3 @@
-.flows-endpoints--dropdown {
-  background: #181820;
-  height: 100%;
-}
-
 .slack-endpoint-details--flex {
   display: flex;
   flex-direction: column;
@@ -56,7 +51,7 @@
   padding: 8px;
 }
 
-.endpoint-dropdown--element {
+.endpoint-list--element {
   flex: 1;
   max-width: 14%;
 }

src/flows/pipes/Notification/view.tsx

@@ -23,7 +23,7 @@ import {
   Panel,
   AlignItems,
   JustifyContent,
-  Dropdown,
+  List,
   ComponentColor,
   Button,
   InfluxColors,
@@ -247,15 +247,15 @@ const Notification: FC<PipeProp> = ({Context}) => {
     )
     .sort((a, b) => ENDPOINT_ORDER.indexOf(a) - ENDPOINT_ORDER.indexOf(b))
     .map(k => (
-      <Dropdown.Item
+      <List.Item
         key={k}
         id={k}
         testID={`dropdown-item--${k}`}
         onClick={() => updateEndpoint(k)}
         selected={data.endpoint === k}
       >
         {ENDPOINT_DEFINITIONS[k].name}
-      </Dropdown.Item>
+      </List.Item>
     ))
 
   const generateDeadmanTask = useCallback(() => {
@@ -646,14 +646,9 @@ ${ENDPOINT_DEFINITIONS[data.endpoint]?.generateTestQuery(data.endpointData)}`
                     <Form.Element
                       required={true}
                       label="Endpoint"
-                      className="endpoint-dropdown--element"
+                      className="endpoint-list--element"
                     >
-                      <Dropdown.Menu
-                        className="flows-endpoints--dropdown"
-                        maxHeight={500}
-                      >
-                        {avail}
-                      </Dropdown.Menu>
+                      <List>{avail}</List>
                     </Form.Element>
                     <FlexBox.Child grow={1} shrink={1}>
                       <Form.Element