Prevent first col from expanding based on percentage

Fixed hover style to be on the whole row

Author: johnsimons

src/Frontend/src/components/EventLogItem.vue

@@ -67,7 +67,7 @@ function iconSubClasses(eventItem: EventLogItem) {
   <div class="row box box-event-item">
     <div class="col-12" @click="navigateToEvent(eventLogItem)">
       <div class="row">
-        <div class="col-1">
+        <div class="col-auto">
           <span class="fa-stack fa-lg">
             <i class="fa fa-stack-2x" :class="iconClasses(eventLogItem)" />
             <i v-if="eventLogItem.severity === Severity.Error || eventLogItem.category === 'MessageRedirects'" class="fa fa-o fa-stack-1x fa-inverse" :class="iconSubClasses(eventLogItem)" />

src/Frontend/src/components/configuration/HealthCheckNotifications.vue

@@ -114,7 +114,7 @@ onMounted(async () => {
               <div class="row box box-no-click">
                 <div class="col-12 no-side-padding">
                   <div class="row">
-                    <div class="col-1">
+                    <div class="col-auto">
                       <OnOffSwitch id="emailNotifications" @toggle="toggleEmailNotifications" :value="emailNotifications.enabled" />
                       <div>
                         <span class="connection-test connection-failed">

src/Frontend/src/components/failedmessages/MessageList.vue

@@ -98,7 +98,7 @@ defineExpose<IMessageList>({
     </div>
   </div>
   <div v-for="(message, index) in props.messages" class="row box repeat-item failed-message" :key="message.id">
-    <label class="check col-1" :for="`checkbox${message.id}`" @click="labelClicked($event, index)">
+    <label class="check col-auto" :for="`checkbox${message.id}`" @click="labelClicked($event, index)">
       <input type="checkbox" :disabled="message.retryInProgress || message.submittedForRetrial || message.deleteInProgress || message.restoreInProgress" class="checkbox" v-model="message.selected" :value="message.id" :id="`checkbox${message.id}`" />
     </label>
     <div class="col-11 failed-message-data">
@@ -170,13 +170,9 @@ pre {
   border-radius: 4px;
 }
 
-.check:hover,
-.failed-message-data:hover {
-  background-color: #edf6f7;
-}
-
 .failed-message:hover {
   border: 1px solid #00a3c4;
+  background-color: #edf6f7;
 }
 
 .repeat-item {