From 1561dc0c4ef3fca5669b9d5c9ff33d20525df379 Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Wed, 2 Sep 2020 18:43:35 -0400
Subject: [PATCH] smaller and right-side hidden field icon

---
 .../data-model/fields/components/field-select.vue    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
index 2d71690457..a29e5c8b03 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select.vue
@@ -10,12 +10,12 @@
 					<template #input>
 						<div class="name">
 							{{ field.name }}
-							<v-icon v-if="hidden" name="visibility_off" class="hidden-icon" />
 							<span class="interface">{{ interfaceName }}</span>
 						</div>
 					</template>
 
 					<template #append>
+						<v-icon v-if="hidden" name="visibility_off" class="hidden-icon" small />
 						<v-icon @click.stop="toggle" name="more_vert" />
 					</template>
 				</v-input>
@@ -274,6 +274,11 @@ export default defineComponent({
 .v-icon {
 	--v-icon-color: var(--foreground-subdued);
 	--v-icon-color-hover: var(--foreground);
+
+	&.hidden-icon {
+		margin-right: 4px;
+		--v-icon-color-hover: var(--foreground-subdued);
+	}
 }
 
 .drag-handle {
@@ -294,11 +299,6 @@ export default defineComponent({
 	.name {
 		flex-grow: 1;
 
-		.hidden-icon {
-			margin-left: 4px;
-			margin-right: 4px;
-		}
-
 		.interface {
 			display: none;
 			margin-left: 4px;