From d65af412583d134806be1629e51ea3f36460f80e Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 16 Oct 2020 15:10:27 -0400
Subject: [PATCH] Use notices instead of drawer heading

---
 app/src/components/register.ts                |   2 -
 .../components/v-drawer/v-drawer-heading.vue  |  34 ----
 app/src/components/v-drawer/v-drawer.vue      |  36 +----
 app/src/components/v-form/v-form.vue          |   6 +-
 .../use-element-size/use-element-size.ts      |  18 +--
 .../field-detail/components/display.vue       |   6 +-
 .../field-detail/components/field.vue         |   6 +-
 .../field-detail/components/interface.vue     |   6 +-
 .../field-detail/components/languages.vue     | 145 ------------------
 .../components/relationship-m2m.vue           |   7 +-
 .../components/relationship-m2o.vue           |   7 +-
 .../components/relationship-o2m.vue           |   7 +-
 .../field-detail/components/schema.vue        |  12 +-
 .../field-detail/components/translations.vue  |   7 +-
 .../data-model/field-detail/field-detail.vue  |  80 +++++-----
 .../routes/data-model/new-collection.vue      |  18 ++-
 .../permissions-detail/components/fields.vue  |  13 +-
 .../components/permissions.vue                |  15 +-
 .../permissions-detail/components/presets.vue |  14 +-
 .../components/validation.vue                 |  15 +-
 .../drawer-collection/drawer-collection.vue   |   2 +-
 .../components/drawer-item/drawer-item.vue    |  49 +++---
 .../components/image-editor/image-editor.vue  |  11 +-
 .../revisions-drawer-preview.vue              |  13 +-
 .../revisions-drawer-updates.vue              |  10 +-
 .../revisions-drawer.vue                      |   6 +
 26 files changed, 217 insertions(+), 328 deletions(-)
 delete mode 100644 app/src/components/v-drawer/v-drawer-heading.vue
 delete mode 100644 app/src/modules/settings/routes/data-model/field-detail/components/languages.vue

diff --git a/app/src/components/register.ts b/app/src/components/register.ts
index 1298c4ff93..53c643919b 100644
--- a/app/src/components/register.ts
+++ b/app/src/components/register.ts
@@ -23,7 +23,6 @@ import VItemGroup, { VItem } from './v-item-group';
 import VList, { VListGroup, VListItem, VListItemContent, VListItemHint, VListItemIcon, VListItemText } from './v-list/';
 import VMenu from './v-menu/';
 import VDrawer from './v-drawer/';
-import VDrawerHeading from './v-drawer/v-drawer-heading.vue';
 import VNotice from './v-notice/';
 import VOverlay from './v-overlay/';
 import VPagination from './v-pagination/';
@@ -74,7 +73,6 @@ Vue.component('v-list-item', VListItem);
 Vue.component('v-list', VList);
 Vue.component('v-menu', VMenu);
 Vue.component('v-drawer', VDrawer);
-Vue.component('v-drawer-heading', VDrawerHeading);
 Vue.component('v-notice', VNotice);
 Vue.component('v-overlay', VOverlay);
 Vue.component('v-pagination', VPagination);
