From 33a97abe6241dd08d42fc160d8b9eaf65ca74215 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Sat, 25 Jan 2025 10:38:15 +0100
Subject: [PATCH] Blocks field: fix empty display

---
 panel/src/components/Forms/Blocks/Blocks.vue  | 24 +++++++++----------
 .../components/Forms/Layouts/LayoutColumn.vue |  4 ++--
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/panel/src/components/Forms/Blocks/Blocks.vue b/panel/src/components/Forms/Blocks/Blocks.vue
index ce5a3151f4..2f5cf5bba6 100644
--- a/panel/src/components/Forms/Blocks/Blocks.vue
+++ b/panel/src/components/Forms/Blocks/Blocks.vue
@@ -54,18 +54,12 @@
 					@split="split(block, index, $event)"
 					@update="update(block, $event)"
 				/>
-
-				<!-- No blocks -->
-				<template v-if="blocks.length === 0" #footer>
-					<k-empty
-						class="k-blocks-empty"
-						icon="box"
-						@click="choose(blocks.length)"
-					>
-						{{ empty ?? $t("field.blocks.empty") }}
-					</k-empty>
-				</template>
 			</k-draggable>
+
+			<!-- No blocks -->
+			<k-empty class="k-blocks-empty" icon="box" @click="choose(blocks.length)">
+				{{ empty ?? $t("field.blocks.empty") }}
+			</k-empty>
 		</template>
 
 		<!-- No fieldsets -->
@@ -728,7 +722,7 @@ export default {
 .k-blocks {
 	border-radius: var(--rounded);
 }
-.k-blocks:not([data-empty="true"], [data-disabled="true"]) {
+.k-blocks:not(:has(> .k-blocks-list:empty), [data-disabled="true"]) {
 	background: var(--block-color-back);
 	box-shadow: var(--shadow);
 }
@@ -749,8 +743,12 @@ export default {
 	cursor: -moz-grabbing;
 	cursor: -webkit-grabbing;
 }
-.k-blocks-list > .k-blocks-empty {
+
+.k-blocks > .k-blocks-empty {
 	display: flex;
 	align-items: center;
 }
+.k-blocks > .k-blocks-list:not(:empty) + .k-blocks-empty {
+	display: none;
+}
 </style>
diff --git a/panel/src/components/Forms/Layouts/LayoutColumn.vue b/panel/src/components/Forms/Layouts/LayoutColumn.vue
index 3a99952bbd..43778f1fa2 100644
--- a/panel/src/components/Forms/Layouts/LayoutColumn.vue
+++ b/panel/src/components/Forms/Layouts/LayoutColumn.vue
@@ -88,7 +88,7 @@ export default {
 	> .k-block-container:last-of-type {
 	flex-grow: 1;
 }
-.k-layout-column > .k-blocks > .k-blocks-list > .k-blocks-empty.k-box {
+.k-layout-column > .k-blocks > .k-blocks-list + .k-blocks-empty.k-box {
 	--box-color-back: transparent;
 	position: absolute;
 	inset: 0;
@@ -97,7 +97,7 @@ export default {
 	transition: opacity 0.3s;
 	border: 0;
 }
-.k-layout-column > .k-blocks > .k-blocks-list > .k-blocks-empty:hover {
+.k-layout-column > .k-blocks > .k-blocks-list + .k-blocks-empty:hover {
 	opacity: 1;
 }
 </style>