Select query style bugs (#11043)

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

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;
         }
       }
     }

frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/SelectQueryModal.tsx

@@ -106,19 +106,21 @@ const SelectQueryModal = ({
           <Button
             key={query.id}
             variant="unstyled-modal-query"
-            className="modal-query-button"
+            className={`${baseClass}__modal-query-button`}
             onClick={() => onQueryHostSaved(query)}
           >
             <>
               <span className="info__header">{query.name}</span>
+              {query.description && (
                 <span className="info__data">{query.description}</span>
+              )}
             </>
           </Button>
         );
       });
       return (
         <div>
-          <div className={`${baseClass}__query-modal`}>
+          <div className={`${baseClass}__filter-create-wrapper`}>
             <div className={`${baseClass}__filter-queries`}>
               <InputField
                 name="query-filter"
@@ -143,7 +145,7 @@ const SelectQueryModal = ({
     if (queriesFilter && queriesCount === 0) {
       return (
         <div>
-          <div className={`${baseClass}__query-modal`}>
+          <div className={`${baseClass}__filter-create-wrapper`}>
             <div className={`${baseClass}__filter-queries`}>
               <InputField
                 name="query-filter"

frontend/pages/hosts/details/HostDetailsPage/modals/SelectQueryModal/_styles.scss

@@ -10,7 +10,7 @@
     }
   }
 
-  &__modal{
+  &__modal {
     .info {
       &__header {
         display: block;
@@ -26,7 +26,6 @@
         font-weight: normal;
         font-size: $x-small;
         text-align: center;
-        margin-top: 10px;
       }
     }
     .modal-cta-wrap {
@@ -34,8 +33,10 @@
     }
   }
 
-  &__query-modal {
+  &__filter-create-wrapper {
     display: flex;
+    align-items: center;
+    margin-bottom: 1.5rem;
   }
 
   &__filter-queries {
@@ -53,6 +54,10 @@
       left: 8px;
     }
 
+    .form-field {
+      margin-bottom: 0;
+    }
+
     .input-field {
       padding-left: 44px;
     }
@@ -68,6 +73,7 @@
 
   &__create-query {
     display: flex;
+    align-items: center;
 
     span {
       margin: 15px;