diff --git a/app/src/components/v-drawer/v-drawer-heading.vue b/app/src/components/v-drawer/v-drawer-heading.vue
deleted file mode 100644
index 302d207845..0000000000
--- a/app/src/components/v-drawer/v-drawer-heading.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-	<div class="v-drawer-heading">
-		<div class="type-title">{{ heading }}</div>
-		<div v-if="subheading" class="subheading">{{ subheading }}</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from '@vue/composition-api';
-
-export default defineComponent({
-	props: {
-		heading: {
-			type: String,
-			required: true,
-		},
-		subheading: {
-			type: String,
-			default: null,
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.v-drawer-heading {
-	margin-bottom: 48px;
-
-	.subheading {
-		margin-top: 4px;
-		color: var(--foreground-subdued);
-	}
-}
-</style>
diff --git a/app/src/components/v-drawer/v-drawer.vue b/app/src/components/v-drawer/v-drawer.vue
index 07725a9b86..436bb7f07f 100644
--- a/app/src/components/v-drawer/v-drawer.vue
+++ b/app/src/components/v-drawer/v-drawer.vue
@@ -9,7 +9,7 @@
 				<v-icon name="close" />
 			</v-button>
 
-			<div class="content" :class="{ 'no-padding': noPadding }">
+			<div class="content">
 				<v-overlay v-if="$slots.sidebar" absolute :active="sidebarActive" @click="sidebarActive = false" />
 				<nav
 					v-if="$slots.sidebar"
@@ -20,7 +20,7 @@
 					<slot name="sidebar" />
 				</nav>
 				<main ref="mainEl" class="main">
-					<header-bar ref="headerBarEl" :title="title">
+					<header-bar :title="title">
 						<template #headline>
 							<slot name="subtitle">
 								<p v-if="subtitle" class="subtitle">{{ subtitle }}</p>
@@ -39,9 +39,7 @@
 						<template #title:append><slot name="header:append" /></template>
 					</header-bar>
 
-					<div class="padding-box">
-						<slot />
-					</div>
+					<slot />
 				</main>
 			</div>
 		</article>
@@ -51,7 +49,6 @@
 <script lang="ts">
 import { defineComponent, ref, computed, provide } from '@vue/composition-api';
 import HeaderBar from '@/views/private/components/header-bar/header-bar.vue';
-import useElementSize from '@/composables/use-element-size';
 
 export default defineComponent({
 	components: {
@@ -78,10 +75,6 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
-		noPadding: {
-			type: Boolean,
-			default: false,
-		},
 		icon: {
 			type: String,
 			default: 'box',
@@ -91,7 +84,6 @@ export default defineComponent({
 		const sidebarActive = ref(false);
 		const localActive = ref(false);
 
-		const headerBarEl = ref<Vue>();
 		const mainEl = ref<Element>();
 
 		provide('main-element', mainEl);
@@ -106,9 +98,7 @@ export default defineComponent({
 			},
 		});
 
-		const { height } = useElementSize(mainEl);
-
-		return { sidebarActive, _active, mainEl, headerBarEl, headerHeight: height };
+		return { sidebarActive, _active, mainEl };
 	},
 });
 </script>
@@ -189,30 +179,16 @@ body {
 		}
 
 		.main {
-			flex-grow: 1;
-			overflow: auto;
-		}
-
-		.padding-box {
 			--content-padding: 16px;
 			--content-padding-bottom: 32px;
 
-			height: 1px; // allow height: 100% children
-			min-height: calc(100% - (65px + 24px + 24px)); // header height + 2x margin
-			padding: 16px 16px 32px;
-			padding-top: 0;
+			flex-grow: 1;
+			overflow: auto;
 
 			@include breakpoint(medium) {
 				--content-padding: 32px;
-
-				padding: 32px;
-				padding-top: 0;
 			}
 		}
-
-		&.no-padding .padding-box {
-			padding: 0px !important;
-		}
 	}
 
 	@include breakpoint(medium) {
diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index 959e66f79b..8535bb817b 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -139,10 +139,10 @@ export default defineComponent({
 			const gridClass = computed<string | null>(() => {
 				if (el.value === null) return null;
 
-				if (width.value > 588 && width.value <= 792) {
-					return 'grid';
-				} else {
+				if (width.value > 792) {
 					return 'grid with-fill';
+				} else {
+					return 'grid';
 				}
 
 				return null;
diff --git a/app/src/composables/use-element-size/use-element-size.ts b/app/src/composables/use-element-size/use-element-size.ts
index f8270bdb3f..776d47f305 100644
--- a/app/src/composables/use-element-size/use-element-size.ts
+++ b/app/src/composables/use-element-size/use-element-size.ts
@@ -1,7 +1,6 @@
 import { Ref, ref, isRef, onMounted, onUnmounted } from '@vue/composition-api';
 import { notEmpty } from '@/utils/is-empty';
 import { ResizeObserver as ResizeObserverPolyfill } from 'resize-observer';
-import Vue from 'vue';
 
 declare global {
 	interface Window {
@@ -9,7 +8,7 @@ declare global {
 	}
 }
 
-export default function useElementSize<T extends Element>(target: T | Ref<undefined | null | T | Vue>) {
+export default function useElementSize<T extends Element>(target: T | Ref<T> | Ref<null>) {
 	const width = ref(0);
 	const height = ref(0);
 
@@ -25,19 +24,10 @@ export default function useElementSize<T extends Element>(target: T | Ref<undefi
 	});
 
 	onMounted(() => {
-		const deref = isRef(target) ? target.value : target;
-		console.log(deref);
+		const t = isRef(target) ? target.value : target;
 
-		let targetElement: Element;
-
-		if (deref instanceof Vue) {
-			targetElement = (deref as Vue).$el;
-		} else {
-			targetElement = deref as Element;
-		}
-
-		if (notEmpty(targetElement)) {
-			resizeObserver.observe(targetElement);
+		if (notEmpty(t)) {
+			resizeObserver.observe(t);
 		}
 	});
 
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
index c593e38846..3451e1e38f 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/display.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('display_setup_title') }}</h2>
+		<v-notice type="info">{{ $t('display_setup_title') }}</v-notice>
 
 		<v-fancy-select class="select" :items="selectItems" v-model="fieldData.meta.display" />
 
@@ -130,4 +130,8 @@ export default defineComponent({
 		text-decoration: underline;
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/field.vue b/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
index d8a7dff43c..a6f81fa891 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/field.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('schema_field_title') }}</h2>
+		<v-notice type="info">{{ $t('schema_field_title') }}</v-notice>
 
 		<div class="form">
 			<div class="field half-left" v-if="fieldData.meta">
@@ -103,4 +103,8 @@ export default defineComponent({
 .required {
 	--v-icon-color: var(--primary);
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
index 6382a4d26e..7f3b4206a1 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/interface.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('interface_setup_title') }}</h2>
+		<v-notice type="info">{{ $t('interface_setup_title') }}</v-notice>
 
 		<v-fancy-select class="select" :items="selectItems" v-model="fieldData.meta.interface" />
 
@@ -139,4 +139,8 @@ export default defineComponent({
 		text-decoration: underline;
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue b/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
deleted file mode 100644
index 8ce52a6edd..0000000000
--- a/app/src/modules/settings/routes/data-model/field-detail/components/languages.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-	<div>
-		<h2 class="type-title">{{ $t('configure_languages') }}</h2>
-		<div class="grid">
-			<div class="field">
-				<div class="type-label">{{ $t('translations_collection') }}</div>
-				<v-input disabled :value="relations[1].many_collection" />
-			</div>
-			<div class="field">
-				<div class="type-label">{{ $t('languages_collection') }}</div>
-				<v-input :class="{ matches: languagesCollectionExists }" db-safe key="languages-collection" v-model="relations[1].one_collection" :disabled="isExisting" :placeholder="$t('collection') + '...'">
-					<template #append>
-						<v-menu show-arrow placement="bottom-end">
-							<template #activator="{ toggle }">
-								<v-icon name="list_alt" @click="toggle" v-tooltip="$t('select_existing')" :disabled="isExisting" />
-							</template>
-
-							<v-list class="monospace">
-								<v-list-item
-									v-for="item in items"
-									:key="item.value"
-									:active="relations[1].one_collection === item.value"
-									:disabled="item.disabled"
-									@click="relations[1].one_collection = item.value"
-								>
-									<v-list-item-content>
-										{{ item.text }}
-									</v-list-item-content>
-								</v-list-item>
-							</v-list>
-						</v-menu>
-					</template>
-				</v-input>
-			</div>
-			<v-input :value="relations[1].many_field" :placeholder="$t('foreign_key') + '...'"/>
-			<v-input db-safe :disabled="languagesCollectionExists" v-model="relations[1].one_primary" :placeholder="$t('primary_key') + '...'" />
-			<v-icon class="arrow" name="arrow_back" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, watch } from '@vue/composition-api';
-import { Relation } from '@/types';
-import { Field } from '@/types';
-import { orderBy } from 'lodash';
-import useSync from '@/composables/use-sync';
-import { useCollectionsStore, useFieldsStore } from '@/stores';
-import i18n from '@/lang';
-
-import { state } from '../store';
-
-export default defineComponent({
-	props: {
-		type: {
-			type: String,
-			required: true,
-		},
-		collection: {
-			type: String,
-			required: true,
-		},
-		isExisting: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props, { emit }) {
-		const collectionsStore = useCollectionsStore();
-		const fieldsStore = useFieldsStore();
-
-		const { items } = useRelation();
-
-		const languagesCollectionExists = computed(() => {
-			return !!collectionsStore.getCollection(state.relations[1].one_collection);
-		});
-
-		return {
-			relations: state.relations,
-			items,
-			fieldData: state.fieldData,
-			languagesCollectionExists,
-		};
-
-		function useRelation() {
-			const availableCollections = computed(() => {
-				return orderBy(
-					collectionsStore.state.collections.filter((collection) => {
-						return collection.collection.startsWith('directus_') === false;
-					}),
-					['collection'],
-					['asc']
-				);
-			});
-
-			const items = computed(() =>
-				availableCollections.value.map((collection) => ({
-					text: collection.collection,
-					value: collection.collection,
-				}))
-			);
-
-			return { items };
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.grid {
-	--v-select-font-family: var(--family-monospace);
-	--v-input-font-family: var(--family-monospace);
-
-	position: relative;
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 12px 32px;
-	margin-top: 48px;
-
-	.v-input.matches {
-		--v-input-color: var(--primary);
-	}
-
-	.arrow {
-		--v-icon-color: var(--primary);
-
-		position: absolute;
-		bottom: 14px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-}
-
-.v-list {
-	--v-list-item-content-font-family: var(--family-monospace);
-}
-
-.v-divider {
-	margin: 48px 0;
-}
-
-.type-label {
-	margin-bottom: 8px;
-}
-</style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
index 34b7c18f5a..fd734b9fd2 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2m.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_m2m') }}</h2>
+		<v-notice type="info">{{ $t('configure_m2m') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -452,4 +453,8 @@ export default defineComponent({
 		transform: translateX(-50%);
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
index 53811a0266..ec286e0878 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-m2o.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_m2o') }}</h2>
+		<v-notice type="info">{{ $t('configure_m2o') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -255,4 +256,8 @@ export default defineComponent({
 .type-label {
 	margin-bottom: 8px;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
index 336545a623..7f28918315 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/relationship-o2m.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_o2m') }}</h2>
+		<v-notice type="info">{{ $t('configure_o2m') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -380,4 +381,8 @@ export default defineComponent({
 		transform: translateX(-50%);
 	}
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
index e154ef6bb7..d7d105de09 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
@@ -1,6 +1,8 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('schema_setup_title') }}</h2>
+		<v-notice type="info">
+			{{ $t('schema_setup_title') }}
+		</v-notice>
 
 		<div class="form">
 			<div class="field">
@@ -392,10 +394,6 @@ export default defineComponent({
 @import '@/styles/mixins/breakpoint';
 @import '@/styles/mixins/form-grid';
 
-.type-title {
-	margin-bottom: 32px;
-}
-
 .form {
 	--v-form-vertical-gap: 32px;
 	--v-form-horizontal-gap: 32px;
@@ -416,4 +414,8 @@ export default defineComponent({
 	grid-gap: 12px;
 	grid-template-columns: 1fr 1fr;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
index 84255e1cd5..4b5535c4f7 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/translations.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
-		<h2 class="type-title">{{ $t('configure_m2m') }}</h2>
+		<v-notice type="info">{{ $t('configure_m2m') }}</v-notice>
+
 		<div class="grid">
 			<div class="field">
 				<div class="type-label">{{ $t('this_collection') }}</div>
@@ -349,4 +350,8 @@ export default defineComponent({
 .v-list {
 	--v-list-item-content-font-family: var(--family-monospace);
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
index 86dff8c5b9..d4096792d8 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/field-detail.vue
@@ -45,47 +45,49 @@
 			<setup-tabs :current.sync="currentTab" :tabs="tabs" :type="localType" />
 		</template>
 
-		<setup-schema
-			v-if="currentTab[0] === 'schema'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+		<div class="content">
+			<setup-schema
+				v-if="currentTab[0] === 'schema'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-field
-			v-if="currentTab[0] === 'field'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-field
+				v-if="currentTab[0] === 'field'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-relationship
-			v-if="currentTab[0] === 'relationship'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-relationship
+				v-if="currentTab[0] === 'relationship'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-translations
-			v-if="currentTab[0] === 'translations'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-translations
+				v-if="currentTab[0] === 'translations'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-interface
-			v-if="currentTab[0] === 'interface'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-interface
+				v-if="currentTab[0] === 'interface'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
 
-		<setup-display
-			v-if="currentTab[0] === 'display'"
-			:is-existing="field !== '+'"
-			:collection="collection"
-			:type="localType"
-		/>
+			<setup-display
+				v-if="currentTab[0] === 'display'"
+				:is-existing="field !== '+'"
+				:collection="collection"
+				:type="localType"
+			/>
+		</div>
 
 		<template #actions>
 			<setup-actions
@@ -404,4 +406,10 @@ export default defineComponent({
 		color: var(--primary);
 	}
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
 </style>
diff --git a/app/src/modules/settings/routes/data-model/new-collection.vue b/app/src/modules/settings/routes/data-model/new-collection.vue
index c8e05c5fc4..5edb0c38b8 100644
--- a/app/src/modules/settings/routes/data-model/new-collection.vue
+++ b/app/src/modules/settings/routes/data-model/new-collection.vue
@@ -29,9 +29,10 @@
 			</v-tabs>
 		</template>
 
-		<v-tabs-items v-model="currentTab">
+		<v-tabs-items class="content" v-model="currentTab">
 			<v-tab-item value="collection">
-				<h2 class="type-title">{{ $t('creating_collection_info') }}</h2>
+				<v-notice type="info">{{ $t('creating_collection_info') }}</v-notice>
+
 				<div class="grid">
 					<div>
 						<div class="type-label">
@@ -83,7 +84,8 @@
 				</div>
 			</v-tab-item>
 			<v-tab-item value="system">
-				<h2 class="type-title">{{ $t('creating_collection_system') }}</h2>
+				<v-notice type="info">{{ $t('creating_collection_system') }}</v-notice>
+
 				<div class="grid system">
 					<div v-for="(info, field) in systemFields" :key="field">
 						<div class="type-label">{{ $t(info.label) }}</div>
@@ -475,4 +477,14 @@ export default defineComponent({
 .required {
 	color: var(--primary);
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
index cd3fe9a108..5577e8ac50 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/fields.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<v-drawer-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('fields_for_role', {
 					role: role ? role.name : $t('public'),
 					action: $t(permission.action).toLowerCase(),
 				})
-			"
-		/>
+			}}
+		</v-notice>
+
 		<p class="type-label">{{ $tc('field', 0) }}</p>
 		<interface-checkboxes v-model="fields" type="json" :choices="fieldsInCollection" />
 	</div>
@@ -83,4 +84,8 @@ export default defineComponent({
 .type-label {
 	margin-bottom: 8px;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
index 54fc896a8d..f473b64a51 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<v-drawer-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('permissions_for_role', {
 					action: $t(permission.action).toLowerCase(),
 					role: role ? role.name : $t('public'),
 				})
-			"
-		/>
+			}}
+		</v-notice>
+
 		<interface-code v-model="permissions" language="json" type="json" />
 	</div>
 </template>
@@ -47,3 +48,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
index 650b95a251..8057e67b50 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/presets.vue
@@ -1,13 +1,13 @@
 <template>
 	<div>
-		<v-drawer-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('presets_for_role', {
 					action: $t(permission.action).toLowerCase(),
 					role: role ? role.name : $t('public'),
 				})
-			"
-		/>
+			}}
+		</v-notice>
 		<interface-code v-model="presets" language="json" type="json" />
 	</div>
 </template>
@@ -47,3 +47,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
index fda197ca25..b83a80aceb 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/validation.vue
@@ -1,13 +1,14 @@
 <template>
 	<div>
-		<v-drawer-heading
-			:heading="
+		<v-notice type="info">
+			{{
 				$t('validation_for_role', {
 					action: $t(permission.action).toLowerCase(),
 					role: role ? role.name : $t('public'),
 				})
-			"
-		/>
+			}}
+		</v-notice>
+
 		<interface-code v-model="validation" language="json" type="json" />
 	</div>
 </template>
@@ -47,3 +48,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/views/private/components/drawer-collection/drawer-collection.vue b/app/src/views/private/components/drawer-collection/drawer-collection.vue
index 32873a63c0..2ef3754287 100644
--- a/app/src/views/private/components/drawer-collection/drawer-collection.vue
+++ b/app/src/views/private/components/drawer-collection/drawer-collection.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-drawer v-model="_active" :title="$t('select_item')" no-padding @cancel="cancel">
+	<v-drawer v-model="_active" :title="$t('select_item')" @cancel="cancel">
 		<component
 			:is="`layout-${localLayout}`"
 			:collection="collection"
diff --git a/app/src/views/private/components/drawer-item/drawer-item.vue b/app/src/views/private/components/drawer-item/drawer-item.vue
index 54177655a6..7cff5a1c8c 100644
--- a/app/src/views/private/components/drawer-item/drawer-item.vue
+++ b/app/src/views/private/components/drawer-item/drawer-item.vue
@@ -1,31 +1,33 @@
 <template>
 	<v-drawer v-model="_active" :title="title" persistent @cancel="cancel">
-		<template v-if="junctionField">
-			<v-form
-				:loading="loading"
-				:initial-values="item && item[junctionField]"
-				:collection="junctionRelatedCollection"
-				:primary-key="relatedPrimaryKey"
-				:edits="_edits[junctionField]"
-				@input="setJunctionEdits"
-			/>
-
-			<v-divider v-if="showDivider" />
-		</template>
-
-		<v-form
-			:loading="loading"
-			:initial-values="item"
-			:collection="collection"
-			:primary-key="primaryKey"
-			v-model="_edits"
-		/>
-
 		<template #actions>
 			<v-button @click="save" icon rounded v-tooltip.bottom="$t('save')">
 				<v-icon name="check" />
 			</v-button>
 		</template>
+
+		<div class="drawer-item-content">
+			<template v-if="junctionField">
+				<v-form
+					:loading="loading"
+					:initial-values="item && item[junctionField]"
+					:collection="junctionRelatedCollection"
+					:primary-key="relatedPrimaryKey"
+					:edits="_edits[junctionField]"
+					@input="setJunctionEdits"
+				/>
+
+				<v-divider v-if="showDivider" />
+			</template>
+
+			<v-form
+				:loading="loading"
+				:initial-values="item"
+				:collection="collection"
+				:primary-key="primaryKey"
+				v-model="_edits"
+			/>
+		</div>
 	</v-drawer>
 </template>
 
@@ -289,4 +291,9 @@ export default defineComponent({
 .v-divider {
 	margin: 52px 0;
 }
+
+.drawer-item-content {
+	padding: var(--content-padding);
+	padding-bottom: var(--content-padding-bottom);
+}
 </style>
diff --git a/app/src/views/private/components/image-editor/image-editor.vue b/app/src/views/private/components/image-editor/image-editor.vue
index f584ddd126..0479664a6e 100644
--- a/app/src/views/private/components/image-editor/image-editor.vue
+++ b/app/src/views/private/components/image-editor/image-editor.vue
@@ -1,12 +1,5 @@
 <template>
-	<v-drawer
-		v-model="_active"
-		class="modal"
-		:title="$t('editing_image')"
-		persistent
-		no-padding
-		@cancel="_active = false"
-	>
+	<v-drawer v-model="_active" class="modal" :title="$t('editing_image')" persistent @cancel="_active = false">
 		<template #activator="activatorBinding">
 			<slot name="activator" v-bind="activatorBinding" />
 		</template>
@@ -439,7 +432,7 @@ export default defineComponent({
 
 .editor-container {
 	width: 100%;
-	height: 100%;
+	height: calc(100% - (65px + 24px + 24px)); // header height + 2x margin
 	overflow: hidden;
 	background-color: var(--background-subdued);
 
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
index ca2fa8a215..aa4ad78931 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-preview.vue
@@ -1,6 +1,11 @@
 <template>
 	<div>
-		<v-drawer-heading :heading="$t('revision_post_update')" :subheading="$t('no_relational_data')" />
+		<v-notice type="info">
+			{{ $t('revision_post_update') }}
+			<br />
+			{{ $t('no_relational_data') }}
+		</v-notice>
+
 		<v-form
 			disabled
 			:collection="revision.collection"
@@ -23,3 +28,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.v-notice {
+	margin-bottom: 36px;
+}
+</style>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
index 8497f7082c..7f79ca90bb 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer-updates.vue
@@ -1,6 +1,10 @@
 <template>
 	<div class="updates">
-		<v-drawer-heading :heading="$t('changes_made')" :subheading="$t('no_relational_data')" />
+		<v-notice type="info">
+			{{ $t('changes_made') }}
+			<br />
+			{{ $t('no_relational_data') }}
+		</v-notice>
 
 		<div class="change" v-for="change in changes" :key="change.name">
 			<div class="type-label">{{ change.name }}</div>
@@ -92,4 +96,8 @@ export default defineComponent({
 .change-line {
 	margin-bottom: 4px;
 }
+
+.v-notice {
+	margin-bottom: 36px;
+}
 </style>
diff --git a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
index 71ffd81360..1da32cf910 100644
--- a/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
+++ b/app/src/views/private/components/revisions-drawer-detail/revisions-drawer.vue
@@ -141,4 +141,10 @@ export default defineComponent({
 	--v-button-background-color: var(--warning);
 	--v-button-background-color-hover: var(--warning-125);
 }
+
+.content {
+	padding: var(--content-padding);
+	padding-top: 0;
+	padding-bottom: var(--content-padding);
+}
 </style>