From 41d17494d46287a01543629875b6bffdcec0c8ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 10 Nov 2023 00:29:13 +0100
Subject: [PATCH] fix: Fix spacing and reserved scrollbar space
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/board/Board.vue    | 1 +
 src/components/board/Stack.vue    | 8 +++-----
 src/components/cards/CardItem.vue | 6 ++++++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index f41cf81bb..657eb9725 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -252,6 +252,7 @@ export default {
 					scrollbar-gutter: stable;
 					padding-top: 15px;
 					margin-top: -10px;
+					scrollbar-gutter: stable;
 				}
 
 				.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 21b9499a3..cbbf383ea 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -26,10 +26,9 @@
 		<div v-click-outside="stopCardCreation"
 			class="stack__header"
 			:class="{'stack__header--add': showAddCard}"
-			tabindex="0"
 			:aria-label="stack.title">
 			<transition name="fade" mode="out-in">
-				<h3 v-if="!canManage || isArchived">
+				<h3 v-if="!canManage || isArchived" tabindex="0">
 					{{ stack.title }}
 				</h3>
 				<h3 v-else-if="!editing"
@@ -330,8 +329,6 @@ export default {
 
 	.stack {
 		width: $stack-width + $stack-spacing * 3;
-		margin-left: math.div($stack-spacing, 2);
-		margin-right: math.div($stack-spacing, 2);
 	}
 
 	.stack__header {
@@ -340,6 +337,7 @@ export default {
 		top: 0;
 		z-index: 100;
 		padding-left: $card-spacing;
+		padding-right: $card-spacing;
 		cursor: grab;
 		min-height: 44px;
 
@@ -351,7 +349,7 @@ export default {
 			width: 100%;
 			height: 20px;
 			top: 30px;
-			right: 10px;
+			left: 0px;
 			z-index: 99;
 			transition: top var(--animation-slow);
 
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index 9751abb45..c6c007efd 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -220,6 +220,7 @@ export default {
 		background-color: var(--color-main-background);
 		margin-bottom: $card-spacing;
 		border: 2px solid var(--color-border);
+		width: 100%;
 
 		&:deep(*) {
 			cursor: pointer;
@@ -232,6 +233,11 @@ export default {
 			border: 2px solid var(--color-primary-element);
 		}
 
+		&:focus, &:focus-visible, &:focus-within, &:hover {
+			outline: none;
+			border: 2px solid var(--color-primary-element);
+		}
+
 		.card-upper {
 			display: flex;
 			min-height: 44px;