Merge pull request #2435 from nextcloud/bugfix/2423

src/App.vue

@@ -143,13 +143,6 @@ export default {
 			}
 		}
 	}
-</style>
-
-<style lang="scss">
-
-	.multiselect {
-		width: 100%;
-	}
 
 	.modal__card {
 		min-width: 320px;
@@ -159,3 +152,11 @@ export default {
 		height: 80vh;
 	}
 </style>
+
+<style lang="scss">
+
+	.multiselect {
+		width: 100%;
+	}
+
+</style>

src/components/board/Stack.vue

@@ -162,6 +162,7 @@ export default {
 		]),
 		...mapState({
 			showArchived: state => state.showArchived,
+			cardDetailsInModal: state => state.cardDetailsInModal,
 		}),
 		cardsByStack() {
 			return this.$store.getters.cardsByStack(this.stack.id).filter((card) => {
@@ -248,7 +249,9 @@ export default {
 					this.$refs.newCardInput.focus()
 					this.animate = false
 				})
-				this.$router.push({ name: 'card', params: { cardId: newCard.id } })
+				if (!this.cardDetailsInModal) {
+					this.$router.push({ name: 'card', params: { cardId: newCard.id } })
+				}
 			} catch (e) {
 				showError('Could not create card: ' + e.response.data.message)
 			} finally {

src/components/card/CardSidebar.vue

@@ -571,14 +571,16 @@ export default {
 	// FIXME: Obivously we should at some point not randomly reuse the sidebar component
 	// since this is not oficially supported
 	.modal__card .app-sidebar {
+		$modal-padding: 14px;
 		border: 0;
-		min-width: 100%;
+		min-width: calc(100% - #{$modal-padding*2});
 		position: relative;
 		top: 0;
 		left: 0;
 		right: 0;
-		max-width: 100%;
+		max-width: calc(100% - #{$modal-padding*2});
-		max-height: 100%;
+		padding: 14px;
+		max-height: calc(100% - #{$modal-padding*2});
 		&::v-deep {
 			.app-sidebar-header {
 				position: sticky;

src/components/cards/CardItem.vue

@@ -31,7 +31,7 @@
 			class="card"
 			@click="openCard">
 			<div class="card-upper">
-				<h3 v-if="isArchived || showArchived || !canEdit">
+				<h3 v-if="compactMode || isArchived || showArchived || !canEdit">
 					{{ card.title }}
 				</h3>
 				<h3 v-else-if="!editing">
@@ -41,6 +41,7 @@
 				<form v-if="editing"
 					v-click-outside="cancelEdit"
 					class="dragDisabled"
+					@click.stop
 					@keyup.esc="cancelEdit"
 					@submit.prevent="finishedEdit(card)">
 					<input v-model="copiedCard.title"
@@ -59,9 +60,9 @@
 				name="zoom"
 				tag="ul"
 				class="labels"
-				@click="openCard">
+				@click.stop="openCard">
 				<li v-for="label in labelsSorted" :key="label.id" :style="labelStyle(label)">
-					<span @click="applyLabelFilter(label)">{{ label.title }}</span>
+					<span @click.stop="applyLabelFilter(label)">{{ label.title }}</span>
 				</li>
 			</transition-group>
 			<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
@@ -171,6 +172,10 @@ export default {
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
 
+		&::v-deep * {
+			cursor: pointer;
+		}
+
 		body.dark &, body.theme--dark & {
 			border: 2px solid var(--color-border);
 		}