diff --git a/ui/src/Components/Accordion/index.js b/ui/src/Components/Accordion/index.js index 4692b6aba..4a86a5fb0 100644 --- a/ui/src/Components/Accordion/index.js +++ b/ui/src/Components/Accordion/index.js @@ -6,6 +6,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp"; import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown"; +import "./index.scss"; + const Trigger = ({ text, isOpen }) => (
{text}
@@ -25,7 +27,7 @@ const Accordion = ({ text, content, extraProps }) => ( overflowWhenOpen="visible" className="card" openedClassName="card" - triggerClassName="card-header cursor-pointer" + triggerClassName="card-header cursor-pointer border-bottom-0" triggerOpenedClassName="card-header cursor-pointer bg-light" contentOuterClassName="collapse show" contentInnerClassName="card-body my-2" diff --git a/ui/src/Components/Accordion/index.scss b/ui/src/Components/Accordion/index.scss new file mode 100644 index 000000000..5bd4b051e --- /dev/null +++ b/ui/src/Components/Accordion/index.scss @@ -0,0 +1,3 @@ +.accordion > .Collapsible.card { + overflow: unset; +} diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js index e6820a9e9..51fde4c2c 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.js @@ -64,7 +64,6 @@ const AlertGroupCollapseConfiguration = observer( )} options={Object.values(settingsStore.alertGroupConfig.options)} onChange={this.onCollapseChange} - menuPosition="fixed" hideSelectedOptions />
diff --git a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js index e16d6bbc5..ad8deeb65 100644 --- a/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js +++ b/ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.js @@ -75,7 +75,6 @@ const AlertGroupSortConfiguration = observer( )} options={Object.values(settingsStore.gridConfig.options)} onChange={this.onSortOrderChange} - menuPosition="fixed" hideSelectedOptions /> diff --git a/ui/src/Components/MainModal/Configuration/SortLabelName.js b/ui/src/Components/MainModal/Configuration/SortLabelName.js index 096b3f6aa..e6fafa75f 100644 --- a/ui/src/Components/MainModal/Configuration/SortLabelName.js +++ b/ui/src/Components/MainModal/Configuration/SortLabelName.js @@ -79,7 +79,6 @@ const SortLabelName = observer( )} options={this.suggestions.names} onChange={this.onChange} - menuPosition="fixed" /> ); } diff --git a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap index 0e0243e7f..86dced59d 100644 --- a/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap +++ b/ui/src/Components/MainModal/Configuration/__snapshots__/index.test.js.snap @@ -75,7 +75,7 @@ exports[` matches snapshot 1`] = `
-
+
Filter bar configuration @@ -123,7 +123,7 @@ exports[` matches snapshot 1`] = `
-
+
Alert group titlebar configuration @@ -170,7 +170,7 @@ exports[` matches snapshot 1`] = `
-
+
Minimal alert group width @@ -241,7 +241,7 @@ exports[` matches snapshot 1`] = `
-
+
Default number of alerts to show per group @@ -312,7 +312,7 @@ exports[` matches snapshot 1`] = `
-
+
Default alert group display @@ -391,7 +391,7 @@ exports[` matches snapshot 1`] = `
-
+
Grid sort order diff --git a/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap b/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap index c7e4d8478..95733eb9e 100644 --- a/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap +++ b/ui/src/Components/MainModal/__snapshots__/Help.test.js.snap @@ -163,7 +163,7 @@ exports[` matches snapshot 1`] = `
-
+
Filtering using alert labels @@ -339,7 +339,7 @@ exports[` matches snapshot 1`] = `
-
+
Filtering alerts using special filters diff --git a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap index 50139a1a0..3b206bac3 100644 --- a/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap +++ b/ui/src/Components/MainModal/__snapshots__/MainModalContent.test.js.snap @@ -94,7 +94,7 @@ exports[` matches snapshot 1`] = `
-
+
Filter bar configuration @@ -142,7 +142,7 @@ exports[` matches snapshot 1`] = `
-
+
Alert group titlebar configuration @@ -189,7 +189,7 @@ exports[` matches snapshot 1`] = `
-
+
Minimal alert group width @@ -260,7 +260,7 @@ exports[` matches snapshot 1`] = `
-
+
Default number of alerts to show per group @@ -331,7 +331,7 @@ exports[` matches snapshot 1`] = `
-
+
Default alert group display @@ -410,7 +410,7 @@ exports[` matches snapshot 1`] = `
-
+
Grid sort order diff --git a/ui/src/Components/MultiSelect/index.js b/ui/src/Components/MultiSelect/index.js index 1ff4cdc12..c34e37467 100644 --- a/ui/src/Components/MultiSelect/index.js +++ b/ui/src/Components/MultiSelect/index.js @@ -80,7 +80,7 @@ const ReactSelectStyles = { }), menu: (base, state) => ({ ...base, - zIndex: 100 + zIndex: 1500 }), option: (base, state) => ({ ...base,