imporve alignment of runout sensor switch and icon

fluidd-core · Jul 26, 2024 · 2ebc18d · 2ebc18d
1 parent d1ba830
commit 2ebc18d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git 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
@@ -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>