diff --git a/changes/11034-select-query-modal-style-bugs b/changes/11034-select-query-modal-style-bugs new file mode 100644 index 0000000000..17e2c85721 --- /dev/null +++ b/changes/11034-select-query-modal-style-bugs @@ -0,0 +1,3 @@ +- Fix styling bugs on the SelectQueryModal: + - y-misaligned "OR" + - x- and y-misaligned query list diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss index c79318e2b2..f188e2a581 100644 --- a/frontend/components/buttons/Button/_styles.scss +++ b/frontend/components/buttons/Button/_styles.scss @@ -12,7 +12,7 @@ $base-class: "button"; @if $inverse { &:hover { - background-color: rgba(#192147, .05); + background-color: rgba(#192147, 0.05); &:active { background-color: $ui-fleet-black-10; @@ -34,7 +34,6 @@ $base-class: "button"; border-radius: 6px; } } - } @else { &:hover:not(.button--disabled) { background-color: $hover; @@ -45,7 +44,7 @@ $base-class: "button"; } &:focus-visible { - @include button-focus-outline() + @include button-focus-outline(); } } } @@ -355,6 +354,8 @@ $base-class: "button"; display: flex; width: 100%; flex-direction: column; + gap: $pad-xsmall; + align-items: flex-start; .info { &__header { @@ -366,7 +367,6 @@ $base-class: "button"; width: 100%; font-weight: normal; text-align: left; - margin-top: 10px; } } } diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx index b5b3b90080..c7ac2cea7e 100644 --- a/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx +++ b/frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx @@ -106,19 +106,21 @@ const SelectQueryModal = ({ ); }); return (
-
+
-
+