From 94bf1ba4418f05ad9ab35b9f69db73133bd8aa9a Mon Sep 17 00:00:00 2001
From: John Simons <john.simons@particular.net>
Date: Wed, 30 Oct 2024 10:06:59 +1000
Subject: [PATCH] Prevent first col from expanding based on percentage

Fixed hover style to be on the whole row
---
 src/Frontend/src/components/EventLogItem.vue              | 2 +-
 .../components/configuration/HealthCheckNotifications.vue | 2 +-
 .../src/components/failedmessages/MessageList.vue         | 8 ++------
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/Frontend/src/components/EventLogItem.vue b/src/Frontend/src/components/EventLogItem.vue
index df86f4083..1a602a541 100644
--- a/src/Frontend/src/components/EventLogItem.vue
+++ b/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)" />
diff --git a/src/Frontend/src/components/configuration/HealthCheckNotifications.vue b/src/Frontend/src/components/configuration/HealthCheckNotifications.vue
index 667c9d2fa..aa28d2bd0 100644
--- a/src/Frontend/src/components/configuration/HealthCheckNotifications.vue
+++ b/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">
diff --git a/src/Frontend/src/components/failedmessages/MessageList.vue b/src/Frontend/src/components/failedmessages/MessageList.vue
index 3420bba70..fe6d87cf8 100644
--- a/src/Frontend/src/components/failedmessages/MessageList.vue
+++ b/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 {