Restyle hidden fields

src/lang/en-US/index.json

@@ -36,6 +36,9 @@
 	"updating_field_field": "Updating Field {field}",
 	"within_collection": "Within {collection}",
 
+	"visible_fields": "Visible Fields",
+	"hidden_fields": "Hidden Fields",
+
 	"key": "Key",
 
 	"alias": "Alias",

src/modules/settings/routes/data-model/fields/components/fields-management/fields-management.vue

@@ -8,6 +8,10 @@
 			@change="($event) => handleChange($event, 'visible')"
 			:set-data="hideDragImage"
 		>
+			<template #header>
+				<div class="group-name">{{ $t('visible_fields') }}</div>
+			</template>
+
 			<field-select
 				v-for="field in sortedVisibleFields"
 				:key="field.field"
@@ -16,6 +20,27 @@
 			/>
 		</draggable>
 
+		<draggable
+			class="field-grid hidden"
+			:value="sortedHiddenFields"
+			handle=".drag-handle"
+			group="fields"
+			:set-data="hideDragImage"
+			@change="($event) => handleChange($event, 'hidden')"
+		>
+			<template #header>
+				<div class="group-name">{{ $t('hidden_fields') }}</div>
+			</template>
+
+			<field-select
+				v-for="field in sortedHiddenFields"
+				:key="field.field"
+				:field="field"
+				@toggle-visibility="toggleVisibility($event, 'hidden')"
+				@edit="openFieldSetup(field)"
+			/>
+		</draggable>
+
 		<v-menu attached>
 			<template #activator="{ toggle, active }">
 				<v-button
@@ -48,23 +73,6 @@
 				</v-list-item>
 			</v-list>
 		</v-menu>
-
-		<draggable
-			class="hidden"
-			:value="sortedHiddenFields"
-			handle=".drag-handle"
-			group="fields"
-			:set-data="hideDragImage"
-			@change="($event) => handleChange($event, 'hidden')"
-		>
-			<field-select
-				v-for="field in sortedHiddenFields"
-				:key="field.field"
-				:field="field"
-				@toggle-visibility="toggleVisibility($event, 'hidden')"
-				@edit="openFieldSetup(field)"
-			/>
-		</draggable>
 	</div>
 </template>
 
@@ -269,8 +277,17 @@ export default defineComponent({
 	grid-template-columns: 1fr 1fr;
 	margin-bottom: 24px;
 	padding: 12px;
+	padding-top: 32px;
 	background-color: var(--background-subdued);
 	border-radius: var(--border-radius);
+
+	.group-name {
+		position: absolute;
+		top: 6px;
+		left: 12px;
+		margin-bottom: 8px;
+		color: var(--foreground-subdued);
+	}
 }
 
 .add-field {