Fleet UI: Fix styling on query modal buttons (#7756)

changes/bug-7757-select-query-styling

@@ -0,0 +1 @@
+- Fix styling of select a query modal on the host details page

frontend/components/buttons/Button/_styles.scss

@@ -52,6 +52,16 @@ $base-class: "button";
     outline: none;
   }
 
+  .transparent-text {
+    opacity: 0;
+  }
+
+  .children-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
   &--brand {
     @include button-variant(
       $core-vibrant-blue,
@@ -324,6 +334,27 @@ $base-class: "button";
       background-color: $ui-vibrant-blue-10;
       box-shadow: none;
     }
+
+    .children-wrapper {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+
+      .info {
+        &__header {
+          display: block;
+          width: 100%;
+          text-align: left;
+        }
+        &__data {
+          display: block;
+          width: 100%;
+          font-weight: normal;
+          text-align: left;
+          margin-top: 10px;
+        }
+      }
+    }
   }
 
   &--contextual-nav-item {
@@ -331,14 +362,4 @@ $base-class: "button";
     display: flex;
     justify-content: space-between;
   }
-
-  .transparent-text {
-    opacity: 0;
-  }
-
-  .children-wrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
 }

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

@@ -5,27 +5,6 @@
     width: 658px;
     padding: $pad-xxlarge;
     border-radius: $pad-small;
-
-    .info {
-      display: flex;
-      flex-direction: column;
-
-      &__header {
-        display: block;
-        color: $core-fleet-black;
-        font-weight: $bold;
-        font-size: $x-small;
-        text-align: left;
-      }
-      &__data {
-        display: block;
-        color: $core-fleet-black;
-        font-weight: normal;
-        font-size: $x-small;
-        text-align: left;
-        margin-top: 10px;
-      }
-    }
   }
 
   &__no-queries {
@@ -72,6 +51,8 @@
   }
 
   &__create-query {
+    display: flex;
+
     span {
       margin: 15px;
       font-weight: bold;

frontend/pages/policies/ManagePoliciesPage/components/AddPolicyModal/_styles.scss

@@ -7,24 +7,5 @@
 
   &__policy-selection {
     padding: $pad-large 0;
-
-    .children-wrapper {
-      display: block;
-    }
-
-    .info {
-      display: flex;
-
-      &__header {
-        display: block;
-        text-align: left;
-      }
-      &__data {
-        display: block;
-        font-weight: normal;
-        text-align: left;
-        margin-top: 10px;
-      }
-    }
   }
 }