From e444694dc09e030d5f717400818e21617617849d Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 10:41:40 +0000
Subject: [PATCH 01/24] Adds settings for creating new cards at the top or
 bottom of stacks

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 lib/Service/ConfigService.php      | 21 ++++++++++++++++++++-
 src/components/DeckAppSettings.vue | 10 ++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/lib/Service/ConfigService.php b/lib/Service/ConfigService.php
index b4afb8fc45..0b9dde777b 100644
--- a/lib/Service/ConfigService.php
+++ b/lib/Service/ConfigService.php
@@ -52,7 +52,8 @@ public function getAll(): array {
 		$data = [
 			'calendar' => $this->isCalendarEnabled(),
 			'cardDetailsInModal' => $this->isCardDetailsInModal(),
-			'cardIdBadge' => $this->isCardIdBadgeEnabled()
+			'cardIdBadge' => $this->isCardIdBadgeEnabled(),
+			'stackAddCardAtTop' => $this->isStackAddCardAtTopEnabled()
 		];
 		if ($this->groupManager->isAdmin($userId)) {
 			$data['groupLimit'] = $this->get('groupLimit');
@@ -90,6 +91,11 @@ public function get(string $key) {
 					return false;
 				}
 				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', false);
+			case 'stackAddCardAtTop':
+				if ($this->getUserId() === null) {
+					return false;
+				}
+				return $this->isStackAddCardAtTopEnabled();
 		}
 		return false;
 	}
@@ -134,6 +140,15 @@ public function isCardIdBadgeEnabled(): bool {
 		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'cardIdBadge', $defaultState);
 	}
 
