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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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/34] 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>

From 7e606fa7c4a66e61f65cd1c85074f53df2b8090a Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sat, 8 Aug 2026 18:33:42 +0000
Subject: [PATCH 25/34] Fix card insertion position

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 cypress/e2e/cardFeatures.js                   | 77 +++++++++++++++++++
 lib/Controller/CardOcsController.php          |  2 +-
 lib/Service/CardService.php                   | 32 +++++++-
 src/components/DeckAppSettings.vue            |  1 +
 src/components/board/StackCardAdd.vue         | 12 +--
 src/components/navigation/AppNavigation.vue   |  1 +
 src/stores/card.js                            | 16 ++--
 tests/integration/features/api/config.feature | 16 ++++
 .../Service/BatchQueryPerformanceTest.php     |  2 +
 tests/unit/Service/CardServiceTest.php        | 70 +++++++++++++++++
 10 files changed, 213 insertions(+), 16 deletions(-)

diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index 1e734a0838..60ad9b916f 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -25,6 +25,17 @@ const useModal = (useModal) => {
 	})
 }
 
+const addCardsAtTop = (enabled) => {
+	return cy.request({
+		method: 'POST',
+		url: `${Cypress.env('baseUrl')}/ocs/v2.php/apps/deck/api/v1.0/config/stackAddCardAtTop?format=json`,
+		auth,
+		body: { value: enabled },
+	}).then((response) => {
+		expect(response.status).to.eq(200)
+	})
+}
+
 describe('Card', function () {
 	let boardId
 	before(function () {
@@ -63,6 +74,72 @@ describe('Card', function () {
 		})
 	})
 
+	describe('New card position', function() {
+		afterEach(function() {
+			addCardsAtTop(false)
+		})
+
+		it('Adds new cards to the configured side of the list', function() {
+			const bottomCardTitle = 'Card added at bottom'
+			const firstTopCardTitle = 'First card added at top'
+			const secondTopCardTitle = 'Second card added at top'
+			const finalBottomCardTitle = 'Card added at bottom again'
+
+			addCardsAtTop(false)
+			cy.intercept({ method: 'POST', url: '**/ocs/v2.php/apps/deck/api/v1.0/cards' }).as('createCard')
+			cy.intercept({ method: 'PUT', url: '**/ocs/v2.php/apps/deck/api/v1.0/cards/*/reorder' }).as('reorderCard')
+			cy.intercept({ method: 'POST', url: '**/ocs/v2.php/apps/deck/api/v1.0/config/stackAddCardAtTop' }).as('setCardPosition')
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+
+			cy.get('.board .stack').eq(0).within(() => {
+				cy.get('[data-cy="action:add-card"]').click()
+				cy.get('.stack__card-add input[type="text"]').type(bottomCardTitle)
+				cy.get('.stack__card-add input[type="submit"]').click()
+				cy.wait('@createCard')
+				cy.get('.card').last().should('contain', bottomCardTitle)
+			})
+
+			cy.get('[data-cy="navigation:settings"]').click()
+			cy.get('[data-cy="setting:add-card-at-top"] input[role="switch"]').check({ force: true })
+			cy.wait('@setCardPosition')
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+
+			for (const title of [firstTopCardTitle, secondTopCardTitle]) {
+				cy.get('.board .stack').eq(0).within(() => {
+					cy.get('[data-cy="action:add-card"]').click()
+					cy.get('.stack__card-add input[type="text"]').type(title)
+					cy.get('.stack__card-add input[type="submit"]').click()
+					cy.wait('@createCard')
+					cy.get('.stack__card-add input[type="text"]').type('{esc}')
+				})
+			}
+
+			cy.get('.board .stack').eq(0).within(() => {
+				cy.get('.card').eq(0).should('contain', secondTopCardTitle)
+				cy.get('.card').eq(1).should('contain', firstTopCardTitle)
+			})
+			cy.get('@reorderCard.all').should('have.length', 0)
+
+			cy.reload()
+			cy.get('.board .stack').eq(0).within(() => {
+				cy.get('.card').eq(0).should('contain', secondTopCardTitle)
+				cy.get('.card').eq(1).should('contain', firstTopCardTitle)
+			})
+
+			cy.get('[data-cy="navigation:settings"]').click()
+			cy.get('[data-cy="setting:add-card-at-top"] input[role="switch"]').uncheck({ force: true })
+			cy.wait('@setCardPosition')
+			cy.visit(`/apps/deck/#/board/${boardId}`)
+			cy.get('.board .stack').eq(0).within(() => {
+				cy.get('[data-cy="action:add-card"]').click()
+				cy.get('.stack__card-add input[type="text"]').type(finalBottomCardTitle)
+				cy.get('.stack__card-add input[type="submit"]').click()
+				cy.wait('@createCard')
+				cy.get('.card').last().should('contain', finalBottomCardTitle)
+			})
+		})
+	})
+
 	it('Create card from overview', function () {
 		cy.visit(`/apps/deck/#/`)
 		const newCardTitle = 'Test create from overview'
diff --git a/lib/Controller/CardOcsController.php b/lib/Controller/CardOcsController.php
index cd6629d204..8049fd4f2a 100644
--- a/lib/Controller/CardOcsController.php
+++ b/lib/Controller/CardOcsController.php
@@ -48,7 +48,7 @@ public function create(string $title, int $stackId, ?int $boardId = null, ?strin
 		if (!$owner) {
 			$owner = $this->userId;
 		}
-		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color);
+		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color, insertAtPosition: $order !== 999);
 
 		// foreach ($labels as $label) {
 		// 	$this->assignLabel($card->getId(), $label);
diff --git a/lib/Service/CardService.php b/lib/Service/CardService.php
index 325dc95777..d051d0205c 100644
--- a/lib/Service/CardService.php
+++ b/lib/Service/CardService.php
@@ -30,6 +30,7 @@
 use OCP\Collaboration\Reference\IReferenceManager;
 use OCP\Comments\ICommentsManager;
 use OCP\EventDispatcher\IEventDispatcher;
+use OCP\IDBConnection;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUserManager;
@@ -58,6 +59,7 @@ public function __construct(
 		private CardServiceValidator $cardServiceValidator,
 		private AssignmentService $assignmentService,
 		private IReferenceManager $referenceManager,
+		private IDBConnection $connection,
 		private ?string $userId,
 	) {
 	}
@@ -187,7 +189,7 @@ public function findCalendarEntries(int $boardId): array {
 	 * @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException
 	 * @throws BadrequestException
 	 */
-	public function create(string $title, int $stackId, string $type, int $order, string $owner, string $description = '', $duedate = null, $startdate = null, ?string $color = null): Card {
+	public function create(string $title, int $stackId, string $type, int $order, string $owner, string $description = '', $duedate = null, $startdate = null, ?string $color = null, bool $insertAtPosition = false): Card {
 		$this->cardServiceValidator->check(compact('title', 'stackId', 'type', 'order', 'owner'));
 
 		$this->permissionService->checkPermission($this->stackMapper, $stackId, Acl::PERMISSION_EDIT);
@@ -204,7 +206,20 @@ public function create(string $title, int $stackId, string $type, int $order, st
 		$card->setDuedate($duedate);
 		$card->setStartdate($startdate);
 		$card->setColor($color);
-		$card = $this->cardMapper->insert($card);
+
+		if (!$insertAtPosition) {
+			$card = $this->cardMapper->insert($card);
+		} else {
+			$this->connection->beginTransaction();
+			try {
+				$card = $this->cardMapper->insert($card);
+				$this->reorderCards($card->getId(), $stackId, $order);
+				$this->connection->commit();
+			} catch (\Throwable $e) {
+				$this->connection->rollBack();
+				throw $e;
+			}
+		}
 
 		$this->activityManager->triggerEvent(ActivityManager::DECK_OBJECT_CARD, $card, ActivityManager::SUBJECT_CARD_CREATE, [], $card->getOwner());
 		$this->changeHelper->cardChanged($card->getId(), false);
@@ -467,6 +482,17 @@ public function reorder(int $id, int $stackId, int $order): array {
 		$changes->setAfter($card);
 		$this->activityManager->triggerUpdateEvents(ActivityManager::DECK_OBJECT_CARD, $changes, ActivityManager::SUBJECT_CARD_UPDATE);
 
+		$result = $this->reorderCards($id, $stackId, $order);
+		$this->changeHelper->cardChanged($id, false);
+		$this->eventDispatcher->dispatchTyped(new CardUpdatedEvent($card, $changes->getBefore()));
+
+		return $result;
+	}
+
+	/**
+	 * @return list<Card>
+	 */
+	private function reorderCards(int $id, int $stackId, int $order): array {
 		$cardsToReorder = $this->cardMapper->findAll($stackId);
 		$result = [];
 		$i = 0;
@@ -489,8 +515,6 @@ public function reorder(int $id, int $stackId, int $order): array {
 			$this->cardMapper->update($cardToReorder);
 			$result[$cardToReorder->getOrder()] = $cardToReorder;
 		}
-		$this->changeHelper->cardChanged($id, false);
-		$this->eventDispatcher->dispatchTyped(new CardUpdatedEvent($card, $changes->getBefore()));
 
 		return array_values($result);
 	}
diff --git a/src/components/DeckAppSettings.vue b/src/components/DeckAppSettings.vue
index 4d095b3448..4973f61dc8 100644
--- a/src/components/DeckAppSettings.vue
+++ b/src/components/DeckAppSettings.vue
@@ -13,6 +13,7 @@
 				<NcFormBoxSwitch v-model="cardDetailsInModal"
 					:label="t('deck', 'Use bigger card view')" />
 				<NcFormBoxSwitch v-model="stackAddCardAtTop"
+					data-cy="setting:add-card-at-top"
 					:label="t('deck', 'Add new cards at the top of a list')" />
 			</NcFormBox>
 		</NcAppSettingsSection>
diff --git a/src/components/board/StackCardAdd.vue b/src/components/board/StackCardAdd.vue
index b235cd036e..c4b8367fbc 100644
--- a/src/components/board/StackCardAdd.vue
+++ b/src/components/board/StackCardAdd.vue
@@ -44,6 +44,9 @@ 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'
+import { mapActions } from 'pinia'
+
+import { useCardStore } from '../../stores/card.js'
 
 export default {
 	name: 'StackCardAdd',
@@ -87,6 +90,9 @@ export default {
 		},
 	},
 	methods: {
+		...mapActions(useCardStore, {
+			addCardInStore: 'addCard',
+		}),
 		close() {
 			this.visible = false
 		},
@@ -94,17 +100,13 @@ export default {
 			this.creating = true
 			this.$emit('creating')
 			try {
-				const newCard = await this.$store.dispatch('addCard', {
+				const newCard = await this.addCardInStore({
 					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) {
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index e0cffe2387..73a0b6bfdb 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -53,6 +53,7 @@
 		<template #footer>
 			<ul class="app-navigation-entry__settings">
 				<NcAppNavigationItem :name="t('deck', 'Deck settings')"
+					data-cy="navigation:settings"
 					@click.prevent.stop="openSettings">
 					<template #icon>
 						<IconCog :size="20" />
diff --git a/src/stores/card.js b/src/stores/card.js
index 774e53a4a9..08f10ad575 100644
--- a/src/stores/card.js
+++ b/src/stores/card.js
@@ -280,6 +280,13 @@ export const useCardStore = defineStore('card', {
 		},
 		async addCard(card) {
 			const createdCard = await apiClient.addCard(card)
+			if (card.order !== undefined) {
+				for (const existingCard of this.cards) {
+					if (existingCard.stackId === createdCard.stackId && existingCard.order >= card.order) {
+						Vue.set(existingCard, 'order', existingCard.order + 1)
+					}
+				}
+			}
 			this.addCardToStore(createdCard)
 			return createdCard
 		},
@@ -302,9 +309,6 @@ export const useCardStore = defineStore('card', {
 			let i = 0
 			const newCards = []
 			for (const c of this.cardsByStack(card.stackId)) {
-				if (c.id === card.id) {
-					newCards.push(card)
-				}
 				if (i === card.order) {
 					i++
 				}
@@ -316,9 +320,9 @@ export const useCardStore = defineStore('card', {
 			this.updateCardsReorder(newCards)
 
 			const stack = useStackStore().stackById(card.stackId)
-			apiClient.reorderCard(card, stack.boardId).then((cards) => {
-				this.updateCardsReorder(Object.values(cards))
-			})
+			const cards = await apiClient.reorderCard(card, stack.boardId)
+			this.updateCardsReorder(Object.values(cards))
+			return cards
 		},
 		async archiveUnarchiveCard(card) {
 			let call = 'archiveCard'
diff --git a/tests/integration/features/api/config.feature b/tests/integration/features/api/config.feature
index e8a39b8cce..c9e3ba7491 100644
--- a/tests/integration/features/api/config.feature
+++ b/tests/integration/features/api/config.feature
@@ -15,6 +15,8 @@ Feature: OCS API - Config
     And the response should contain the key "ocs.data.calendar"
     And the response should contain the key "ocs.data.cardDetailsInModal"
     And the response should contain the key "ocs.data.cardIdBadge"
+    And the response should contain the key "ocs.data.stackAddCardAtTop"
+    And the response value "ocs.data.stackAddCardAtTop" should be "false"
 
   Scenario: GET /api/v1.0/config - The group limit is only exposed to administrators
     When sending "GET" to the OCS API endpoint "/config"
@@ -39,6 +41,20 @@ Feature: OCS API - Config
     When sending "GET" to the OCS API endpoint "/config"
     Then the response value "ocs.data.calendar" should be "true"
 
+  Scenario: POST /api/v1.0/config/{key} - Set the new card position
+    When sending "POST" to the OCS API endpoint "/config/stackAddCardAtTop" with body:
+      | value | true |
+    Then the response should have a status code "200"
+    And the response value "ocs.data" should be "true"
+    When sending "GET" to the OCS API endpoint "/config"
+    Then the response value "ocs.data.stackAddCardAtTop" should be "true"
+    When sending "POST" to the OCS API endpoint "/config/stackAddCardAtTop" with body:
+      | value | false |
+    Then the response should have a status code "200"
+    And the response value "ocs.data" should be "false"
+    When sending "GET" to the OCS API endpoint "/config"
+    Then the response value "ocs.data.stackAddCardAtTop" should be "false"
+
   Scenario: POST /api/v1.0/config/{key} - Set a board config value
     Given sending "POST" to the API endpoint "/boards" with body:
       | title | Config board |
diff --git a/tests/unit/Service/BatchQueryPerformanceTest.php b/tests/unit/Service/BatchQueryPerformanceTest.php
index 08239a9bc3..76873614f8 100644
--- a/tests/unit/Service/BatchQueryPerformanceTest.php
+++ b/tests/unit/Service/BatchQueryPerformanceTest.php
@@ -42,6 +42,7 @@
 use OCP\Collaboration\Reference\IReferenceManager;
 use OCP\Comments\ICommentsManager;
 use OCP\EventDispatcher\IEventDispatcher;
+use OCP\IDBConnection;
 use OCP\IL10N;
 use OCP\IRequest;
 use OCP\IURLGenerator;
@@ -380,6 +381,7 @@ private function setUpCardService(): void {
 			$this->createMock(CardServiceValidator::class),
 			$this->createMock(AssignmentService::class),
 			$this->referenceManager,
+			$this->createMock(IDBConnection::class),
 			'user1',
 		);
 	}
diff --git a/tests/unit/Service/CardServiceTest.php b/tests/unit/Service/CardServiceTest.php
index 58084a1fa4..94a96a7a98 100644
--- a/tests/unit/Service/CardServiceTest.php
+++ b/tests/unit/Service/CardServiceTest.php
@@ -45,6 +45,7 @@
 use OCP\Collaboration\Reference\IReferenceManager;
 use OCP\Comments\ICommentsManager;
 use OCP\EventDispatcher\IEventDispatcher;
+use OCP\IDBConnection;
 use OCP\IRequest;
 use OCP\IURLGenerator;
 use OCP\IUser;
@@ -97,6 +98,8 @@ class CardServiceTest extends TestCase {
 	private $cardServiceValidator;
 	/** @var IReferenceManager|MockObject */
 	private $referenceManager;
+	/** @var IDBConnection|MockObject */
+	private $connection;
 
 	/** @var AssignmentService|MockObject */
 	private $assignmentService;
@@ -124,6 +127,7 @@ public function setUp(): void {
 		$this->cardServiceValidator = $this->createMock(CardServiceValidator::class);
 		$this->assignmentService = $this->createMock(AssignmentService::class);
 		$this->referenceManager = $this->createMock(IReferenceManager::class);
+		$this->connection = $this->createMock(IDBConnection::class);
 
 		$this->logger->expects($this->any())->method('error');
 
@@ -149,6 +153,7 @@ public function setUp(): void {
 			$this->cardServiceValidator,
 			$this->assignmentService,
 			$this->referenceManager,
+			$this->connection,
 			'user1'
 		);
 	}
@@ -232,6 +237,8 @@ public function testCreate() {
 		$this->cardMapper->expects($this->once())
 			->method('insert')
 			->willReturn($card);
+		$this->connection->expects($this->never())
+			->method('beginTransaction');
 		$this->stackMapper->expects($this->once())
 			->method('find')
 			->with(123)
@@ -246,6 +253,69 @@ public function testCreate() {
 		$this->assertEquals($b->getColor(), '00ff00');
 	}
 
+	public function testCreateAtTopReordersCardsInTransaction(): void {
+		$newCard = Card::fromParams([
+			'id' => 3,
+			'title' => 'New card',
+			'owner' => 'admin',
+			'stackId' => 123,
+			'order' => 0,
+			'type' => 'plain',
+		]);
+		$firstCard = Card::fromParams(['id' => 1, 'stackId' => 123, 'order' => 0]);
+		$secondCard = Card::fromParams(['id' => 2, 'stackId' => 123, 'order' => 1]);
+		$stack = Stack::fromParams(['id' => 123, 'boardId' => 1337]);
+
+		$this->connection->expects($this->once())->method('beginTransaction');
+		$this->connection->expects($this->once())->method('commit');
+		$this->connection->expects($this->never())->method('rollBack');
+		$this->cardMapper->expects($this->once())
+			->method('insert')
+			->willReturn($newCard);
+		$this->cardMapper->expects($this->once())
+			->method('findAll')
+			->with(123)
+			->willReturn([$firstCard, $secondCard, $newCard]);
+		$this->cardMapper->expects($this->exactly(3))
+			->method('update')
+			->willReturnArgument(0);
+		$this->stackMapper->expects($this->once())
+			->method('find')
+			->with(123)
+			->willReturn($stack);
+
+		$createdCard = $this->cardService->create('New card', 123, 'plain', 0, 'admin', insertAtPosition: true);
+
+		$this->assertSame(0, $createdCard->getOrder());
+		$this->assertSame(1, $firstCard->getOrder());
+		$this->assertSame(2, $secondCard->getOrder());
+	}
+
+	public function testCreateAtTopRollsBackWhenReorderingFails(): void {
+		$newCard = Card::fromParams([
+			'id' => 3,
+			'title' => 'New card',
+			'owner' => 'admin',
+			'stackId' => 123,
+			'order' => 0,
+			'type' => 'plain',
+		]);
+
+		$this->connection->expects($this->once())->method('beginTransaction');
+		$this->connection->expects($this->never())->method('commit');
+		$this->connection->expects($this->once())->method('rollBack');
+		$this->cardMapper->expects($this->once())
+			->method('insert')
+			->willReturn($newCard);
+		$this->cardMapper->expects($this->once())
+			->method('findAll')
+			->with(123)
+			->willThrowException(new \RuntimeException('Could not reorder cards'));
+
+		$this->expectException(\RuntimeException::class);
+		$this->cardService->create('New card', 123, 'plain', 0, 'admin', insertAtPosition: true);
+	}
+
 	public function testClone() {
 		$card = new Card();
 		$card->setId(1);

From 7e5bc4c12d0d0bf258ca432da80a069ccf86eb66 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sat, 8 Aug 2026 19:11:47 +0000
Subject: [PATCH 26/34] fix(create): centralize insert-at-position handling and
 close add-card form after creation

- Let CardService::create() decide when to reorder based on the requested
  order, so all card creation endpoints behave consistently.
- Close the inline add-card form after a card is successfully created to
  prevent it from covering the new card and fix flaky Cypress tests.

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 cypress/e2e/cardFeatures.js            | 8 --------
 lib/Controller/CardOcsController.php   | 2 +-
 lib/Service/CardService.php            | 6 ++++--
 src/components/board/StackCardAdd.vue  | 1 +
 tests/unit/Service/CardServiceTest.php | 4 ++--
 5 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index 60ad9b916f..9634292ca9 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -110,7 +110,6 @@ describe('Card', function () {
 					cy.get('.stack__card-add input[type="text"]').type(title)
 					cy.get('.stack__card-add input[type="submit"]').click()
 					cy.wait('@createCard')
-					cy.get('.stack__card-add input[type="text"]').type('{esc}')
 				})
 			}
 
@@ -380,13 +379,6 @@ 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)
diff --git a/lib/Controller/CardOcsController.php b/lib/Controller/CardOcsController.php
index 8049fd4f2a..cd6629d204 100644
--- a/lib/Controller/CardOcsController.php
+++ b/lib/Controller/CardOcsController.php
@@ -48,7 +48,7 @@ public function create(string $title, int $stackId, ?int $boardId = null, ?strin
 		if (!$owner) {
 			$owner = $this->userId;
 		}
-		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color, insertAtPosition: $order !== 999);
+		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color);
 
 		// foreach ($labels as $label) {
 		// 	$this->assignLabel($card->getId(), $label);
diff --git a/lib/Service/CardService.php b/lib/Service/CardService.php
index d051d0205c..304576793f 100644
--- a/lib/Service/CardService.php
+++ b/lib/Service/CardService.php
@@ -189,7 +189,7 @@ public function findCalendarEntries(int $boardId): array {
 	 * @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException
 	 * @throws BadrequestException
 	 */
-	public function create(string $title, int $stackId, string $type, int $order, string $owner, string $description = '', $duedate = null, $startdate = null, ?string $color = null, bool $insertAtPosition = false): Card {
+	public function create(string $title, int $stackId, string $type, int $order, string $owner, string $description = '', $duedate = null, $startdate = null, ?string $color = null): Card {
 		$this->cardServiceValidator->check(compact('title', 'stackId', 'type', 'order', 'owner'));
 
 		$this->permissionService->checkPermission($this->stackMapper, $stackId, Acl::PERMISSION_EDIT);
@@ -207,9 +207,11 @@ public function create(string $title, int $stackId, string $type, int $order, st
 		$card->setStartdate($startdate);
 		$card->setColor($color);
 
-		if (!$insertAtPosition) {
+		if ($order === 999) {
+			// Append to the end of the stack
 			$card = $this->cardMapper->insert($card);
 		} else {
+			// Insert at the requested position and shift the surrounding cards
 			$this->connection->beginTransaction();
 			try {
 				$card = $this->cardMapper->insert($card);
diff --git a/src/components/board/StackCardAdd.vue b/src/components/board/StackCardAdd.vue
index c4b8367fbc..8c8084c7c5 100644
--- a/src/components/board/StackCardAdd.vue
+++ b/src/components/board/StackCardAdd.vue
@@ -108,6 +108,7 @@ export default {
 					...(this.addAtTop ? { order: 0 } : {}),
 				})
 				this.title = ''
+				this.visible = false
 				this.$emit('created', newCard)
 				if (!this.cardDetailsInModal) {
 					this.$router.push({ name: 'card', params: { cardId: newCard.id } })
diff --git a/tests/unit/Service/CardServiceTest.php b/tests/unit/Service/CardServiceTest.php
index 94a96a7a98..98eab78313 100644
--- a/tests/unit/Service/CardServiceTest.php
+++ b/tests/unit/Service/CardServiceTest.php
@@ -284,7 +284,7 @@ public function testCreateAtTopReordersCardsInTransaction(): void {
 			->with(123)
 			->willReturn($stack);
 
-		$createdCard = $this->cardService->create('New card', 123, 'plain', 0, 'admin', insertAtPosition: true);
+		$createdCard = $this->cardService->create('New card', 123, 'plain', 0, 'admin');
 
 		$this->assertSame(0, $createdCard->getOrder());
 		$this->assertSame(1, $firstCard->getOrder());
@@ -313,7 +313,7 @@ public function testCreateAtTopRollsBackWhenReorderingFails(): void {
 			->willThrowException(new \RuntimeException('Could not reorder cards'));
 
 		$this->expectException(\RuntimeException::class);
-		$this->cardService->create('New card', 123, 'plain', 0, 'admin', insertAtPosition: true);
+		$this->cardService->create('New card', 123, 'plain', 0, 'admin');
 	}
 
 	public function testClone() {

From 2d224ee64b684e175d753cfb9716d036efeffb92 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sat, 8 Aug 2026 19:23:17 +0000
Subject: [PATCH 27/34] Revert(create): restore explicit insertAtPosition
 opt-in

Inferring the reorder-on-insert behavior from `$order !== 999` broke
cloneCard() and DefaultBoardService, which call create() with real,
already-correct order values (e.g. 0) that must not trigger a shift of
other cards in the stack. Restore the explicit $insertAtPosition flag,
opted into only by the OCS controller used by the new add-card UI.

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 lib/Controller/CardOcsController.php   | 2 +-
 lib/Service/CardService.php            | 5 ++---
 tests/unit/Service/CardServiceTest.php | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/lib/Controller/CardOcsController.php b/lib/Controller/CardOcsController.php
index cd6629d204..8049fd4f2a 100644
--- a/lib/Controller/CardOcsController.php
+++ b/lib/Controller/CardOcsController.php
@@ -48,7 +48,7 @@ public function create(string $title, int $stackId, ?int $boardId = null, ?strin
 		if (!$owner) {
 			$owner = $this->userId;
 		}
-		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color);
+		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color, insertAtPosition: $order !== 999);
 
 		// foreach ($labels as $label) {
 		// 	$this->assignLabel($card->getId(), $label);
diff --git a/lib/Service/CardService.php b/lib/Service/CardService.php
index 304576793f..7ebc8d8a6f 100644
--- a/lib/Service/CardService.php
+++ b/lib/Service/CardService.php
@@ -189,7 +189,7 @@ public function findCalendarEntries(int $boardId): array {
 	 * @throws \OCP\AppFramework\Db\MultipleObjectsReturnedException
 	 * @throws BadrequestException
 	 */
-	public function create(string $title, int $stackId, string $type, int $order, string $owner, string $description = '', $duedate = null, $startdate = null, ?string $color = null): Card {
+	public function create(string $title, int $stackId, string $type, int $order, string $owner, string $description = '', $duedate = null, $startdate = null, ?string $color = null, bool $insertAtPosition = false): Card {
 		$this->cardServiceValidator->check(compact('title', 'stackId', 'type', 'order', 'owner'));
 
 		$this->permissionService->checkPermission($this->stackMapper, $stackId, Acl::PERMISSION_EDIT);
@@ -207,8 +207,7 @@ public function create(string $title, int $stackId, string $type, int $order, st
 		$card->setStartdate($startdate);
 		$card->setColor($color);
 
-		if ($order === 999) {
-			// Append to the end of the stack
+		if (!$insertAtPosition) {
 			$card = $this->cardMapper->insert($card);
 		} else {
 			// Insert at the requested position and shift the surrounding cards
diff --git a/tests/unit/Service/CardServiceTest.php b/tests/unit/Service/CardServiceTest.php
index 98eab78313..94a96a7a98 100644
--- a/tests/unit/Service/CardServiceTest.php
+++ b/tests/unit/Service/CardServiceTest.php
@@ -284,7 +284,7 @@ public function testCreateAtTopReordersCardsInTransaction(): void {
 			->with(123)
 			->willReturn($stack);
 
-		$createdCard = $this->cardService->create('New card', 123, 'plain', 0, 'admin');
+		$createdCard = $this->cardService->create('New card', 123, 'plain', 0, 'admin', insertAtPosition: true);
 
 		$this->assertSame(0, $createdCard->getOrder());
 		$this->assertSame(1, $firstCard->getOrder());
@@ -313,7 +313,7 @@ public function testCreateAtTopRollsBackWhenReorderingFails(): void {
 			->willThrowException(new \RuntimeException('Could not reorder cards'));
 
 		$this->expectException(\RuntimeException::class);
-		$this->cardService->create('New card', 123, 'plain', 0, 'admin');
+		$this->cardService->create('New card', 123, 'plain', 0, 'admin', insertAtPosition: true);
 	}
 
 	public function testClone() {

From 5cd6419e3a2212fe8020f90e95e2331e1aaeb1ab Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sat, 8 Aug 2026 19:47:53 +0000
Subject: [PATCH 28/34] Remove unused stack__cards-list class and reorderCard
 return value

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/Stack.vue | 2 +-
 src/stores/card.js             | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 6ed6c8d8ca..0518bb12b5 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -106,7 +106,7 @@
 			@created="handleCardCreated" />
 
 		<Container :get-child-payload="payloadForCard(stack.id)"
-			class="dnd-container stack__cards-list"
+			class="dnd-container"
 			group-name="stack"
 			data-click-closes-sidebar="true"
 			non-drag-area-selector=".dragDisabled"
diff --git a/src/stores/card.js b/src/stores/card.js
index 08f10ad575..09e29a818b 100644
--- a/src/stores/card.js
+++ b/src/stores/card.js
@@ -322,7 +322,6 @@ export const useCardStore = defineStore('card', {
 			const stack = useStackStore().stackById(card.stackId)
 			const cards = await apiClient.reorderCard(card, stack.boardId)
 			this.updateCardsReorder(Object.values(cards))
-			return cards
 		},
 		async archiveUnarchiveCard(card) {
 			let call = 'archiveCard'

From da424bdc30bec5935c9871d99da18be7412b7488 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sat, 8 Aug 2026 20:46:45 +0000
Subject: [PATCH 29/34] Clean up review findings

- Name the sentinel order in CardOcsController instead of a magic 999
- Drop unreachable stackAddCardAtTop case from ConfigService::get()
- Restore the stronger visibility assertion in the label e2e test

Signed-off-by: Theo <36564257+theoholl@users.noreply.github.com>
---
 cypress/e2e/cardFeatures.js          |  2 +-
 lib/Controller/CardOcsController.php | 11 +++++++++--
 lib/Service/ConfigService.php        |  2 --
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index 9634292ca9..3a741858d8 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -395,7 +395,7 @@ describe('Card', function () {
 			cy.get(`.card:contains("${newCardTitle}")`)
 				.scrollIntoView({ block: 'center' })
 				.find('.labels li:contains("Later")')
-				.should('exist')
+				.should('be.visible')
 			cy.get(`.card:contains("${newCardTitle}")`).find('.labels li:contains("Action needed")')
 				.should('not.exist')
 		})
diff --git a/lib/Controller/CardOcsController.php b/lib/Controller/CardOcsController.php
index 8049fd4f2a..1e33f1d9b9 100644
--- a/lib/Controller/CardOcsController.php
+++ b/lib/Controller/CardOcsController.php
@@ -21,6 +21,12 @@
 use OCP\IRequest;
 
 class CardOcsController extends OCSController {
+	/**
+	 * Sentinel order used when the client does not request a specific position.
+	 * Cards created with this order are appended to the end of the stack.
+	 */
+	private const DEFAULT_ORDER = 999;
+
 	public function __construct(
 		string $appName,
 		IRequest $request,
@@ -36,7 +42,7 @@ public function __construct(
 
 	#[NoAdminRequired]
 	#[PublicPage]
-	public function create(string $title, int $stackId, ?int $boardId = null, ?string $type = 'plain', ?string $owner = null, ?int $order = 999, ?string $description = '', $duedate = null, $startdate = null, ?array $labels = [], ?array $users = [], ?string $color = null) {
+	public function create(string $title, int $stackId, ?int $boardId = null, ?string $type = 'plain', ?string $owner = null, ?int $order = self::DEFAULT_ORDER, ?string $description = '', $duedate = null, $startdate = null, ?array $labels = [], ?array $users = [], ?string $color = null) {
 		if ($boardId) {
 			$board = $this->boardService->find($boardId, false);
 			if ($board->getExternalId()) {
@@ -48,7 +54,8 @@ public function create(string $title, int $stackId, ?int $boardId = null, ?strin
 		if (!$owner) {
 			$owner = $this->userId;
 		}
-		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color, insertAtPosition: $order !== 999);
+		// An explicit order means the client wants the card at that position, so shift the surrounding cards
+		$card = $this->cardService->create($title, $stackId, $type, $order, $owner, $description, $duedate, $startdate, $color, insertAtPosition: $order !== self::DEFAULT_ORDER);
 
 		// foreach ($labels as $label) {
 		// 	$this->assignLabel($card->getId(), $label);
diff --git a/lib/Service/ConfigService.php b/lib/Service/ConfigService.php
index 580e2590d1..5a59890527 100644
--- a/lib/Service/ConfigService.php
+++ b/lib/Service/ConfigService.php
@@ -91,8 +91,6 @@ public function get(string $key) {
 					return false;
 				}
 				return (bool)$this->config->getUserValue($this->getUserId(), Application::APP_ID, 'cardIdBadge', false);
-			case 'stackAddCardAtTop':
-				return $this->isStackAddCardAtTopEnabled();
 		}
 		return false;
 	}

From f5fbe5ad575b1b395f06e313713b4a59697e0893 Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sat, 8 Aug 2026 21:07:57 +0000
Subject: [PATCH 30/34] Simplify bottom add-card layout

Place the bottom add-card control outside the scrollable list without overlap-specific spacing or drag handling.

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

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index fd12231d20..5b9cfe3f35 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -341,14 +341,6 @@ 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 0518bb12b5..aaaa358cb2 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -8,8 +8,6 @@
 		:class="{
 			'stack--done-column': isDoneColumn,
 			'stack--add-card-at-top': canAddCard && stackAddCardAtTop,
-			'stack--add-card-at-bottom': canAddCard && !stackAddCardAtTop,
-			'stack--dragging-card': draggingCard,
 		}"
 		:data-cy-stack="stack.title">
 		<div class="stack__header"
@@ -341,20 +339,12 @@ 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: 1 1 auto;
 			min-height: 0;
 		}
 
-		&.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 {
 			&:after {
 				content: '';

From 9a937d4c921e1e9feed6ee353f3485734dfeea0b Mon Sep 17 00:00:00 2001
From: Theo <36564257+theoholl@users.noreply.github.com>
Date: Sat, 8 Aug 2026 21:13:39 +0000
Subject: [PATCH 31/34] Restore bottom add-card spacing

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

diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index aaaa358cb2..21764e0b3b 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -8,6 +8,7 @@
 		:class="{
 			'stack--done-column': isDoneColumn,
 			'stack--add-card-at-top': canAddCard && stackAddCardAtTop,
+			'stack--add-card-at-bottom': canAddCard && !stackAddCardAtTop,
 		}"
 		:data-cy-stack="stack.title">
 		<div class="stack__header"

From 44f3eefcfc08e9d0f0c807a0ae72934e64ffa926 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 9 Aug 2026 09:08:23 +0000
Subject: [PATCH 32/34] Fix StackCardAdd CSS covering card content in bottom
 mode

Removed z-index: 100 and position: relative from the base
.stack__card-add CSS, so they only apply when in top add-card mode.
Also removed the ::before gradient pseudo-element that extended above
the add-card control into the DnD container, covering card content
(like due date badges) and causing Cypress visibility failures.

The top mode still gets z-index: 100 + position: relative + a ::after
gradient (with pointer-events: none) to fade cards scrolling below.
The bottom mode is now a simple element with only padding, matching
the original behavior before the add-card refactor.

Co-authored-by: theoholl <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/StackCardAdd.vue | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/components/board/StackCardAdd.vue b/src/components/board/StackCardAdd.vue
index 8c8084c7c5..04090b9377 100644
--- a/src/components/board/StackCardAdd.vue
+++ b/src/components/board/StackCardAdd.vue
@@ -130,14 +130,15 @@ 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 & {
+			position: relative;
+			z-index: 100;
 			padding-top: $stack-gap;
 
+			// Smooth fade out of the cards below the control
 			&:after {
 				content: '';
 				display: block;
@@ -156,19 +157,6 @@ export default {
 			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);

From b4e6df71a6f18e2ff48f52a811f95c9a999d55a7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 9 Aug 2026 10:05:38 +0000
Subject: [PATCH 33/34] Add matching bottom list gradient

Co-authored-by: theoholl <36564257+theoholl@users.noreply.github.com>
---
 src/components/board/StackCardAdd.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/board/StackCardAdd.vue b/src/components/board/StackCardAdd.vue
index 04090b9377..5751092a81 100644
--- a/src/components/board/StackCardAdd.vue
+++ b/src/components/board/StackCardAdd.vue
@@ -154,7 +154,23 @@ export default {
 		}
 
 		.stack--add-card-at-bottom & {
+			position: relative;
+			z-index: 100;
 			padding-bottom: $stack-gap;
+
+			// Smooth fade out of the cards above the control
+			&:before {
+				content: '';
+				display: block;
+				position: absolute;
+				width: 100%;
+				height: $stack-gap;
+				top: 0;
+				z-index: 99;
+				pointer-events: none;
+				background-image: linear-gradient(0deg, var(--color-main-background) 0%, transparent 100%);
+				transform: translateY(-100%);
+			}
 		}
 
 		:deep(.stack__card-add-button.button-vue) {

From 1801af4dd792a97a4febf23987fa426ec74e6fda Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 9 Aug 2026 10:28:37 +0000
Subject: [PATCH 34/34] Fix flaky Smart picker visibility assertion

Co-authored-by: theoholl <36564257+theoholl@users.noreply.github.com>
---
 cypress/e2e/cardFeatures.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/cardFeatures.js b/cypress/e2e/cardFeatures.js
index 3a741858d8..eb84bf10a7 100644
--- a/cypress/e2e/cardFeatures.js
+++ b/cypress/e2e/cardFeatures.js
@@ -314,7 +314,9 @@ describe('Card', function () {
 			cy.visit(`/apps/deck/board/${boardId}`)
 			cy.reload()
 			cy.get('.board .stack').eq(0).within(() => {
-				cy.get(`.card:contains("${newCardTitle}")`).should('be.visible')
+				cy.get(`.card:contains("${newCardTitle}")`)
+					.scrollIntoView({ block: 'center' })
+					.should('be.visible')
 			})
 		})
 	})