fix: design review issues

Signed-off-by: Luka Trovic <luka@nextcloud.com>

src/components/board/Board.vue

@@ -250,7 +250,7 @@ export default {
 	.board {
 		padding-left: $board-spacing;
 		position: relative;
-		max-height: calc(100% - 44px);
+		max-height: calc(100% - var(--default-clickable-area));
 		overflow: hidden;
 		overflow-x: auto;
 		flex-grow: 1;

src/components/board/BoardSidebar.vue

@@ -1,6 +1,6 @@
 <!--
-  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
+	- SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+	- SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
@@ -100,3 +100,12 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+:deep {
+	.app-sidebar-tabs__tab-caption,
+	.app-sidebar-tabs__nav .checkbox-content__text {
+		white-space: normal !important;
+	}
+}
+</style>

src/components/board/DeletedTabSidebar.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<div>
-		<h3>{{ t('deck', 'Deleted lists') }}</h3>
+		<h5>{{ t('deck', 'Deleted lists') }}</h5>
 		<ul>
 			<li v-for="deletedStack in deletedStacks" :key="deletedStack.id">
 				<span class="icon icon-deck" />
@@ -18,7 +18,7 @@
 			</li>
 		</ul>
 
-		<h3>{{ t('deck', 'Deleted cards') }}</h3>
+		<h5>{{ t('deck', 'Deleted cards') }}</h5>
 		<ul>
 			<li v-for="deletedCard in deletedCards" :key="deletedCard.id">
 				<div class="icon icon-deck" />
@@ -102,7 +102,7 @@ export default {
 		}
 
 		* {
-			flex-basis: 44px;
+			flex-basis: var(--default-clickable-area);
 		}
 
 		.title {

src/components/board/Stack.vue

@@ -1,6 +1,6 @@
 <!--
-  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
+	- SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
+	- SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
@@ -261,7 +261,7 @@ export default {
 		},
 		startEditing(stack) {
 			if (this.dragging) {
-			  return
+				return
 			}
 
 			this.copiedStack = Object.assign({}, stack)
@@ -322,7 +322,7 @@ export default {
 		padding-left: $card-spacing;
 		padding-right: $card-spacing;
 		cursor: grab;
-		min-height: 44px;
+		min-height: var(--default-clickable-area);
 
 		// Smooth fade out of the cards at the top
 		&:before {
@@ -374,6 +374,7 @@ export default {
 			border-radius: 3px;
 			margin: 6px;
 			padding: 4px 4px;
+			font-size: 120%;
 
 			&:focus-visible {
 				outline: 2px solid var(--color-border-dark);
@@ -384,10 +385,17 @@ export default {
 		form {
 			margin: 2px 0;
 		}
+
+		:deep {
+			.action-item,
+			.v-popper--theme-dropdown {
+				display: flex;
+			}
+		}
 	}
 
 	.stack__card-add {
-		height: 44px;
+		height: var(--default-clickable-area);
 		flex-shrink: 0;
 		z-index: 100;
 		display: flex;

src/components/board/TagsTabSidebar.vue

@@ -173,7 +173,7 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-	$clickable-area: 44px;
+	$clickable-area: var(--default-clickable-area);
 
 	.labels li {
 		display: flex;