From 2ebc18db2527e054e7ce9bc780dc1a65448d2a5c Mon Sep 17 00:00:00 2001
From: HelgeKeck <helgekeck@hotmail.com>
Date: Fri, 26 Jul 2024 16:50:07 +0200
Subject: [PATCH] imporve alignment of runout sensor switch and icon

---
 components.d.ts                               |  2 +-
 .../runout-sensors/RunoutSensorsCard.vue      | 44 ++++++++++---------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index dd1589584a..ff05cf4dcd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ActionCommandPromptDialog: typeof import('./src/components/common/ActionCommandPromptDialog.vue')['default']
diff --git a/src/components/widgets/runout-sensors/RunoutSensorsCard.vue b/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
index f2346cf952..25642537a9 100644
--- a/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
+++ b/src/components/widgets/runout-sensors/RunoutSensorsCard.vue
@@ -20,30 +20,32 @@
       </app-btn>
     </template>
 
-    <v-card-text>
-      <v-layout
+    <v-container class="px-0 py-2">
+      <v-row
         v-for="item in sensors"
         :key="item.name"
-        align-center
-        justify-start
-        class="py-1"
       >
-        <span class="text-subtitle-1">{{ item.name }}</span>
-        <v-icon
-          :color="(item.filament_detected) ? 'success' : 'warning'"
-          class="ml-3"
-          left
-        >
-          {{ (item.filament_detected) ? '$checkedCircle' : '$alertCircle' }}
-        </v-icon>
-        <v-switch
-          class="ml-2"
-          color="success"
-          :input-value="item.enabled"
-          @change="changeSensor(item, $event)"
-        />
-      </v-layout>
-    </v-card-text>
+        <v-col class="pb-0">
+          <v-subheader>
+            <span>{{ item.name }}</span>
+            <v-spacer />
+            <v-icon
+              :color="(item.filament_detected) ? 'success' : 'warning'"
+              class="ml-3"
+              left
+            >
+              {{ (item.filament_detected) ? '$checkedCircle' : '$alertCircle' }}
+            </v-icon>
+            <v-switch
+              class="ml-2"
+              color="success"
+              :input-value="item.enabled"
+              @change="changeSensor(item, $event)"
+            />
+          </v-subheader>
+        </v-col>
+      </v-row>
+    </v-container>
   </collapsable-card>
 </template>