style: improve layout and alignment of input fields for better UX

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/views/applications/index.vue

@@ -19,52 +19,54 @@
     <sba-wave />
     <section>
       <sba-sticky-subnav>
-        <div class="container mx-auto flex">
-          <ApplicationStats />
-          <sba-confirm-button
-            class="mr-1"
-            :title="$t('applications.actions.refresh_applications')"
-            @click="refreshApplications"
-          >
-            <font-awesome-icon :icon="'rotate-left'" />
-          </sba-confirm-button>
-          <template v-if="groupNames.length > 1">
-            <sba-button-group class="mr-1">
-              <sba-button
-                :title="
-                  $t('applications.actions.switch_to_grouping_by_application')
-                "
-                :disabled="isGroupingFunctionActive('application')"
-                @click="() => setGroupingFunction('application')"
-              >
-                <font-awesome-icon icon="list" />
-              </sba-button>
-              <sba-button
-                :title="$t('applications.actions.switch_to_grouping_by_group')"
-                :disabled="isGroupingFunctionActive('group')"
-                @click="() => setGroupingFunction('group')"
-              >
-                <font-awesome-icon icon="expand" />
-              </sba-button>
-            </sba-button-group>
-          </template>
-          <ApplicationNotificationCenter
-            v-if="hasNotificationFiltersSupport"
-            :notification-filters="notificationFilters"
-            @filter-remove="removeFilter"
-          />
-          <div class="flex-1">
-            <sba-input
-              v-model="routerState.q"
-              :placeholder="t('term.filter')"
-              name="filter"
-              type="search"
+        <div class="container mx-auto flex justify-between">
+          <div class="flex">
+            <ApplicationStats />
+            <sba-confirm-button
+              class="mr-1"
+              :title="$t('applications.actions.refresh_applications')"
+              @click="refreshApplications"
             >
-              <template #prepend>
-                <font-awesome-icon icon="filter" />
-              </template>
-            </sba-input>
+              <font-awesome-icon :icon="'rotate-left'" />
+            </sba-confirm-button>
+            <template v-if="groupNames.length > 1">
+              <sba-button-group class="mr-1">
+                <sba-button
+                  :title="
+                    $t('applications.actions.switch_to_grouping_by_application')
+                  "
+                  :disabled="isGroupingFunctionActive('application')"
+                  @click="() => setGroupingFunction('application')"
+                >
+                  <font-awesome-icon icon="list" />
+                </sba-button>
+                <sba-button
+                  :title="
+                    $t('applications.actions.switch_to_grouping_by_group')
+                  "
+                  :disabled="isGroupingFunctionActive('group')"
+                  @click="() => setGroupingFunction('group')"
+                >
+                  <font-awesome-icon icon="expand" />
+                </sba-button>
+              </sba-button-group>
+            </template>
+            <ApplicationNotificationCenter
+              v-if="hasNotificationFiltersSupport"
+              :notification-filters="notificationFilters"
+              @filter-remove="removeFilter"
+            />
           </div>
+          <sba-input
+            v-model="routerState.q"
+            :placeholder="t('term.filter')"
+            name="filter"
+            type="search"
+          >
+            <template #prepend>
+              <font-awesome-icon icon="filter" />
+            </template>
+          </sba-input>
         </div>
       </sba-sticky-subnav>
 

spring-boot-admin-server-ui/src/main/frontend/views/instances/auditevents/index.vue

@@ -18,7 +18,7 @@
   <sba-instance-section :error="error" :loading="isLoading">
     <template #before>
       <sba-sticky-subnav>
-        <div class="flex gap-2">
+        <div class="flex gap-2 justify-end">
           <sba-input
             v-model.trim="filter.principal"
             :placeholder="$t('instances.auditevents.principal')"

spring-boot-admin-server-ui/src/main/frontend/views/instances/beans/index.vue

@@ -20,6 +20,7 @@
       <sba-sticky-subnav>
         <sba-input
           v-model="filter"
+          class="justify-self-end"
           :placeholder="$t('term.filter')"
           name="filter"
           type="search"

spring-boot-admin-server-ui/src/main/frontend/views/instances/conditions/index.vue

@@ -20,6 +20,7 @@
       <sba-sticky-subnav>
         <sba-input
           v-model="filter"
