feature(3331): card image refactor

Signed-off-by: Luutzen Dijkstra <[email protected]>

Author: ludij

src/components/cards/CardCover.vue

@@ -5,9 +5,9 @@
 
 <template>
 	<div v-if="cardId && ( attachments.length > 0 )" class="card-cover">
-		<div v-for="(attachment, index) in attachments"
+		<div v-for="attachment in attachments"
 			:key="attachment.id"
-			:class="['image-wrapper', { 'rounded-left': index === 0 }, { 'rounded-right': index === attachments.length - 1 }]"
+			class="image-wrapper"
 			:style="{ backgroundImage: `url(${attachmentPreview(attachment)})` }" />
 	</div>
 </template>
@@ -76,12 +76,6 @@ export default {
 		background-size: cover;
 		background-repeat: no-repeat;
 		background-position: center center;
-		&.rounded-left {
-			border-top-left-radius: calc(var(--border-radius-large) - 1px);
-		}
-		&.rounded-right {
-			border-top-right-radius: calc(var(--border-radius-large) - 1px);
-		}
 	}
 }
 </style>

src/components/cards/CardItem.vue

@@ -307,6 +307,7 @@ export default {
 		display: flex;
 		flex-direction: column;
 		gap: $card-gap;
+		overflow: hidden;
 
 		&:deep(*) {
 			cursor: pointer;

src/css/variables.scss

@@ -6,6 +6,6 @@
  $card-max-width: 300px;
  $card-padding: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 2) var(--default-grid-baseline);
  $card-gap: calc(var(--default-grid-baseline) * 3);
- $card-image-margin: calc(var(--default-grid-baseline) * -1);
+ $card-image-margin: calc(var(--default-grid-baseline) * -2);
  $stack-gap: calc(var(--default-grid-baseline) * 3);
  $board-gap: calc(var(--default-grid-baseline) * 4);