Merge pull request #718 from Security-Onion-Solutions/cogburn/hunt-ta…

…ble-text-alignment Vertically Align Text for Cleaner Looking Tables
Security-Onion-Solutions · Jan 14, 2025 · 2ceed84 · 2ceed84
2 parents 4ae72ab + 636a6a5
commit 2ceed84
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/html/css/app.css b/html/css/app.css
@@ -899,6 +899,10 @@ ul ul ul {
   vertical-align: baseline;
 }
 
+.va-middle {
+  vertical-align: middle;
+}
+
 .text-primary .v-switch__thumb {
   background-color: rgb(var(--v-theme-primary)) !important;
 }

diff --git a/html/index.html b/html/index.html
@@ -814,9 +814,9 @@ <h4 v-if="loaded" :data-aid="'event_total_' + category">{{ i18n.eventTotal }} {{
                                         <v-icon :alt="i18n.addColumnHeader" :color="isColumnHeader(kvp.key) ? 'info' : ''" :title="i18n.addColumnHeaderHelp">fa-table-columns</v-icon>
                                       </v-btn>
                                     </div>
-                                    <div :id="'events_fields_' + category + '_' + kvp.key" class="d-inline-block expansion" v-text="kvp.key" :data-aid="'events_field_name_' + category"></div>
+                                    <div :id="'events_fields_' + category + '_' + kvp.key" class="d-inline-block expansion va-middle" v-text="kvp.key" :data-aid="'events_field_name_' + category"></div>
                                   </td>
-                                  <td class="expansion" :data-aid="'events_field_value_' + category">
+                                  <td class="expansion va-middle" :data-aid="'events_field_value_' + category">
                                     <div class="quick-action-trigger d-inline-block expansion hardwrap" @click="toggleQuickAction($event, item, -1, kvp.key, kvp.value)">{{kvp.key.endsWith('detection.author') ? $root.tryLocalize(kvp.value) : kvp.value}}<span class="resolved-host" v-if="$root.pickHostname(kvp.value)"> - {{ $root.pickHostname(kvp.value) }}</span></div>
                                   </td>
                                 </tr>