fix: Fix spacing and reserved scrollbar space

Signed-off-by: Julius Härtl <[email protected]>
nextcloud · Nov 10, 2023 · 41d1749 · 41d1749
1 parent 8f8597d
commit 41d1749
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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;