+	public function isStackAddCardAtTopEnabled(): bool {
+		$userId = $this->getUserId();
+		if ($userId === null) {
+			return false;
+		}
+
+		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', true);
+	}
+
 	public function ensureFederationEnabled() {
 		if (!$this->get('federationEnabled')) {
 			throw new FederationDisabledException();
@@ -181,6 +196,10 @@ public function set($key, $value) {
 				$this->config->setUserValue($userId, Application::APP_ID, 'cardIdBadge', (string)$value);
 				$result = $value;
 				break;
+			case 'stackAddCardAtTop':
+				$this->config->setUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', (string)$value);
+				$result = $value;
+				break;
 			case 'board':
 				// extra check that user only send one of the allowed board settings and not something random
 				$parts = explode(':', $key, 3);
diff --git a/src/components/DeckAppSettings.vue b/src/components/DeckAppSettings.vue
index 3935dbff5d..8045bcc2df 100644
--- a/src/components/DeckAppSettings.vue
+++ b/src/components/DeckAppSettings.vue
@@ -12,6 +12,8 @@
 			<NcFormBox>
 				<NcFormBoxSwitch v-model="cardDetailsInModal"
 					:label="t('deck', 'Use bigger card view')" />
+				<NcFormBoxSwitch v-model="stackAddCardAtTop"
+					:label="t('deck', 'Add new cards at the top of a list')" />
 			</NcFormBox>
 		</NcAppSettingsSection>
 
@@ -119,6 +121,14 @@ export default {
 				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
 			},
 		},
+		stackAddCardAtTop: {
+			get() {
+				return this.$store.getters.config('stackAddCardAtTop') !== false
+			},
+			set(newValue) {
+				this.$store.dispatch('setConfig', { stackAddCardAtTop: newValue })
+			},
+		},
 		cardIdBadge: {
 			get() {
 				return this.$store.getters.config('cardIdBadge')

From e2b6939ecc406e64d3617f8d98ac7164b25b6d2d Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:01:20 +0000
Subject: [PATCH 02/24] Add a button for adding cards to the top or bottom of a
 stack

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 91 ++++++++++++++++++++++++++++------
 1 file changed, 76 insertions(+), 15 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 0531548e68..2a4c9f315c 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -69,14 +69,6 @@
 					{{ t('deck', 'Delete list') }}
 				</NcActionButton>
 			</NcActions>
-			<NcActions v-if="canEdit && !showArchived && !isArchived">
-				<NcActionButton data-cy="action:add-card" @click.stop="showAddCard=true">
-					{{ t('deck', 'Add card') }}
-					<template #icon>
-						<CardPlusOutline :size="20" />
-					</template>
-				</NcActionButton>
-			</NcActions>
 		</div>
 
 		<NcModal v-if="modalArchivAllCardsShow" @close="modalArchivAllCardsShow=false">
@@ -101,6 +93,39 @@
 			</div>
 		</NcModal>
 
+		<transition name="slide-top" appear>
+			<div v-if="canAddCardAtTop" class="stack__card-add stack__card-add--top">
+				<NcButton v-if="!showAddCard"
+					data-cy="action:add-card"
+					class="stack__card-add-button"
+					type="tertiary"
+					:wide="true"
+					@click.stop="showAddCard=true">
+					{{ t('deck', '+ Add card') }}
+				</NcButton>
+				<form v-else
+					:class="{ 'icon-loading-small': stateCardCreating }"
+					@submit.prevent.stop="clickAddCard()">
+					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
+					<input id="new-stack-input-main"
+						ref="newCardInput"
+						v-model="newCardTitle"
+						type="text"
+						class="no-close"
+						:disabled="stateCardCreating"
+						:placeholder="t('deck', 'Card name')"
+						required
+						pattern=".*\S+.*"
+						@focus="onCreateCardFocus"
+						@keydown.esc="stopCardCreation">
+					<input v-show="!stateCardCreating"
+						class="icon-confirm"
+						type="submit"
+						value="">
+				</form>
+			</div>
+		</transition>
+
 		<Container :get-child-payload="payloadForCard(stack.id)"
 			class="dnd-container"
 			group-name="stack"
@@ -122,8 +147,17 @@
 		</Container>
 
 		<transition name="slide-bottom" appear>
-			<div v-if="showAddCard" class="stack__card-add">
-				<form :class="{ 'icon-loading-small': stateCardCreating }"
+			<div v-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
+				<NcButton v-if="!showAddCard"
+					data-cy="action:add-card"
+					class="stack__card-add-button"
+					type="tertiary"
+					:wide="true"
+					@click.stop="showAddCard=true">
+					{{ t('deck', '+ Add card') }}
+				</NcButton>
+				<form v-else
+					:class="{ 'icon-loading-small': stateCardCreating }"
 					@submit.prevent.stop="clickAddCard()">
 					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
 					<input id="new-stack-input-main"
@@ -152,9 +186,8 @@ import ClickOutside from 'vue-click-outside'
 import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
-import CardPlusOutline from 'vue-material-design-icons/CardPlusOutline.vue'
 import CheckCircleOutline from 'vue-material-design-icons/CheckCircleOutline.vue'
-import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
+import { NcActions, NcActionButton, NcButton, NcModal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
 
 import CardItem from '../cards/CardItem.vue'
@@ -166,12 +199,12 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
+		NcButton,
 		CardItem,
 		Container,
 		Draggable,
 		NcModal,
 		ArchiveIcon,
-		CardPlusOutline,
 		CheckCircleOutline,
 	},
 	directives: {
@@ -234,6 +267,15 @@ export default {
 				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
 			},
 		},
+		stackAddCardAtTop() {
+			return this.$store.getters.config('stackAddCardAtTop') !== false
+		},
+		canAddCardAtTop() {
+			return this.canEdit && !this.showArchived && !this.isArchived && this.stackAddCardAtTop
+		},
+		canAddCardAtBottom() {
+			return this.canEdit && !this.showArchived && !this.isArchived && !this.stackAddCardAtTop
+		},
 	},
 	watch: {
 		showAddCard(newValue) {
@@ -325,18 +367,30 @@ export default {
 		async clickAddCard() {
 			this.stateCardCreating = true
 			try {
+				const addCardAtTop = this.stackAddCardAtTop
 				this.animate = true
 				const newCard = await this.$store.dispatch('addCard', {
 					title: this.newCardTitle,
 					stackId: this.stack.id,
 					boardId: this.stack.boardId,
+					order: addCardAtTop ? 0 : 999,
 				})
+				if (addCardAtTop) {
+					await this.$store.dispatch('reorderCard', {
+						...newCard,
+						stackId: this.stack.id,
+						order: 0,
+					})
+				}
 				this.newCardTitle = ''
 				this.showAddCard = true
 				this.$nextTick(() => {
 					this.$refs.newCardInput.focus()
 					this.animate = false
-					this.$refs.card[(this.$refs.card.length - 1)].scrollIntoView()
+					if (this.$refs.card && this.$refs.card.length > 0) {
+						const index = addCardAtTop ? 0 : this.$refs.card.length - 1
+						this.$refs.card[index].scrollIntoView()
+					}
 				})
 				if (!this.cardDetailsInModal) {
 					this.$router.push({ name: 'card', params: { cardId: newCard.id } })
@@ -512,10 +566,17 @@ export default {
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
-		padding-bottom: $stack-gap;
 		background-color: var(--color-main-background);
 		position: relative;
 
+		&--top {
+			padding-top: $stack-gap;
+		}
+
+		&--bottom {
+			padding-bottom: $stack-gap;
+		}
+
 		// Smooth fade out of the cards at the top
 		&:before {
 			content: '';

From 8e6289010ccf813aca7f3c16310b8d4657c4ae4b Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:12:22 +0000
Subject: [PATCH 03/24] Move 'Add card' button at bottom of stack right
 underneath last card but make it stick in visible area on overflow

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 77 ++++++++++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 4 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 2a4c9f315c..f954fcf82b 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -4,8 +4,12 @@
 -->
 
 <template>
-	<div class="stack" :class="{'stack--done-column': isDoneColumn}" :data-cy-stack="stack.title">
-		<div v-click-outside="stopCardCreation"
+	<div ref="stack"
+		class="stack"
+		:class="{'stack--done-column': isDoneColumn, 'stack--bottom-add-inline': bottomAddCardInline}"
+		:data-cy-stack="stack.title">
+		<div ref="header"
+			v-click-outside="stopCardCreation"
 			class="stack__header"
 			:class="{'stack__header--add': showAddCard, 'stack__header--done-column': isDoneColumn}"
 			:aria-label="stack.title">
@@ -126,7 +130,8 @@
 			</div>
 		</transition>
 
-		<Container :get-child-payload="payloadForCard(stack.id)"
+		<Container ref="cardsContainer"
+			:get-child-payload="payloadForCard(stack.id)"
 			class="dnd-container"
 			group-name="stack"
 			data-click-closes-sidebar="true"
@@ -147,7 +152,7 @@
 		</Container>
 
 		<transition name="slide-bottom" appear>
-			<div v-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
+			<div v-if="canAddCardAtBottom" ref="bottomAddCard" class="stack__card-add stack__card-add--bottom">
 				<NcButton v-if="!showAddCard"
 					data-cy="action:add-card"
 					class="stack__card-add-button"
@@ -229,6 +234,8 @@ export default {
 			showAddCard: false,
 			stateCardCreating: false,
 			animate: false,
+			bottomAddCardInline: false,
+			bottomAddCardResizeObserver: null,
 			modalArchivAllCardsShow: false,
 			stackTransfer: {
 				total: 0,
@@ -278,6 +285,9 @@ export default {
 		},
 	},
 	watch: {
+		cardsByStack() {
+			this.$nextTick(this.updateBottomAddCardLayout)
+		},
 		showAddCard(newValue) {
 			if (!newValue) {
 				this.$store.dispatch('toggleShortcutLock', false)
@@ -286,11 +296,22 @@ export default {
 					this.$refs.newCardInput.focus()
 				})
 			}
+			this.$nextTick(this.updateBottomAddCardLayout)
+		},
+		canAddCardAtBottom() {
+			this.$nextTick(this.updateBottomAddCardLayout)
 		},
 	},
 
 	mounted() {
 		this.setupAutoscrollOnDrag()
+		this.setupBottomAddCardLayout()
+	},
+
+	beforeDestroy() {
+		if (this.bottomAddCardResizeObserver) {
+			this.bottomAddCardResizeObserver.disconnect()
+		}
 	},
 
 	methods: {
@@ -327,6 +348,46 @@ export default {
 				return this.cardsByStack[index]
 			}
 		},
+		getCardsContainerElement() {
+			return this.$refs.cardsContainer?.$el || this.$refs.cardsContainer
+		},
+		setupBottomAddCardLayout() {
+			this.$nextTick(() => {
+				this.updateBottomAddCardLayout()
+
+				if (typeof ResizeObserver === 'undefined') {
+					return
+				}
+
+				this.bottomAddCardResizeObserver = new ResizeObserver(() => {
+					this.updateBottomAddCardLayout()
+				})
+
+				const observedElements = [
+					this.$refs.stack,
+					this.getCardsContainerElement(),
+					this.$refs.bottomAddCard,
+				].filter(Boolean)
+
+				observedElements.forEach((element) => {
+					this.bottomAddCardResizeObserver.observe(element)
+				})
+			})
+		},
+		updateBottomAddCardLayout() {
+			const stackElement = this.$refs.stack
+			const headerElement = this.$refs.header
+			const cardsContainerElement = this.getCardsContainerElement()
+			const bottomAddCardElement = this.$refs.bottomAddCard
+
+			if (!this.canAddCardAtBottom || !stackElement || !headerElement || !cardsContainerElement || !bottomAddCardElement) {
+				this.bottomAddCardInline = false
+				return
+			}
+
+			const availableCardsHeight = stackElement.clientHeight - headerElement.offsetHeight - bottomAddCardElement.offsetHeight
+			this.bottomAddCardInline = cardsContainerElement.scrollHeight <= availableCardsHeight
+		},
 		toggleDoneColumn() {
 			this.$store.dispatch('setDoneStack', {
 				stackId: this.stack.id,
@@ -450,6 +511,12 @@ export default {
 			flex-grow: 1;
 		}
 
+		&.stack--bottom-add-inline {
+			.dnd-container {
+				flex-grow: 0;
+			}
+		}
+
 		&.stack--done-column {
 			.stack__header--done-column {
 				border-bottom: 2px solid var(--color-success);
@@ -575,6 +642,8 @@ export default {
 
 		&--bottom {
 			padding-bottom: $stack-gap;
+			position: sticky;
+			bottom: 0;
 		}
 
 		// Smooth fade out of the cards at the top

From 8912d67646953c0348df8e56557aa16a5bceecc9 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:18:06 +0000
Subject: [PATCH 04/24] Add fade-out gradient for overflowing stacks

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index f954fcf82b..f9a2cb38a0 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -6,7 +6,11 @@
 <template>
 	<div ref="stack"
 		class="stack"
-		:class="{'stack--done-column': isDoneColumn, 'stack--bottom-add-inline': bottomAddCardInline}"
+		:class="{
+			'stack--done-column': isDoneColumn,
+			'stack--bottom-add-inline': bottomAddCardInline,
+			'stack--add-card-at-top': canAddCardAtTop,
+		}"
 		:data-cy-stack="stack.title">
 		<div ref="header"
 			v-click-outside="stopCardCreation"
@@ -517,6 +521,25 @@ export default {
 			}
 		}
 
+		&.stack--add-card-at-top {
+			.dnd-container {
+				-webkit-mask-image: linear-gradient(
+					180deg,
+					transparent 0,
+					black $stack-gap,
+					black calc(100% - #{$stack-gap}),
+					transparent 100%
+				);
+				mask-image: linear-gradient(
+					180deg,
+					transparent 0,
+					black $stack-gap,
+					black calc(100% - #{$stack-gap}),
+					transparent 100%
+				);
+			}
+		}
+
 		&.stack--done-column {
 			.stack__header--done-column {
 				border-bottom: 2px solid var(--color-success);

From ef6b136ead1716ded51cdc28e4030607817f0246 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:24:51 +0000
Subject: [PATCH 05/24] Use a different approach for the overflow gradient
 because CSS `mask-image` was cutting of dragged cards.

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 38 ++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index f9a2cb38a0..1068a33552 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -522,21 +522,16 @@ export default {
 		}
 
 		&.stack--add-card-at-top {
-			.dnd-container {
-				-webkit-mask-image: linear-gradient(
-					180deg,
-					transparent 0,
-					black $stack-gap,
-					black calc(100% - #{$stack-gap}),
-					transparent 100%
-				);
-				mask-image: linear-gradient(
-					180deg,
-					transparent 0,
-					black $stack-gap,
-					black calc(100% - #{$stack-gap}),
-					transparent 100%
-				);
+			&:after {
+				content: '';
+				display: block;
+				position: absolute;
+				width: 100%;
+				height: $stack-gap;
+				bottom: 0;
+				z-index: 99;
+				pointer-events: none;
+				background-image: linear-gradient(0deg, var(--color-main-background) 0%, transparent 100%);
 			}
 		}
 
@@ -661,6 +656,19 @@ export default {
 
 		&--top {
 			padding-top: $stack-gap;
+
+			&:after {
+				content: '';
+				display: block;
+				position: absolute;
+				width: 100%;
+				height: $stack-gap;
+				bottom: 0;
+				z-index: 99;
+				pointer-events: none;
+				background-image: linear-gradient(180deg, var(--color-main-background) 0%, transparent 100%);
+				transform: translateY(100%);
+			}
 		}
 
 		&--bottom {

From 60aa2d00e7939f0955dda40bb62c8e7a2ff1cc35 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 11:29:11 +0000
Subject: [PATCH 06/24] Forms to add a new card can be close by pressing enter
 key

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 1068a33552..099f516ee1 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -125,7 +125,7 @@
 						required
 						pattern=".*\S+.*"
 						@focus="onCreateCardFocus"
-						@keydown.esc="stopCardCreation">
+						@keydown.esc.stop="closeCardCreation">
 					<input v-show="!stateCardCreating"
 						class="icon-confirm"
 						type="submit"
@@ -179,7 +179,7 @@
 						required
 						pattern=".*\S+.*"
 						@focus="onCreateCardFocus"
-						@keydown.esc="stopCardCreation">
+						@keydown.esc.stop="closeCardCreation">
 					<input v-show="!stateCardCreating"
 						class="icon-confirm"
 						type="submit"
@@ -319,6 +319,10 @@ export default {
 	},
 
 	methods: {
+		closeCardCreation() {
+			this.showAddCard = false
+			return false
+		},
 		stopCardCreation(e) {
 			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
 			// so we have to ignore it

From 6e4152090203cd40d91046b9f57234e533780d92 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 13:37:22 +0000
Subject: [PATCH 07/24] Improve position of 'Add card' button for empty stacks
 when setting is set to 'add to bottom'

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 43f9da64b9..2e69e75de3 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -9,6 +9,7 @@
 		:class="{
 			'stack--done-column': isDoneColumn,
 			'stack--bottom-add-inline': bottomAddCardInline,
+			'stack--bottom-add-empty': isEmptyBottomAddCardStack,
 			'stack--add-card-at-top': canAddCardAtTop,
 		}"
 		:data-cy-stack="stack.title">
@@ -289,6 +290,12 @@ export default {
 		canAddCardAtBottom() {
 			return this.canEdit && !this.showArchived && !this.isArchived && !this.stackAddCardAtTop
 		},
+		isEmptyStack() {
+			return this.cardsByStack.length === 0
+		},
+		isEmptyBottomAddCardStack() {
+			return this.canAddCardAtBottom && this.isEmptyStack
+		},
 	},
 	watch: {
 		cardsByStack() {
@@ -528,6 +535,21 @@ export default {
 			}
 		}
 
+		&.stack--bottom-add-empty {
+			.dnd-container {
+				order: 2;
+				flex-grow: 0;
+				padding-block: 0;
+			}
+
+			.stack__card-add--bottom {
+				order: 1;
+				padding-top: $stack-gap;
+				padding-bottom: 0;
+				position: relative;
+			}
+		}
+
 		&.stack--add-card-at-top {
 			&:after {
 				content: '';

From 89888310d4ed7a72cc3b01981e39182fc7c06c9b Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 13:53:39 +0000
Subject: [PATCH 08/24] Keep the default setting adding cards to the bottom of
 a list

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 lib/Service/ConfigService.php      | 2 +-
 src/components/DeckAppSettings.vue | 2 +-
 src/components/board/Stack.vue     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/Service/ConfigService.php b/lib/Service/ConfigService.php
index 0b9dde777b..6cf4a20cdd 100644
--- a/lib/Service/ConfigService.php
+++ b/lib/Service/ConfigService.php
@@ -146,7 +146,7 @@ public function isStackAddCardAtTopEnabled(): bool {
 			return false;
 		}
 
-		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', true);
+		return (bool)$this->config->getUserValue($userId, Application::APP_ID, 'stackAddCardAtTop', false);
 	}
 
 	public function ensureFederationEnabled() {
diff --git a/src/components/DeckAppSettings.vue b/src/components/DeckAppSettings.vue
index 8045bcc2df..4d095b3448 100644
--- a/src/components/DeckAppSettings.vue
+++ b/src/components/DeckAppSettings.vue
@@ -123,7 +123,7 @@ export default {
 		},
 		stackAddCardAtTop: {
 			get() {
-				return this.$store.getters.config('stackAddCardAtTop') !== false
+				return this.$store.getters.config('stackAddCardAtTop') === true
 			},
 			set(newValue) {
 				this.$store.dispatch('setConfig', { stackAddCardAtTop: newValue })
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 2e69e75de3..a1ab65cf2c 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -282,7 +282,7 @@ export default {
 			},
 		},
 		stackAddCardAtTop() {
-			return this.$store.getters.config('stackAddCardAtTop') !== false
+			return this.$store.getters.config('stackAddCardAtTop') === true
 		},
 		canAddCardAtTop() {
 			return this.canEdit && !this.showArchived && !this.isArchived && this.stackAddCardAtTop

From 5a12a1a14e591f2895c4ba928d596418d9634792 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 15:57:39 +0000
Subject: [PATCH 09/24] Use a real + icon instead of using text for 'Add card'
 button

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index a1ab65cf2c..3a5851ce1e 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -110,7 +110,10 @@
 					type="tertiary"
 					:wide="true"
 					@click.stop="showAddCard=true">
-					{{ t('deck', '+ Add card') }}
+					<template #icon>
+						<PlusIcon :size="20" />
+					</template>
+					{{ t('deck', 'Add card') }}
 				</NcButton>
 				<form v-else
 					:class="{ 'icon-loading-small': stateCardCreating }"
@@ -164,7 +167,10 @@
 					type="tertiary"
 					:wide="true"
 					@click.stop="showAddCard=true">
-					{{ t('deck', '+ Add card') }}
+					<template #icon>
+						<PlusIcon :size="20" />
+					</template>
+					{{ t('deck', 'Add card') }}
 				</NcButton>
 				<form v-else
 					:class="{ 'icon-loading-small': stateCardCreating }"
@@ -197,6 +203,7 @@ import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CheckCircleOutline from 'vue-material-design-icons/CheckCircleOutline.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import { NcActions, NcActionButton, NcButton, NcModal } from '@nextcloud/vue'
 import { showError, showUndo } from '@nextcloud/dialogs'
 
@@ -218,6 +225,7 @@ export default {
 		NcModal,
 		ArchiveIcon,
 		CheckCircleOutline,
+		PlusIcon,
 	},
 	directives: {
 		ClickOutside,

From 57442260d553b98f8ec8733913d446b42a2ff7b7 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 19 Jul 2026 17:13:46 +0000
Subject: [PATCH 10/24] Removed duplicated user account check and improved
 method naming

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 lib/Service/ConfigService.php  | 3 ---
 src/components/board/Stack.vue | 4 ++--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/lib/Service/ConfigService.php b/lib/Service/ConfigService.php
index 6cf4a20cdd..7378b09f41 100644
--- a/lib/Service/ConfigService.php
+++ b/lib/Service/ConfigService.php
@@ -92,9 +92,6 @@ public function get(string $key) {
 				}
 				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', false);
 			case 'stackAddCardAtTop':
-				if ($this->getUserId() === null) {
-					return false;
-				}
 				return $this->isStackAddCardAtTopEnabled();
 		}
 		return false;
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 3a5851ce1e..6b567f2515 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -9,7 +9,7 @@
 		:class="{
 			'stack--done-column': isDoneColumn,
 			'stack--bottom-add-inline': bottomAddCardInline,
-			'stack--bottom-add-empty': isEmptyBottomAddCardStack,
+			'stack--bottom-add-empty': isEmptyStackWithBottomAddCard,
 			'stack--add-card-at-top': canAddCardAtTop,
 		}"
 		:data-cy-stack="stack.title">
@@ -301,7 +301,7 @@ export default {
 		isEmptyStack() {
 			return this.cardsByStack.length === 0
 		},
-		isEmptyBottomAddCardStack() {
+		isEmptyStackWithBottomAddCard() {
 			return this.canAddCardAtBottom && this.isEmptyStack
 		},
 	},

From 050a23d16ea4ae87a850ef14fbd338d5b381367a Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Mon, 20 Jul 2026 07:02:11 +0000
Subject: [PATCH 11/24] Fix cypress tests

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 cypress/e2e/cardColor.js       |  2 +-
 cypress/e2e/cardFeatures.js    | 12 ++++++------
 cypress/e2e/sharingFeatures.js |  6 +++---
 src/components/Controls.vue    |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/cardColor.js b/cypress/e2e/cardColor.js
index 569e43ff19..6c053bbdb1 100644
--- a/cypress/e2e/cardColor.js
+++ b/cypress/e2e/cardColor.js
@@ -46,7 +46,7 @@ describe('Card color', function () {
 
 		const newCardTitle = 'Card with color'
 
-		cy.get('.button-vue[aria-label*="Add card"]')
+		cy.get('[data-cy="action:add-card"]')
 			.first().click()
 		cy.get('.stack__card-add form input#new-stack-input-main')
 			.type(newCardTitle)
diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index a62e5bedc3..d559ac02bf 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -52,7 +52,7 @@ describe('Card', function () {
 		cy.get('.board .stack').eq(0).within(() => {
 			cy.get('.card:contains("Hello world")').should('be.visible')
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -69,7 +69,7 @@ describe('Card', function () {
 		cy.intercept({ method: 'POST', url: '**/ocs/v2.php/apps/deck/api/v1.0/cards' }).as('save')
 		cy.intercept({ method: 'GET', url: '**/apps/deck/boards/*' }).as('getBoard')
 
-		cy.get('.button-vue[aria-label*="Add card"]')
+		cy.get('[data-cy="action:add-card"]')
 			.first().click()
 
 		// Somehow this avoids the electron crash
@@ -98,7 +98,7 @@ describe('Card', function () {
 		cy.visit(`/apps/deck/#/board/${boardId}`)
 		const absoluteUrl = `https://example.com`
 		cy.get('.board .stack').eq(0).within(() => {
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -120,7 +120,7 @@ describe('Card', function () {
 		const absoluteUrl = `https://example.com`
 		const plainTitle = 'New title'
 		cy.get('.board .stack').eq(0).within(() => {
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 
 			cy.get('.stack__card-add form input#new-stack-input-main')
@@ -260,7 +260,7 @@ describe('Card', function () {
 		it('Set a due date', function () {
 			const newCardTitle = 'Card with a due date'
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 			cy.get('.stack__card-add form input#new-stack-input-main')
 				.type(newCardTitle)
@@ -296,7 +296,7 @@ describe('Card', function () {
 		it('Add a label', function () {
 			const newCardTitle = 'Card with labels'
 
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 			cy.get('.stack__card-add form input#new-stack-input-main')
 				.type(newCardTitle)
diff --git a/cypress/e2e/sharingFeatures.js b/cypress/e2e/sharingFeatures.js
index abe1ed3f8f..d90844c677 100644
--- a/cypress/e2e/sharingFeatures.js
+++ b/cypress/e2e/sharingFeatures.js
@@ -32,7 +32,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.should('not.exist')
 		})
 	})
@@ -50,7 +50,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.should('not.exist')
 		})
 	})
@@ -71,7 +71,7 @@ describe('Board', function() {
 			cy.login(recipient)
 			cy.visit(`/apps/deck/#/board/${boardId}`)
 			cy.get('.board-title').contains(board.title)
-			cy.get('.button-vue[aria-label*="Add card"]')
+			cy.get('[data-cy="action:add-card"]')
 				.first().click()
 		})
 	})
diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index c84b126a0e..5001ab9f99 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -14,7 +14,7 @@
 				{{ overviewName }}
 			</h2>
 			<NcActions>
-				<NcActionButton icon="icon-add" @click="clickShowAddCardModel">
+				<NcActionButton data-cy="action:add-card" icon="icon-add" @click="clickShowAddCardModel">
 					{{ t('deck', 'Add card') }}
 				</NcActionButton>
 			</NcActions>

From bcaea9dc312e692696687b64c8efc6a1ceb2e4b2 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Mon, 20 Jul 2026 09:09:36 +0000
Subject: [PATCH 12/24] Fix a cypress test

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 cypress/e2e/cardFeatures.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index d559ac02bf..82d72a7aaa 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -303,6 +303,13 @@ describe('Card', function () {
 			cy.get('.stack__card-add form input[type=submit]')
 				.first().click()
 			cy.get(`.card:contains("${newCardTitle}")`).should('be.visible').click()
+			cy.get('body').then(($body) => {
+				const addCardInput = $body.find('.stack__card-add form input#new-stack-input-main')
+				if (addCardInput.length) {
+					cy.wrap(addCardInput.first()).type('{esc}')
+				}
+			})
+			cy.get('.stack__card-add form').should('not.exist')
 
 			// Add delay to ensure the events are bound
 			cy.wait(1000)
@@ -316,8 +323,10 @@ describe('Card', function () {
 			cy.get('.vs__selected .tag:contains("Action needed")')
 				.parent().find('button').click()
 
-			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Later")')
-				.should('be.visible')
+			cy.get(`.card:contains("${newCardTitle}")`)
+				.scrollIntoView({ block: 'center' })
+				.find('.labels li:contains("Later")')
+				.should('exist')
 			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Action needed")')
 				.should('not.exist')
 		})

From 1971a97549c1c267868574e0da58dd2d0606bb3f Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Wed, 22 Jul 2026 13:07:04 +0000
Subject: [PATCH 13/24] Simplify JS, use CSS for layout instead if possible

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 75 ++++------------------------------
 1 file changed, 7 insertions(+), 68 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 6b567f2515..3955aadab7 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -4,17 +4,14 @@
 -->
 
 <template>
-	<div ref="stack"
-		class="stack"
+	<div class="stack"
 		:class="{
 			'stack--done-column': isDoneColumn,
-			'stack--bottom-add-inline': bottomAddCardInline,
 			'stack--bottom-add-empty': isEmptyStackWithBottomAddCard,
 			'stack--add-card-at-top': canAddCardAtTop,
 		}"
 		:data-cy-stack="stack.title">
-		<div ref="header"
-			v-click-outside="stopCardCreation"
+		<div v-click-outside="stopCardCreation"
 			class="stack__header"
 			:class="{'stack__header--add': showAddCard, 'stack__header--done-column': isDoneColumn}"
 			:aria-label="stack.title">
@@ -138,8 +135,7 @@
 			</div>
 		</transition>
 
-		<Container ref="cardsContainer"
-			:get-child-payload="payloadForCard(stack.id)"
+		<Container :get-child-payload="payloadForCard(stack.id)"
 			class="dnd-container"
 			group-name="stack"
 			data-click-closes-sidebar="true"
@@ -160,7 +156,7 @@
 		</Container>
 
 		<transition name="slide-bottom" appear>
-			<div v-if="canAddCardAtBottom" ref="bottomAddCard" class="stack__card-add stack__card-add--bottom">
+			<div v-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
 				<NcButton v-if="!showAddCard"
 					data-cy="action:add-card"
 					class="stack__card-add-button"
@@ -249,8 +245,6 @@ export default {
 			showAddCard: false,
 			stateCardCreating: false,
 			animate: false,
-			bottomAddCardInline: false,
-			bottomAddCardResizeObserver: null,
 			modalArchivAllCardsShow: false,
 			stackTransfer: {
 				total: 0,
@@ -306,9 +300,6 @@ export default {
 		},
 	},
 	watch: {
-		cardsByStack() {
-			this.$nextTick(this.updateBottomAddCardLayout)
-		},
 		showAddCard(newValue) {
 			if (!newValue) {
 				this.$store.dispatch('toggleShortcutLock', false)
@@ -317,22 +308,11 @@ export default {
 					this.$refs.newCardInput.focus()
 				})
 			}
-			this.$nextTick(this.updateBottomAddCardLayout)
-		},
-		canAddCardAtBottom() {
-			this.$nextTick(this.updateBottomAddCardLayout)
 		},
 	},
 
 	mounted() {
 		this.setupAutoscrollOnDrag()
-		this.setupBottomAddCardLayout()
-	},
-
-	beforeDestroy() {
-		if (this.bottomAddCardResizeObserver) {
-			this.bottomAddCardResizeObserver.disconnect()
-		}
 	},
 
 	methods: {
@@ -374,46 +354,6 @@ export default {
 				return this.cardsByStack[index]
 			}
 		},
-		getCardsContainerElement() {
-			return this.$refs.cardsContainer?.$el || this.$refs.cardsContainer
-		},
-		setupBottomAddCardLayout() {
-			this.$nextTick(() => {
-				this.updateBottomAddCardLayout()
-
-				if (typeof ResizeObserver === 'undefined') {
-					return
-				}
-
-				this.bottomAddCardResizeObserver = new ResizeObserver(() => {
-					this.updateBottomAddCardLayout()
-				})
-
-				const observedElements = [
-					this.$refs.stack,
-					this.getCardsContainerElement(),
-					this.$refs.bottomAddCard,
-				].filter(Boolean)
-
-				observedElements.forEach((element) => {
-					this.bottomAddCardResizeObserver.observe(element)
-				})
-			})
-		},
-		updateBottomAddCardLayout() {
-			const stackElement = this.$refs.stack
-			const headerElement = this.$refs.header
-			const cardsContainerElement = this.getCardsContainerElement()
-			const bottomAddCardElement = this.$refs.bottomAddCard
-
-			if (!this.canAddCardAtBottom || !stackElement || !headerElement || !cardsContainerElement || !bottomAddCardElement) {
-				this.bottomAddCardInline = false
-				return
-			}
-
-			const availableCardsHeight = stackElement.clientHeight - headerElement.offsetHeight - bottomAddCardElement.offsetHeight
-			this.bottomAddCardInline = cardsContainerElement.scrollHeight <= availableCardsHeight
-		},
 		toggleDoneColumn() {
 			this.$store.dispatch('setDoneStack', {
 				stackId: this.stack.id,
@@ -537,9 +477,10 @@ export default {
 			flex-grow: 1;
 		}
 
-		&.stack--bottom-add-inline {
+		&:not(.stack--add-card-at-top) {
 			.dnd-container {
-				flex-grow: 0;
+			flex: 0 1 auto;
+			min-height: 0;
 			}
 		}
 
@@ -710,8 +651,6 @@ export default {
 
 		&--bottom {
 			padding-bottom: $stack-gap;
-			position: sticky;
-			bottom: 0;
 		}
 
 		// Smooth fade out of the cards at the top

From 405dc44cc02a2e5680134a583d4024aa7091070c Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Wed, 22 Jul 2026 13:57:13 +0000
Subject: [PATCH 14/24] Avoid layout shift when clicking the 'Add to card'
 button in add-to-top mode

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 3955aadab7..74d56825d8 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -626,6 +626,7 @@ export default {
 	}
 
 	.stack__card-add {
+		--stack-card-add-control-height: calc(var(--default-clickable-area) + 2 * var(--default-grid-baseline));
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
@@ -666,9 +667,15 @@ export default {
 			transform: translateY(-100%);
 		}
 
+		:deep(.stack__card-add-button.button-vue) {
+			--button-size: var(--stack-card-add-control-height);
+		}
+
 		form {
 			display: flex;
 			width: 100%;
+			height: var(--stack-card-add-control-height);
+			box-sizing: border-box;
 			border: 2px solid var(--color-border-maxcontrast);
 			border-radius: var(--border-radius-large);
 			overflow: hidden;

From 08aaf0f28d5dc7482def9884f7887089e1f2bb58 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Wed, 22 Jul 2026 14:26:12 +0000
Subject: [PATCH 15/24] Use muted colors for 'Add card' button

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 74d56825d8..993a9efaef 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -669,6 +669,12 @@ export default {
 
 		:deep(.stack__card-add-button.button-vue) {
 			--button-size: var(--stack-card-add-control-height);
+			color: var(--color-text-maxcontrast);
+
+			&:hover:not(:disabled),
+			&:focus-visible {
+				color: var(--color-main-text);
+			}
 		}
 
 		form {

From d98a2618672e7d7e52a435e4a86903e07b9cacb3 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sun, 26 Jul 2026 17:05:47 +0000
Subject: [PATCH 16/24] Fix dropzone for empty add-to-bottom stacks

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 76 ++++++++++++++++++++++++++--------
 1 file changed, 59 insertions(+), 17 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 993a9efaef..0552826a09 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -155,8 +155,51 @@
 			</Draggable>
 		</Container>
 
-		<transition name="slide-bottom" appear>
-			<div v-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
+		<Container v-if="canAddCardAtBottom && isEmptyStackWithBottomAddCard"
+				:get-child-payload="payloadForCard(stack.id)"
+				class="dnd-container stack__card-add stack__card-add--bottom stack__card-add--dropzone"
+				group-name="stack"
+				data-click-closes-sidebar="true"
+				non-drag-area-selector=".dragDisabled"
+				:drag-handle-selector="dragHandleSelector"
+				data-dragscroll-enabled
+				@should-accept-drop="canEdit"
+				@drag-start="draggingCard = true"
+				@drag-end="draggingCard = false"
+				@drop="($event) => onDropCard(stack.id, $event)">
+				<NcButton v-if="!showAddCard"
+					data-cy="action:add-card"
+					class="stack__card-add-button"
+					type="tertiary"
+					:wide="true"
+					@click.stop="showAddCard=true">
+					<template #icon>
+						<PlusIcon :size="20" />
+					</template>
+					{{ t('deck', 'Add card') }}
+				</NcButton>
+				<form v-else
+					:class="{ 'icon-loading-small': stateCardCreating }"
+					@submit.prevent.stop="clickAddCard()">
+					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
+					<input id="new-stack-input-main"
+						ref="newCardInput"
+						v-model="newCardTitle"
+						type="text"
+						class="no-close"
+						:disabled="stateCardCreating"
+						:placeholder="t('deck', 'Card name')"
+						required
+						pattern=".*\S+.*"
+						@focus="onCreateCardFocus"
+						@keydown.esc.stop="closeCardCreation">
+					<input v-show="!stateCardCreating"
+						class="icon-confirm"
+						type="submit"
+						value="">
+				</form>
+				</Container>
+				<div v-else-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
 				<NcButton v-if="!showAddCard"
 					data-cy="action:add-card"
 					class="stack__card-add-button"
@@ -189,7 +232,6 @@
 						value="">
 				</form>
 			</div>
-		</transition>
 	</div>
 </template>
 
@@ -472,6 +514,7 @@ export default {
 	@import './../../css/variables.scss';
 
 	.stack {
+		--stack-card-add-control-height: calc(var(--default-clickable-area) + 2 * var(--default-grid-baseline));
 		width: 100%;
 		.dnd-container {
 			flex-grow: 1;
@@ -491,10 +534,20 @@ export default {
 				padding-block: 0;
 			}
 
-			.stack__card-add--bottom {
+			:deep(.smooth-dnd-container.vertical.stack__card-add--dropzone) {
+				padding: 0;
+				margin: 0;
+			}
+
+			.stack__card-add--dropzone {
+				flex: 0 0 auto;
 				order: 1;
-				padding-top: $stack-gap;
-				padding-bottom: 0;
+				display: flex;
+				align-items: center;
+				padding-block: $stack-gap;
+				padding-inline: 0;
+				height: calc(var(--stack-card-add-control-height) + (2 * #{$stack-gap}));
+				box-sizing: border-box;
 				position: relative;
 			}
 		}
@@ -626,7 +679,6 @@ export default {
 	}
 
 	.stack__card-add {
-		--stack-card-add-control-height: calc(var(--default-clickable-area) + 2 * var(--default-grid-baseline));
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;
@@ -718,16 +770,6 @@ export default {
 		opacity: 0;
 	}
 
-	.slide-bottom-enter-active,
-	.slide-bottom-leave-active {
-		transition: all 100ms ease;
-	}
-
-	.slide-bottom-enter, .slide-bottom-leave-to {
-		transform: translateY(20px);
-		opacity: 0;
-	}
-
 	.modal__content {
 		width: 25vw;
 		min-width: 250px;

From 95dd1c0718dae06a06f92124c2ac19150bf5ee99 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Tue, 28 Jul 2026 14:26:06 +0000
Subject: [PATCH 17/24] Remove all transitions and make remove padding from
 empty card lists for add-to-bottom lists

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 245 +++++++++++++++------------------
 1 file changed, 114 insertions(+), 131 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 0552826a09..455b468655 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -99,44 +99,42 @@
 			</div>
 		</NcModal>
 
-		<transition name="slide-top" appear>
-			<div v-if="canAddCardAtTop" class="stack__card-add stack__card-add--top">
-				<NcButton v-if="!showAddCard"
-					data-cy="action:add-card"
-					class="stack__card-add-button"
-					type="tertiary"
-					:wide="true"
-					@click.stop="showAddCard=true">
-					<template #icon>
-						<PlusIcon :size="20" />
-					</template>
-					{{ t('deck', 'Add card') }}
-				</NcButton>
-				<form v-else
-					:class="{ 'icon-loading-small': stateCardCreating }"
-					@submit.prevent.stop="clickAddCard()">
-					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
-					<input id="new-stack-input-main"
-						ref="newCardInput"
-						v-model="newCardTitle"
-						type="text"
-						class="no-close"
-						:disabled="stateCardCreating"
-						:placeholder="t('deck', 'Card name')"
-						required
-						pattern=".*\S+.*"
-						@focus="onCreateCardFocus"
-						@keydown.esc.stop="closeCardCreation">
-					<input v-show="!stateCardCreating"
-						class="icon-confirm"
-						type="submit"
-						value="">
-				</form>
-			</div>
-		</transition>
+		<div v-if="canAddCardAtTop" class="stack__card-add stack__card-add--top">
+			<NcButton v-if="!showAddCard"
+				data-cy="action:add-card"
+				class="stack__card-add-button"
+				type="tertiary"
+				:wide="true"
+				@click.stop="showAddCard=true">
+				<template #icon>
+					<PlusIcon :size="20" />
+				</template>
+				{{ t('deck', 'Add card') }}
+			</NcButton>
+			<form v-else
+				:class="{ 'icon-loading-small': stateCardCreating }"
+				@submit.prevent.stop="clickAddCard()">
+				<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
+				<input id="new-stack-input-main"
+					ref="newCardInput"
+					v-model="newCardTitle"
+					type="text"
+					class="no-close"
+					:disabled="stateCardCreating"
+					:placeholder="t('deck', 'Card name')"
+					required
+					pattern=".*\S+.*"
+					@focus="onCreateCardFocus"
+					@keydown.esc.stop="closeCardCreation">
+				<input v-show="!stateCardCreating"
+					class="icon-confirm"
+					type="submit"
+					value="">
+			</form>
+		</div>
 
 		<Container :get-child-payload="payloadForCard(stack.id)"
-			class="dnd-container"
+			class="dnd-container stack__cards-list"
 			group-name="stack"
 			data-click-closes-sidebar="true"
 			non-drag-area-selector=".dragDisabled"
@@ -156,82 +154,81 @@
 		</Container>
 
 		<Container v-if="canAddCardAtBottom && isEmptyStackWithBottomAddCard"
-				:get-child-payload="payloadForCard(stack.id)"
-				class="dnd-container stack__card-add stack__card-add--bottom stack__card-add--dropzone"
-				group-name="stack"
-				data-click-closes-sidebar="true"
-				non-drag-area-selector=".dragDisabled"
-				:drag-handle-selector="dragHandleSelector"
-				data-dragscroll-enabled
-				@should-accept-drop="canEdit"
-				@drag-start="draggingCard = true"
-				@drag-end="draggingCard = false"
-				@drop="($event) => onDropCard(stack.id, $event)">
-				<NcButton v-if="!showAddCard"
-					data-cy="action:add-card"
-					class="stack__card-add-button"
-					type="tertiary"
-					:wide="true"
-					@click.stop="showAddCard=true">
-					<template #icon>
-						<PlusIcon :size="20" />
-					</template>
-					{{ t('deck', 'Add card') }}
-				</NcButton>
-				<form v-else
-					:class="{ 'icon-loading-small': stateCardCreating }"
-					@submit.prevent.stop="clickAddCard()">
-					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
-					<input id="new-stack-input-main"
-						ref="newCardInput"
-						v-model="newCardTitle"
-						type="text"
-						class="no-close"
-						:disabled="stateCardCreating"
-						:placeholder="t('deck', 'Card name')"
-						required
-						pattern=".*\S+.*"
-						@focus="onCreateCardFocus"
-						@keydown.esc.stop="closeCardCreation">
-					<input v-show="!stateCardCreating"
-						class="icon-confirm"
-						type="submit"
-						value="">
-				</form>
-				</Container>
-				<div v-else-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
-				<NcButton v-if="!showAddCard"
-					data-cy="action:add-card"
-					class="stack__card-add-button"
-					type="tertiary"
-					:wide="true"
-					@click.stop="showAddCard=true">
-					<template #icon>
-						<PlusIcon :size="20" />
-					</template>
-					{{ t('deck', 'Add card') }}
-				</NcButton>
-				<form v-else
-					:class="{ 'icon-loading-small': stateCardCreating }"
-					@submit.prevent.stop="clickAddCard()">
-					<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
-					<input id="new-stack-input-main"
-						ref="newCardInput"
-						v-model="newCardTitle"
-						type="text"
-						class="no-close"
-						:disabled="stateCardCreating"
-						:placeholder="t('deck', 'Card name')"
-						required
-						pattern=".*\S+.*"
-						@focus="onCreateCardFocus"
-						@keydown.esc.stop="closeCardCreation">
-					<input v-show="!stateCardCreating"
-						class="icon-confirm"
-						type="submit"
-						value="">
-				</form>
-			</div>
+			:get-child-payload="payloadForCard(stack.id)"
+			class="dnd-container stack__card-add stack__card-add--bottom stack__card-add--dropzone"
+			group-name="stack"
+			data-click-closes-sidebar="true"
+			non-drag-area-selector=".dragDisabled"
+			:drag-handle-selector="dragHandleSelector"
+			@should-accept-drop="canEdit"
+			@drag-start="draggingCard = true"
+			@drag-end="draggingCard = false"
+			@drop="($event) => onDropCard(stack.id, $event)">
+			<NcButton v-if="!showAddCard"
+				data-cy="action:add-card"
+				class="stack__card-add-button"
+				type="tertiary"
+				:wide="true"
+				@click.stop="showAddCard=true">
+				<template #icon>
+					<PlusIcon :size="20" />
+				</template>
+				{{ t('deck', 'Add card') }}
+			</NcButton>
+			<form v-else
+				:class="{ 'icon-loading-small': stateCardCreating }"
+				@submit.prevent.stop="clickAddCard()">
+				<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
+				<input id="new-stack-input-main"
+					ref="newCardInput"
+					v-model="newCardTitle"
+					type="text"
+					class="no-close"
+					:disabled="stateCardCreating"
+					:placeholder="t('deck', 'Card name')"
+					required
+					pattern=".*\S+.*"
+					@focus="onCreateCardFocus"
+					@keydown.esc.stop="closeCardCreation">
+				<input v-show="!stateCardCreating"
+					class="icon-confirm"
+					type="submit"
+					value="">
+			</form>
+		</Container>
+		<div v-else-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
+			<NcButton v-if="!showAddCard"
+				data-cy="action:add-card"
+				class="stack__card-add-button"
+				type="tertiary"
+				:wide="true"
+				@click.stop="showAddCard=true">
+				<template #icon>
+					<PlusIcon :size="20" />
+				</template>
+				{{ t('deck', 'Add card') }}
+			</NcButton>
+			<form v-else
+				:class="{ 'icon-loading-small': stateCardCreating }"
+				@submit.prevent.stop="clickAddCard()">
+				<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
+				<input id="new-stack-input-main"
+					ref="newCardInput"
+					v-model="newCardTitle"
+					type="text"
+					class="no-close"
+					:disabled="stateCardCreating"
+					:placeholder="t('deck', 'Card name')"
+					required
+					pattern=".*\S+.*"
+					@focus="onCreateCardFocus"
+					@keydown.esc.stop="closeCardCreation">
+				<input v-show="!stateCardCreating"
+					class="icon-confirm"
+					type="submit"
+					value="">
+			</form>
+		</div>
 	</div>
 </template>
 
@@ -528,25 +525,25 @@ export default {
 		}
 
 		&.stack--bottom-add-empty {
-			.dnd-container {
-				order: 2;
+			:deep(.smooth-dnd-container.vertical.stack__cards-list:empty) {
 				flex-grow: 0;
-				padding-block: 0;
+				padding: 0 !important;
+				min-height: 0;
 			}
 
 			:deep(.smooth-dnd-container.vertical.stack__card-add--dropzone) {
 				padding: 0;
 				margin: 0;
+				overflow-y: visible;
 			}
 
 			.stack__card-add--dropzone {
 				flex: 0 0 auto;
-				order: 1;
 				display: flex;
 				align-items: center;
 				padding-block: $stack-gap;
 				padding-inline: 0;
-				height: calc(var(--stack-card-add-control-height) + (2 * #{$stack-gap}));
+				min-height: calc(var(--stack-card-add-control-height) + (2 * #{$stack-gap}));
 				box-sizing: border-box;
 				position: relative;
 			}
@@ -756,20 +753,6 @@ export default {
 		}
 	}
 
-	/**
-	 * Rules to handle scrolling behaviour are inherited from Board.vue
-	 */
-
-	.slide-top-enter-active,
-	.slide-top-leave-active {
-		transition: all 100ms ease;
-	}
-
-	.slide-top-enter, .slide-top-leave-to {
-		transform: translateY(-10px);
-		opacity: 0;
-	}
-
 	.modal__content {
 		width: 25vw;
 		min-width: 250px;

From fc05c334b45187456de49595abd8b63e7b66cb43 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Tue, 28 Jul 2026 14:54:50 +0000
Subject: [PATCH 18/24] Clean up CSS selectors

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Board.vue | 10 ++++++----
 src/components/board/Stack.vue | 19 +++++++------------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 3268e9bc3c..eb793fda51 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -317,12 +317,14 @@ export default {
 				position: relative;
 
 				.smooth-dnd-container.vertical {
-					$margin-x: calc($stack-gap * -1);
+					// Stacks may adjust the spacing, e.g. to collapse an empty card
+					// list, by setting --stack-cards-spacing (see Stack.vue)
+					$spacing: var(--stack-cards-spacing, #{$stack-gap});
 					display: flex;
 					flex-direction: column;
-					gap: $stack-gap;
-					padding: $stack-gap;
-					margin: 0 $margin-x;
+					gap: $spacing;
+					padding: $spacing;
+					margin: 0 calc(#{$spacing} * -1);
 					overflow-y: auto;
 					scrollbar-gutter: stable;
 				}
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 455b468655..ef3f80a188 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -525,24 +525,19 @@ export default {
 		}
 
 		&.stack--bottom-add-empty {
-			:deep(.smooth-dnd-container.vertical.stack__cards-list:empty) {
-				flex-grow: 0;
-				padding: 0 !important;
-				min-height: 0;
-			}
-
-			:deep(.smooth-dnd-container.vertical.stack__card-add--dropzone) {
-				padding: 0;
-				margin: 0;
-				overflow-y: visible;
+			// Collapse the card list while it is empty so the add card control is
+			// not pushed down. Once a card is dragged over, the drop placeholder
+			// becomes a child and the regular spacing applies again.
+			:deep(.stack__cards-list:empty) {
+				--stack-cards-spacing: 0;
 			}
 
+			// Spacing comes from the shared vertical dnd container rule in
+			// Board.vue, the min-height accounts for its vertical padding
 			.stack__card-add--dropzone {
 				flex: 0 0 auto;
 				display: flex;
 				align-items: center;
-				padding-block: $stack-gap;
-				padding-inline: 0;
 				min-height: calc(var(--stack-card-add-control-height) + (2 * #{$stack-gap}));
 				box-sizing: border-box;
 				position: relative;

From edfa253df86d3ab748baa57507f1b66eec462004 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Tue, 28 Jul 2026 16:01:57 +0000
Subject: [PATCH 19/24] Improve drop behaviour for empty stacks

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Board.vue |  9 ++--
 src/components/board/Stack.vue | 93 ++++++++++++----------------------
 2 files changed, 36 insertions(+), 66 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index eb793fda51..91460f0cf0 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -317,14 +317,11 @@ export default {
 				position: relative;
 
 				.smooth-dnd-container.vertical {
-					// Stacks may adjust the spacing, e.g. to collapse an empty card
-					// list, by setting --stack-cards-spacing (see Stack.vue)
-					$spacing: var(--stack-cards-spacing, #{$stack-gap});
 					display: flex;
 					flex-direction: column;
-					gap: $spacing;
-					padding: $spacing;
-					margin: 0 calc(#{$spacing} * -1);
+					gap: $stack-gap;
+					padding: $stack-gap;
+					margin: 0 calc(#{$stack-gap} * -1);
 					overflow-y: auto;
 					scrollbar-gutter: stable;
 				}
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index ef3f80a188..4d51587a0d 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -9,6 +9,8 @@
 			'stack--done-column': isDoneColumn,
 			'stack--bottom-add-empty': isEmptyStackWithBottomAddCard,
 			'stack--add-card-at-top': canAddCardAtTop,
+			'stack--dragging-card': draggingCard,
+			'stack--drag-over': draggingOverStack,
 		}"
 		:data-cy-stack="stack.title">
 		<div v-click-outside="stopCardCreation"
@@ -142,7 +144,9 @@
 			data-dragscroll-enabled
 			@should-accept-drop="canEdit"
 			@drag-start="draggingCard = true"
-			@drag-end="draggingCard = false"
+			@drag-end="onDragEnd"
+			@drag-enter="draggingOverStack = true"
+			@drag-leave="draggingOverStack = false"
 			@drop="($event) => onDropCard(stack.id, $event)">
 			<Draggable v-for="card in cardsByStack" :key="card.id">
 				<transition :appear="animate && !card.animated && (card.animated=true)"
@@ -153,50 +157,7 @@
 			</Draggable>
 		</Container>
 
-		<Container v-if="canAddCardAtBottom && isEmptyStackWithBottomAddCard"
-			:get-child-payload="payloadForCard(stack.id)"
-			class="dnd-container stack__card-add stack__card-add--bottom stack__card-add--dropzone"
-			group-name="stack"
-			data-click-closes-sidebar="true"
-			non-drag-area-selector=".dragDisabled"
-			:drag-handle-selector="dragHandleSelector"
-			@should-accept-drop="canEdit"
-			@drag-start="draggingCard = true"
-			@drag-end="draggingCard = false"
-			@drop="($event) => onDropCard(stack.id, $event)">
-			<NcButton v-if="!showAddCard"
-				data-cy="action:add-card"
-				class="stack__card-add-button"
-				type="tertiary"
-				:wide="true"
-				@click.stop="showAddCard=true">
-				<template #icon>
-					<PlusIcon :size="20" />
-				</template>
-				{{ t('deck', 'Add card') }}
-			</NcButton>
-			<form v-else
-				:class="{ 'icon-loading-small': stateCardCreating }"
-				@submit.prevent.stop="clickAddCard()">
-				<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
-				<input id="new-stack-input-main"
-					ref="newCardInput"
-					v-model="newCardTitle"
-					type="text"
-					class="no-close"
-					:disabled="stateCardCreating"
-					:placeholder="t('deck', 'Card name')"
-					required
-					pattern=".*\S+.*"
-					@focus="onCreateCardFocus"
-					@keydown.esc.stop="closeCardCreation">
-				<input v-show="!stateCardCreating"
-					class="icon-confirm"
-					type="submit"
-					value="">
-			</form>
-		</Container>
-		<div v-else-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
+		<div v-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
 			<NcButton v-if="!showAddCard"
 				data-cy="action:add-card"
 				class="stack__card-add-button"
@@ -279,6 +240,7 @@ export default {
 		return {
 			editing: false,
 			draggingCard: false,
+			draggingOverStack: false,
 			copiedStack: '',
 			newCardTitle: '',
 			showAddCard: false,
@@ -370,6 +332,11 @@ export default {
 			this.showAddCard = false
 			return false
 		},
+		onDragEnd() {
+			this.draggingCard = false
+			// drag-leave is not emitted when the card is dropped inside the stack
+			this.draggingOverStack = false
+		},
 		async onDropCard(stackId, event) {
 			const { addedIndex, removedIndex, payload } = event
 			const card = Object.assign({}, payload)
@@ -517,7 +484,7 @@ export default {
 			flex-grow: 1;
 		}
 
-		&:not(.stack--add-card-at-top) {
+		&:not(.stack--add-card-at-top):not(.stack--bottom-add-empty) {
 			.dnd-container {
 			flex: 0 1 auto;
 			min-height: 0;
@@ -525,22 +492,28 @@ export default {
 		}
 
 		&.stack--bottom-add-empty {
-			// Collapse the card list while it is empty so the add card control is
-			// not pushed down. Once a card is dragged over, the drop placeholder
-			// becomes a child and the regular spacing applies again.
-			:deep(.stack__cards-list:empty) {
-				--stack-cards-spacing: 0;
+			// The empty card list keeps filling the column so that it stays an
+			// easy drop target, while the add card control floats on top of it,
+			// right where the first card would be.
+			.stack__card-add--bottom {
+				position: absolute;
+				inset-inline: 0;
+				top: calc(var(--default-clickable-area) + #{$stack-gap});
+				transition: top var(--animation-quick);
 			}
 
-			// Spacing comes from the shared vertical dnd container rule in
-			// Board.vue, the min-height accounts for its vertical padding
-			.stack__card-add--dropzone {
-				flex: 0 0 auto;
-				display: flex;
-				align-items: center;
-				min-height: calc(var(--stack-card-add-control-height) + (2 * #{$stack-gap}));
-				box-sizing: border-box;
-				position: relative;
+			// Make way for the drop placeholder while a card is dragged over the
+			// list. The list itself is left untouched, resizing it would move it
+			// away from under the pointer.
+			&.stack--drag-over .stack__card-add--bottom {
+				top: calc(var(--default-clickable-area) + var(--stack-card-add-control-height) + 2 * #{$stack-gap});
+			}
+
+			// smooth-dnd resolves the hovered container with elementFromPoint(), so
+			// the floating control has to let the drag through to the list below it,
+			// otherwise dragging over it would count as leaving the list.
+			&.stack--dragging-card .stack__card-add--bottom {
+				pointer-events: none;
 			}
 		}
 

From 7b48ec86b159505dac032aa6887c7f3a4fc2c2b8 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Thu, 30 Jul 2026 17:31:14 +0000
Subject: [PATCH 20/24] Simplify add-cards-to-bottom stacks

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Board.vue |  8 +++++
 src/components/board/Stack.vue | 66 ++++++++--------------------------
 2 files changed, 23 insertions(+), 51 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index 91460f0cf0..92b8db9d30 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -326,6 +326,14 @@ export default {
 					scrollbar-gutter: stable;
 				}
 
+				// Keep room for the 'Add card' control that the card list reaches
+				// into, so that the last card can be scrolled above it
+				&.stack--add-card-at-bottom .smooth-dnd-container.vertical {
+					margin-bottom: calc(-1 * var(--stack-card-add-box-height));
+					padding-bottom: calc(var(--stack-card-add-box-height) + #{$stack-gap});
+					scroll-padding-bottom: calc(var(--stack-card-add-box-height) + #{$stack-gap});
+				}
+
 				.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
 					overflow: initial;
 				}
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 4d51587a0d..9b3568929f 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -7,10 +7,9 @@
 	<div class="stack"
 		:class="{
 			'stack--done-column': isDoneColumn,
-			'stack--bottom-add-empty': isEmptyStackWithBottomAddCard,
 			'stack--add-card-at-top': canAddCardAtTop,
+			'stack--add-card-at-bottom': canAddCardAtBottom,
 			'stack--dragging-card': draggingCard,
-			'stack--drag-over': draggingOverStack,
 		}"
 		:data-cy-stack="stack.title">
 		<div v-click-outside="stopCardCreation"
@@ -144,9 +143,7 @@
 			data-dragscroll-enabled
 			@should-accept-drop="canEdit"
 			@drag-start="draggingCard = true"
-			@drag-end="onDragEnd"
-			@drag-enter="draggingOverStack = true"
-			@drag-leave="draggingOverStack = false"
+			@drag-end="draggingCard = false"
 			@drop="($event) => onDropCard(stack.id, $event)">
 			<Draggable v-for="card in cardsByStack" :key="card.id">
 				<transition :appear="animate && !card.animated && (card.animated=true)"
@@ -240,7 +237,6 @@ export default {
 		return {
 			editing: false,
 			draggingCard: false,
-			draggingOverStack: false,
 			copiedStack: '',
 			newCardTitle: '',
 			showAddCard: false,
@@ -293,12 +289,6 @@ export default {
 		canAddCardAtBottom() {
 			return this.canEdit && !this.showArchived && !this.isArchived && !this.stackAddCardAtTop
 		},
-		isEmptyStack() {
-			return this.cardsByStack.length === 0
-		},
-		isEmptyStackWithBottomAddCard() {
-			return this.canAddCardAtBottom && this.isEmptyStack
-		},
 	},
 	watch: {
 		showAddCard(newValue) {
@@ -332,11 +322,6 @@ export default {
 			this.showAddCard = false
 			return false
 		},
-		onDragEnd() {
-			this.draggingCard = false
-			// drag-leave is not emitted when the card is dropped inside the stack
-			this.draggingOverStack = false
-		},
 		async onDropCard(stackId, event) {
 			const { addedIndex, removedIndex, payload } = event
 			const card = Object.assign({}, payload)
@@ -406,14 +391,12 @@ export default {
 					title: this.newCardTitle,
 					stackId: this.stack.id,
 					boardId: this.stack.boardId,
-					order: addCardAtTop ? 0 : 999,
+					// Without an order the API appends the card to the end of the stack
+					...(addCardAtTop ? { order: 0 } : {}),
 				})
 				if (addCardAtTop) {
-					await this.$store.dispatch('reorderCard', {
-						...newCard,
-						stackId: this.stack.id,
-						order: 0,
-					})
+					// Creating a card does not move the existing cards down, so reorder
+					await this.$store.dispatch('reorderCard', { ...newCard, order: 0 })
 				}
 				this.newCardTitle = ''
 				this.showAddCard = true
@@ -479,40 +462,21 @@ export default {
 
 	.stack {
 		--stack-card-add-control-height: calc(var(--default-clickable-area) + 2 * var(--default-grid-baseline));
+		--stack-card-add-box-height: calc(var(--stack-card-add-control-height) + #{$stack-gap});
 		width: 100%;
 		.dnd-container {
-			flex-grow: 1;
-		}
-
-		&:not(.stack--add-card-at-top):not(.stack--bottom-add-empty) {
-			.dnd-container {
-			flex: 0 1 auto;
+			flex: 1 1 auto;
 			min-height: 0;
-			}
 		}
 
-		&.stack--bottom-add-empty {
-			// The empty card list keeps filling the column so that it stays an
-			// easy drop target, while the add card control floats on top of it,
-			// right where the first card would be.
-			.stack__card-add--bottom {
-				position: absolute;
-				inset-inline: 0;
-				top: calc(var(--default-clickable-area) + #{$stack-gap});
-				transition: top var(--animation-quick);
-			}
-
-			// Make way for the drop placeholder while a card is dragged over the
-			// list. The list itself is left untouched, resizing it would move it
-			// away from under the pointer.
-			&.stack--drag-over .stack__card-add--bottom {
-				top: calc(var(--default-clickable-area) + var(--stack-card-add-control-height) + 2 * #{$stack-gap});
-			}
-
-			// smooth-dnd resolves the hovered container with elementFromPoint(), so
-			// the floating control has to let the drag through to the list below it,
-			// otherwise dragging over it would count as leaving the list.
+		&.stack--add-card-at-bottom {
+			// The card list fills the column and reaches underneath the add card
+			// control (see Board.vue), so that cards can be dropped anywhere in
+			// the free space of the list.
 			&.stack--dragging-card .stack__card-add--bottom {
+				// smooth-dnd resolves the hovered container with elementFromPoint(),
+				// so the control has to let the drag through to the list underneath
+				// it, otherwise dragging over it would count as leaving the list.
 				pointer-events: none;
 			}
 		}

From a6ef37cb96dbe556f48399cb4ee4eea2eb4922a6 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Thu, 30 Jul 2026 17:38:33 +0000
Subject: [PATCH 21/24] Fix new card focus animation for add-to-top stacks

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 9b3568929f..049bb64e29 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -403,10 +403,8 @@ export default {
 				this.$nextTick(() => {
 					this.$refs.newCardInput.focus()
 					this.animate = false
-					if (this.$refs.card && this.$refs.card.length > 0) {
-						const index = addCardAtTop ? 0 : this.$refs.card.length - 1
-						this.$refs.card[index].scrollIntoView()
-					}
+					// Refs of a v-for are registered in creation order, not in list order
+					this.$refs.card?.find((card) => card.id === newCard.id)?.scrollIntoView()
 				})
 				if (!this.cardDetailsInModal) {
 					this.$router.push({ name: 'card', params: { cardId: newCard.id } })

From 50a55b725110d416280f94a3372818738f47ee4d Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Thu, 30 Jul 2026 22:24:57 +0000
Subject: [PATCH 22/24] Revert package-lock.json to `origin/main`

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 package-lock.json | 134 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 134 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 9e5a8666b9..ddfa1e6973 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4717,6 +4717,34 @@
         "@vue/shared": "3.5.30"
       }
     },
+    "node_modules/@nextcloud/password-confirmation/node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@nextcloud/password-confirmation/node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@nextcloud/password-confirmation/node_modules/@vue/server-renderer": {
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.30.tgz",
@@ -4878,6 +4906,14 @@
         "tabbable": "^6.4.0"
       }
     },
+    "node_modules/@nextcloud/password-confirmation/node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@nextcloud/password-confirmation/node_modules/picomatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
@@ -4890,6 +4926,40 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/@nextcloud/password-confirmation/node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nextcloud/password-confirmation/node_modules/pinia/node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
     "node_modules/@nextcloud/password-confirmation/node_modules/readdirp": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
@@ -9984,6 +10054,23 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/core-js": {
       "version": "2.6.9",
       "hasInstallScript": true,
@@ -15614,6 +15701,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/is-whitespace": {
       "version": "0.3.0",
       "dev": true,
@@ -19289,6 +19390,14 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/mkdirp-classic": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
@@ -22900,6 +23009,17 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/spec-change": {
       "version": "1.11.21",
       "resolved": "https://registry.npmjs.org/spec-change/-/spec-change-1.11.21.tgz",
@@ -24087,6 +24207,20 @@
         "node": ">=18"
       }
     },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/superstruct": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/superstruct/-/superstruct-2.0.2.tgz",

From c61e8e7c363c365230256c5f55bb55911352a478 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Thu, 30 Jul 2026 22:25:44 +0000
Subject: [PATCH 23/24] Remove add button form duplication

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 84 ++++++++++------------------------
 1 file changed, 25 insertions(+), 59 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 4c4832d8d8..c18920a8ff 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -7,8 +7,8 @@
 	<div class="stack"
 		:class="{
 			'stack--done-column': isDoneColumn,
-			'stack--add-card-at-top': canAddCardAtTop,
-			'stack--add-card-at-bottom': canAddCardAtBottom,
+			'stack--add-card-at-top': canAddCard && stackAddCardAtTop,
+			'stack--add-card-at-bottom': canAddCard && !stackAddCardAtTop,
 			'stack--dragging-card': draggingCard,
 		}"
 		:data-cy-stack="stack.title">
@@ -100,40 +100,6 @@
 			</div>
 		</NcModal>
 
-		<div v-if="canAddCardAtTop" class="stack__card-add stack__card-add--top">
-			<NcButton v-if="!showAddCard"
-				data-cy="action:add-card"
-				class="stack__card-add-button"
-				type="tertiary"
-				:wide="true"
-				@click.stop="showAddCard=true">
-				<template #icon>
-					<PlusIcon :size="20" />
-				</template>
-				{{ t('deck', 'Add card') }}
-			</NcButton>
-			<form v-else
-				:class="{ 'icon-loading-small': stateCardCreating }"
-				@submit.prevent.stop="clickAddCard()">
-				<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
-				<input id="new-stack-input-main"
-					ref="newCardInput"
-					v-model="newCardTitle"
-					type="text"
-					class="no-close"
-					:disabled="stateCardCreating"
-					:placeholder="t('deck', 'Card name')"
-					required
-					pattern=".*\S+.*"
-					@focus="onCreateCardFocus"
-					@keydown.esc.stop="closeCardCreation">
-				<input v-show="!stateCardCreating"
-					class="icon-confirm"
-					type="submit"
-					value="">
-			</form>
-		</div>
-
 		<Container :get-child-payload="payloadForCard(stack.id)"
 			class="dnd-container stack__cards-list"
 			group-name="stack"
@@ -154,7 +120,7 @@
 			</Draggable>
 		</Container>
 
-		<div v-if="canAddCardAtBottom" class="stack__card-add stack__card-add--bottom">
+		<div v-if="canAddCard" class="stack__card-add">
 			<NcButton v-if="!showAddCard"
 				data-cy="action:add-card"
 				class="stack__card-add-button"
@@ -180,7 +146,7 @@
 					required
 					pattern=".*\S+.*"
 					@focus="onCreateCardFocus"
-					@keydown.esc.stop="closeCardCreation">
+					@keydown.esc.stop="showAddCard = false">
 				<input v-show="!stateCardCreating"
 					class="icon-confirm"
 					type="submit"
@@ -284,11 +250,8 @@ export default {
 		stackAddCardAtTop() {
 			return this.$store.getters.config('stackAddCardAtTop') === true
 		},
-		canAddCardAtTop() {
-			return this.canEdit && !this.showArchived && !this.isArchived && this.stackAddCardAtTop
-		},
-		canAddCardAtBottom() {
-			return this.canEdit && !this.showArchived && !this.isArchived && !this.stackAddCardAtTop
+		canAddCard() {
+			return this.canEdit && !this.showArchived && !this.isArchived
 		},
 	},
 	watch: {
@@ -310,10 +273,6 @@ export default {
 	methods: {
 		...mapActions(useTrashbinStore, ['stackUndoDelete']),
 		...mapActions(useStackStore, ['setDoneStack', 'deleteStack', 'updateStack']),
-		closeCardCreation() {
-			this.showAddCard = false
-			return false
-		},
 		stopCardCreation(e) {
 			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
 			// so we have to ignore it
@@ -469,19 +428,26 @@ export default {
 			min-height: 0;
 		}
 
-		&.stack--add-card-at-bottom {
-			// The card list fills the column and reaches underneath the add card
-			// control (see Board.vue), so that cards can be dropped anywhere in
-			// the free space of the list.
-			&.stack--dragging-card .stack__card-add--bottom {
-				// smooth-dnd resolves the hovered container with elementFromPoint(),
-				// so the control has to let the drag through to the list underneath
-				// it, otherwise dragging over it would count as leaving the list.
-				pointer-events: none;
-			}
+		&.stack--add-card-at-bottom.stack--dragging-card .stack__card-add {
+			// The card list reaches underneath the control (see Board.vue) and
+			// smooth-dnd resolves the hovered container with elementFromPoint(),
+			// so the control must not swallow the drag.
+			pointer-events: none;
 		}
 
 		&.stack--add-card-at-top {
+			.stack__header {
+				order: 1;
+			}
+
+			.stack__card-add {
+				order: 2;
+			}
+
+			.stack__cards-list {
+				order: 3;
+			}
+
 			&:after {
 				content: '';
 				display: block;
@@ -614,7 +580,7 @@ export default {
 		background-color: var(--color-main-background);
 		position: relative;
 
-		&--top {
+		.stack--add-card-at-top & {
 			padding-top: $stack-gap;
 
 			&:after {
@@ -631,7 +597,7 @@ export default {
 			}
 		}
 
-		&--bottom {
+		.stack--add-card-at-bottom & {
 			padding-bottom: $stack-gap;
 		}
 

From d09e436d7e4fb51d9ee209c0300927aa9354da7b Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Thu, 30 Jul 2026 22:44:47 +0000
Subject: [PATCH 24/24] Extract add card form to keep tab order intact

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue        | 221 +++-----------------------
 src/components/board/StackCardAdd.vue | 205 ++++++++++++++++++++++++
 2 files changed, 227 insertions(+), 199 deletions(-)
 create mode 100644 src/components/board/StackCardAdd.vue

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index c18920a8ff..5335ae0021 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -12,9 +12,8 @@
 			'stack--dragging-card': draggingCard,
 		}"
 		:data-cy-stack="stack.title">
-		<div v-click-outside="stopCardCreation"
-			class="stack__header"
-			:class="{'stack__header--add': showAddCard, 'stack__header--done-column': isDoneColumn}"
+		<div class="stack__header"
+			:class="{'stack__header--done-column': isDoneColumn}"
 			:aria-label="stack.title">
 			<transition name="fade" mode="out-in">
 				<h3 v-if="!canManage || isArchived" tabindex="0">
@@ -100,6 +99,12 @@
 			</div>
 		</NcModal>
 
+		<StackCardAdd v-if="canAddCard && stackAddCardAtTop"
+			:stack="stack"
+			:add-at-top="true"
+			@creating="animate = true"
+			@created="handleCardCreated" />
+
 		<Container :get-child-payload="payloadForCard(stack.id)"
 			class="dnd-container stack__cards-list"
 			group-name="stack"
@@ -120,39 +125,10 @@
 			</Draggable>
 		</Container>
 
-		<div v-if="canAddCard" class="stack__card-add">
-			<NcButton v-if="!showAddCard"
-				data-cy="action:add-card"
-				class="stack__card-add-button"
-				type="tertiary"
-				:wide="true"
-				@click.stop="showAddCard=true">
-				<template #icon>
-					<PlusIcon :size="20" />
-				</template>
-				{{ t('deck', 'Add card') }}
-			</NcButton>
-			<form v-else
-				:class="{ 'icon-loading-small': stateCardCreating }"
-				@submit.prevent.stop="clickAddCard()">
-				<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
-				<input id="new-stack-input-main"
-					ref="newCardInput"
-					v-model="newCardTitle"
-					type="text"
-					class="no-close"
-					:disabled="stateCardCreating"
-					:placeholder="t('deck', 'Card name')"
-					required
-					pattern=".*\S+.*"
-					@focus="onCreateCardFocus"
-					@keydown.esc.stop="showAddCard = false">
-				<input v-show="!stateCardCreating"
-					class="icon-confirm"
-					type="submit"
-					value="">
-			</form>
-		</div>
+		<StackCardAdd v-if="canAddCard && !stackAddCardAtTop"
+			:stack="stack"
+			@creating="animate = true"
+			@created="handleCardCreated" />
 	</div>
 </template>
 
@@ -162,11 +138,11 @@ import { mapGetters, mapState } from 'vuex'
 import { Container, Draggable } from 'vue-smooth-dnd'
 import ArchiveIcon from 'vue-material-design-icons/ArchiveOutline.vue'
 import CheckCircleOutline from 'vue-material-design-icons/CheckCircleOutline.vue'
-import PlusIcon from 'vue-material-design-icons/Plus.vue'
-import { NcActions, NcActionButton, NcButton, NcModal } from '@nextcloud/vue'
-import { showError, showUndo } from '@nextcloud/dialogs'
+import { NcActions, NcActionButton, NcModal } from '@nextcloud/vue'
+import { showUndo } from '@nextcloud/dialogs'
 
 import CardItem from '../cards/CardItem.vue'
+import StackCardAdd from './StackCardAdd.vue'
 
 import '@nextcloud/dialogs/style.css'
 import { mapActions } from 'pinia'
@@ -178,14 +154,13 @@ export default {
 	components: {
 		NcActions,
 		NcActionButton,
-		NcButton,
 		CardItem,
+		StackCardAdd,
 		Container,
 		Draggable,
 		NcModal,
 		ArchiveIcon,
 		CheckCircleOutline,
-		PlusIcon,
 	},
 	directives: {
 		ClickOutside,
@@ -205,9 +180,6 @@ export default {
 			editing: false,
 			draggingCard: false,
 			copiedStack: '',
-			newCardTitle: '',
-			showAddCard: false,
-			stateCardCreating: false,
 			animate: false,
 			modalArchivAllCardsShow: false,
 			stackTransfer: {
@@ -239,14 +211,6 @@ export default {
 		dragHandleSelector() {
 			return this.canEdit && !this.showArchived ? null : '.no-drag'
 		},
-		cardDetailsInModal: {
-			get() {
-				return this.$store.getters.config('cardDetailsInModal')
-			},
-			set(newValue) {
-				this.$store.dispatch('setConfig', { cardDetailsInModal: newValue })
-			},
-		},
 		stackAddCardAtTop() {
 			return this.$store.getters.config('stackAddCardAtTop') === true
 		},
@@ -254,18 +218,6 @@ export default {
 			return this.canEdit && !this.showArchived && !this.isArchived
 		},
 	},
-	watch: {
-		showAddCard(newValue) {
-			if (!newValue) {
-				this.$store.dispatch('toggleShortcutLock', false)
-			} else {
-				this.$nextTick(() => {
-					this.$refs.newCardInput.focus()
-				})
-			}
-		},
-	},
-
 	mounted() {
 		this.setupAutoscrollOnDrag()
 	},
@@ -273,16 +225,6 @@ export default {
 	methods: {
 		...mapActions(useTrashbinStore, ['stackUndoDelete']),
 		...mapActions(useStackStore, ['setDoneStack', 'deleteStack', 'updateStack']),
-		stopCardCreation(e) {
-			// For some reason the submit event triggers a MouseEvent that is bubbling to the outside
-			// so we have to ignore it
-			e.stopPropagation()
-			if (this.$refs.newCardInput && this.$refs.newCardInput.parentElement === e.target.parentElement) {
-				return false
-			}
-			this.showAddCard = false
-			return false
-		},
 		async onDropCard(stackId, event) {
 			const { addedIndex, removedIndex, payload } = event
 			const card = Object.assign({}, payload)
@@ -343,41 +285,12 @@ export default {
 		cancelEdit() {
 			this.editing = false
 		},
-		async clickAddCard() {
-			this.stateCardCreating = true
-			try {
-				const addCardAtTop = this.stackAddCardAtTop
-				this.animate = true
-				const newCard = await this.$store.dispatch('addCard', {
-					title: this.newCardTitle,
-					stackId: this.stack.id,
-					boardId: this.stack.boardId,
-					// Without an order the API appends the card to the end of the stack
-					...(addCardAtTop ? { order: 0 } : {}),
-				})
-				if (addCardAtTop) {
-					// Creating a card does not move the existing cards down, so reorder
-					await this.$store.dispatch('reorderCard', { ...newCard, order: 0 })
-				}
-				this.newCardTitle = ''
-				this.showAddCard = true
-				this.$nextTick(() => {
-					this.$refs.newCardInput.focus()
-					this.animate = false
-					// Refs of a v-for are registered in creation order, not in list order
-					this.$refs.card?.find((card) => card.id === newCard.id)?.scrollIntoView()
-				})
-				if (!this.cardDetailsInModal) {
-					this.$router.push({ name: 'card', params: { cardId: newCard.id } })
-				}
-			} catch (e) {
-				showError('Could not create card: ' + e.response.data.message)
-			} finally {
-				this.stateCardCreating = false
-			}
-		},
-		onCreateCardFocus() {
-			this.$store.dispatch('toggleShortcutLock', true)
+		handleCardCreated(newCard) {
+			this.$nextTick(() => {
+				this.animate = false
+				// Refs of a v-for are registered in creation order, not in list order
+				this.$refs.card?.find((card) => card.id === newCard.id)?.scrollIntoView()
+			})
 		},
 		setupAutoscrollOnDrag() {
 			let timer
@@ -436,18 +349,6 @@ export default {
 		}
 
 		&.stack--add-card-at-top {
-			.stack__header {
-				order: 1;
-			}
-
-			.stack__card-add {
-				order: 2;
-			}
-
-			.stack__cards-list {
-				order: 3;
-			}
-
 			&:after {
 				content: '';
 				display: block;
@@ -573,84 +474,6 @@ export default {
 		}
 	}
 
-	.stack__card-add {
-		flex-shrink: 0;
-		z-index: 100;
-		display: flex;
-		background-color: var(--color-main-background);
-		position: relative;
-
-		.stack--add-card-at-top & {
-			padding-top: $stack-gap;
-
-			&:after {
-				content: '';
-				display: block;
-				position: absolute;
-				width: 100%;
-				height: $stack-gap;
-				bottom: 0;
-				z-index: 99;
-				pointer-events: none;
-				background-image: linear-gradient(180deg, var(--color-main-background) 0%, transparent 100%);
-				transform: translateY(100%);
-			}
-		}
-
-		.stack--add-card-at-bottom & {
-			padding-bottom: $stack-gap;
-		}
-
-		// Smooth fade out of the cards at the top
-		&:before {
-			content: '';
-			display: block;
-			position: absolute;
-			width: 100%;
-			height: $stack-gap;
-			z-index: 99;
-			transition: bottom var(--animation-slow);
-			background-image: linear-gradient(0deg, var(--color-main-background) 0%, transparent 100%);
-			transform: translateY(-100%);
-		}
-
-		:deep(.stack__card-add-button.button-vue) {
-			--button-size: var(--stack-card-add-control-height);
-			color: var(--color-text-maxcontrast);
-
-			&:hover:not(:disabled),
-			&:focus-visible {
-				color: var(--color-main-text);
-			}
-		}
-
-		form {
-			display: flex;
-			width: 100%;
-			height: var(--stack-card-add-control-height);
-			box-sizing: border-box;
-			border: 2px solid var(--color-border-maxcontrast);
-			border-radius: var(--border-radius-large);
-			overflow: hidden;
-			padding: 2px;
-		}
-
-		&.icon-loading-small:after,
-		&.icon-loading-small-dark:after {
-			margin-inline-start: calc(50% - 25px);
-		}
-
-		input[type=text] {
-			flex-grow: 1;
-			padding-inline-end: 16px;
-		}
-
-		input {
-			border: none;
-			margin: 0;
-		}
-	}
-
 	.modal__content {
 		width: 25vw;
 		min-width: 250px;
diff --git a/src/components/board/StackCardAdd.vue b/src/components/board/StackCardAdd.vue
new file mode 100644
index 0000000000..b235cd036e
--- /dev/null
+++ b/src/components/board/StackCardAdd.vue
@@ -0,0 +1,205 @@
+<!--
+	- SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+	- SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div v-click-outside="close" class="stack__card-add">
+		<NcButton v-if="!visible"
+			data-cy="action:add-card"
+			class="stack__card-add-button"
+			type="tertiary"
+			:wide="true"
+			@click.stop="visible = true">
+			<template #icon>
+				<PlusIcon :size="20" />
+			</template>
+			{{ t('deck', 'Add card') }}
+		</NcButton>
+		<form v-else
+			:class="{ 'icon-loading-small': creating }"
+			@submit.prevent.stop="addCard">
+			<label for="new-stack-input-main" class="hidden-visually">{{ t('deck', 'Add a new card') }}</label>
+			<input id="new-stack-input-main"
+				ref="newCardInput"
+				v-model="title"
+				type="text"
+				class="no-close"
+				:disabled="creating"
+				:placeholder="t('deck', 'Card name')"
+				required
+				pattern=".*\S+.*"
+				@focus="$store.dispatch('toggleShortcutLock', true)"
+				@keydown.esc.stop="visible = false">
+			<input v-show="!creating"
+				class="icon-confirm"
+				type="submit"
+				value="">
+		</form>
+	</div>
+</template>
+
+<script>
+import ClickOutside from 'vue-click-outside'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import { NcButton } from '@nextcloud/vue'
+import { showError } from '@nextcloud/dialogs'
+
+export default {
+	name: 'StackCardAdd',
+	components: {
+		NcButton,
+		PlusIcon,
+	},
+	directives: {
+		ClickOutside,
+	},
+	props: {
+		stack: {
+			type: Object,
+			required: true,
+		},
+		addAtTop: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			title: '',
+			visible: false,
+			creating: false,
+		}
+	},
+	computed: {
+		cardDetailsInModal() {
+			return this.$store.getters.config('cardDetailsInModal')
+		},
+	},
+	watch: {
+		visible(newValue) {
+			if (!newValue) {
+				this.$store.dispatch('toggleShortcutLock', false)
+				return
+			}
+
+			this.$nextTick(() => this.$refs.newCardInput.focus())
+		},
+	},
+	methods: {
+		close() {
+			this.visible = false
+		},
+		async addCard() {
+			this.creating = true
+			this.$emit('creating')
+			try {
+				const newCard = await this.$store.dispatch('addCard', {
+					title: this.title,
+					stackId: this.stack.id,
+					boardId: this.stack.boardId,
+					// Without an order the API appends the card to the end of the stack
+					...(this.addAtTop ? { order: 0 } : {}),
+				})
+				if (this.addAtTop) {
+					// Creating a card does not move the existing cards down, so reorder
+					await this.$store.dispatch('reorderCard', { ...newCard, order: 0 })
+				}
+				this.title = ''
+				this.$emit('created', newCard)
+				if (!this.cardDetailsInModal) {
+					this.$router.push({ name: 'card', params: { cardId: newCard.id } })
+				}
+			} catch (error) {
+				showError('Could not create card: ' + error.response.data.message)
+			} finally {
+				this.creating = false
+				// Disabling the input while creating drops the focus
+				this.$nextTick(() => this.$refs.newCardInput?.focus())
+			}
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	@import './../../css/variables.scss';
+
+	.stack__card-add {
+		flex-shrink: 0;
+		z-index: 100;
+		display: flex;
+		background-color: var(--color-main-background);
+		position: relative;
+
+		.stack--add-card-at-top & {
+			padding-top: $stack-gap;
+
+			&:after {
+				content: '';
+				display: block;
+				position: absolute;
+				width: 100%;
+				height: $stack-gap;
+				bottom: 0;
+				z-index: 99;
+				pointer-events: none;
+				background-image: linear-gradient(180deg, var(--color-main-background) 0%, transparent 100%);
+				transform: translateY(100%);
+			}
+		}
+
+		.stack--add-card-at-bottom & {
+			padding-bottom: $stack-gap;
+		}
+
+		// Smooth fade out of the cards next to the control
+		&:before {
+			content: '';
+			display: block;
+			position: absolute;
+			width: 100%;
+			height: $stack-gap;
+			z-index: 99;
+			transition: bottom var(--animation-slow);
+			background-image: linear-gradient(0deg, var(--color-main-background) 0%, transparent 100%);
+			transform: translateY(-100%);
+		}
+
+		:deep(.stack__card-add-button.button-vue) {
+			--button-size: var(--stack-card-add-control-height);
+			color: var(--color-text-maxcontrast);
+
+			&:hover:not(:disabled),
+			&:focus-visible {
+				color: var(--color-main-text);
+			}
+		}
+
+		form {
+			display: flex;
+			width: 100%;
+			height: var(--stack-card-add-control-height);
+			box-sizing: border-box;
+			border: 2px solid var(--color-border-maxcontrast);
+			border-radius: var(--border-radius-large);
+			overflow: hidden;
+			padding: 2px;
+		}
+
+		&.icon-loading-small:after,
+		&.icon-loading-small-dark:after {
+			margin-inline-start: calc(50% - 25px);
+		}
+
+		input[type=text] {
+			flex-grow: 1;
+			padding-inline-end: 16px;
+		}
+
+		input {
+			border: none;
+			margin: 0;
+		}
+	}
+</style>