+          class="justify-self-end"
           :placeholder="$t('term.filter')"
           name="filter"
           type="search"

spring-boot-admin-server-ui/src/main/frontend/views/instances/configprops/index.vue

@@ -20,6 +20,7 @@
       <sba-sticky-subnav>
         <sba-input
           v-model="filter"
+          class="justify-self-end"
           :placeholder="$t('term.filter')"
           name="filter"
           type="search"

spring-boot-admin-server-ui/src/main/frontend/views/instances/dependencies/index.vue

@@ -4,6 +4,7 @@
       <sba-sticky-subnav>
         <sba-input
           v-model="filter"
+          class="justify-self-end"
           :placeholder="$t('term.filter')"
           name="filter"
           type="search"

spring-boot-admin-server-ui/src/main/frontend/views/instances/env/index.vue

@@ -18,18 +18,20 @@
   <sba-instance-section :error="error" :loading="isLoading">
     <template #before>
       <sba-sticky-subnav v-if="env">
-        <div class="flex">
-          <div v-if="instance.hasEndpoint('refresh')" class="mr-1">
-            <refresh
-              :application="application"
-              :instance="instance"
-              @refresh="fetchEnv"
-            />
-          </div>
-          <div v-if="instance.hasEndpoint('busrefresh')" class="mr-1">
-            <busrefresh :instance="instance" @refresh="fetchEnv" />
+        <div class="flex justify-between">
+          <div>
+            <div v-if="instance.hasEndpoint('refresh')" class="mr-1">
+              <refresh
+                :application="application"
+                :instance="instance"
+                @refresh="fetchEnv"
+              />
+            </div>
+            <div v-if="instance.hasEndpoint('busrefresh')" class="mr-1">
+              <busrefresh :instance="instance" @refresh="fetchEnv" />
+            </div>
           </div>
-          <div class="flex-1">
+          <div>
             <sba-input
               v-model="filter"
               :placeholder="$t('term.filter')"

spring-boot-admin-server-ui/src/main/frontend/views/instances/loggers/loggers.vue

@@ -18,30 +18,28 @@
   <sba-instance-section :error="error" :loading="!hasLoaded">
     <template #before>
       <sba-sticky-subnav>
-        <div class="flex gap-2">
+        <div class="flex gap-2 justify-end">
           <sba-toggle-scope-button
             v-if="instanceCount > 1"
             v-model="scope"
             :instance-count="instanceCount"
             :show-info="false"
           />
 
-          <div class="flex-1">
-            <sba-input
-              v-model="filter.name"
-              :placeholder="$t('term.filter')"
-              name="filter"
-              type="search"
-            >
-              <template #prepend>
-                <font-awesome-icon icon="filter" />
-              </template>
-              <template #append>
-                <span v-text="filteredLoggers.length" /> /
-                <span v-text="loggerConfig.loggers.length" />
-              </template>
-            </sba-input>
-          </div>
+          <sba-input
+            v-model="filter.name"
+            :placeholder="$t('term.filter')"
+            name="filter"
+            type="search"
+          >
+            <template #prepend>
+              <font-awesome-icon icon="filter" />
+            </template>
+            <template #append>
+              <span v-text="filteredLoggers.length" /> /
+              <span v-text="loggerConfig.loggers.length" />
+            </template>
+          </sba-input>
 
           <!-- FILTER -->
           <div>

spring-boot-admin-server-ui/src/main/frontend/views/instances/sbomdependencytrees/index.vue

@@ -20,6 +20,7 @@
       <sba-sticky-subnav>
         <sba-input
           v-model="filter"
+          class="justify-self-end"
           :placeholder="$t('term.filter')"
           name="filter"
           type="search"

spring-boot-admin-server-ui/src/main/frontend/views/instances/startup/index.vue

@@ -18,7 +18,7 @@
   <sba-instance-section :error="error">
     <template #before>
       <sba-sticky-subnav>
-        <div class="flex gap-2">
+        <div class="flex gap-2 justify-between">
           <sba-button v-if="!isExpanded" @click="expandTree">
             <svg
               class="h-4 w-4"
@@ -45,7 +45,7 @@
               />
             </svg>
           </sba-button>
-          <div class="flex-1">
+          <div>
             <sba-input
               v-model="filter"
               :placeholder="