diff --git a/src/components/Controls.vue b/src/components/Controls.vue index bcb51d265..e9b81a921 100644 --- a/src/components/Controls.vue +++ b/src/components/Controls.vue @@ -544,7 +544,7 @@ export default { .filter--item { input + label { display: block; - padding: 6px 0; + padding: var(--default-grid-baseline) 0; .avatardiv { vertical-align: middle; margin-bottom: 2px; diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue index bdb772f93..3bf47d68f 100644 --- a/src/components/board/Board.vue +++ b/src/components/board/Board.vue @@ -285,7 +285,9 @@ export default { flex-grow: 1; display: flex; flex-direction: column; - padding: $stack-spacing; + // Margin left instead of padidng to avoid jumps on dropping a card + margin-left: $stack-spacing; + padding-right: $stack-spacing; overflow-x: hidden; overflow-y: auto; padding-top: 15px; diff --git a/src/components/cards/CardCover.vue b/src/components/cards/CardCover.vue index 6819f2c59..ca46ed3cf 100644 --- a/src/components/cards/CardCover.vue +++ b/src/components/cards/CardCover.vue @@ -68,9 +68,9 @@ export default { .card-cover { height: 100px; display: flex; - margin-top: -8px; - margin-left: -8px; - margin-right: -8px; + margin-top: -6px; + margin-left: -6px; + margin-right: -6px; .image-wrapper { flex: 1; @@ -79,10 +79,10 @@ export default { background-repeat: no-repeat; background-position: center center; &.rounded-left { - border-top-left-radius: 10px; + border-top-left-radius: var(--border-radius-large); } &.rounded-right { - border-top-right-radius: 10px; + border-top-right-radius: var(--border-radius-large); } } } diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue index 3ac4482f7..581fce77e 100644 --- a/src/components/cards/CardItem.vue +++ b/src/components/cards/CardItem.vue @@ -290,11 +290,10 @@ export default { background-color: var(--color-main-background); margin-bottom: $card-spacing; padding: var(--default-grid-baseline) $card-padding; - border: 2px solid var(--color-border); + border: 2px solid var(--color-border-dark); width: 100%; display: flex; flex-direction: column; - gap: var(--default-grid-baseline); &:deep(*) { cursor: pointer; @@ -317,7 +316,7 @@ export default { h4 { font-weight: normal; margin: 0; - padding: 6px; + padding: var(--default-grid-baseline); flex-grow: 1; font-size: 100%; overflow: hidden; @@ -363,7 +362,8 @@ export default { .card-labels { display: flex; align-items: end; - margin-bottom: var(--default-grid-baseline); + padding-left: var(--default-grid-baseline); + padding-top: var(--default-grid-baseline); .labels { flex-wrap: wrap; @@ -403,7 +403,6 @@ export default { display: flex; height: 32px; width: 32px; - margin-top: 6px; } &.has-labels { padding-bottom: $card-padding; diff --git a/src/components/overview/Overview.vue b/src/components/overview/Overview.vue index 515c753e0..0b8269e20 100644 --- a/src/components/overview/Overview.vue +++ b/src/components/overview/Overview.vue @@ -168,11 +168,13 @@ export default { .dashboard-column { display: flex; flex-direction: column; + min-width: $stack-width; width: $stack-width; margin-left: $stack-spacing; margin-right: $stack-spacing; h3 { + font-size: var(--default-font-size); margin: -6px; margin-bottom: 12px; padding: 6px 13px;