Merge pull request #2393 from Particular/john/style-note

Align note style with already established styles

Author: johnsimons

src/Frontend/src/components/audit/AuditList.vue

@@ -159,11 +159,6 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
       <div class="row">
         <FiltersPanel />
       </div>
-      <div class="row">
-        <div class="col format-showing-tip">
-          <div>Use <i class="fa fa-asterisk asterisk" /> as a wildcard. Eg: <i class="fa fa-asterisk asterisk"></i>World! or Hello<i class="fa fa-asterisk asterisk"></i> finds Hello World!</div>
-        </div>
-      </div>
       <div class="row">
         <ResultsCount :displayed="messages.length" :total="totalCount" />
       </div>
@@ -302,9 +297,4 @@ watch(autoRefreshValue, (newValue) => dataRetriever.updateTimeout(newValue));
 .retry-issued {
   background-image: url("@/assets/status_retry_issued.svg");
 }
-.format-showing-tip {
-  display: flex;
-  align-items: flex-end;
-  font-style: italic;
-}
 </style>

src/Frontend/src/components/audit/FiltersPanel.vue

@@ -60,6 +60,7 @@ function findKeyByValue(searchValue: string) {
       <div class="filter-label"></div>
       <div class="filter-component text-search-container">
         <FilterInput v-model="messageFilterString" placeholder="Search messages..." aria-label="Search messages" />
+        <div class="note">Use <i class="fa fa-asterisk asterisk" /> as a wildcard. Eg: <i class="fa fa-asterisk asterisk"></i>World! or Hello<i class="fa fa-asterisk asterisk"></i> finds Hello World!</div>
       </div>
     </div>
     <div class="filter">
@@ -102,7 +103,7 @@ function findKeyByValue(searchValue: string) {
 
 .filter {
   display: flex;
-  align-items: center;
+  align-items: start;
 }
 
 .filter:last-child {
@@ -112,9 +113,14 @@ function findKeyByValue(searchValue: string) {
 
 .filter-label {
   font-weight: bold;
+  padding-block: 0.375rem;
 }
 
 .text-search-container {
   width: 25rem;
 }
+.note {
+  font-size: 0.875em;
+  color: var(--bs-secondary-color);
+}
 </style>