fix: design harmonization on last features

web/src/components/RetentionCard.vue

@@ -146,23 +146,20 @@ onBeforeUnmount(clearSavedTimer)
 </script>
 
 <template>
-	<UCard
-		as="section"
+	<section
 		aria-labelledby="retention-h"
 		data-testid="retention-card"
 		:aria-busy="skeletonVisible ? 'true' : undefined"
-		:ui="{
-			root: 'rounded-none border border-default bg-default shadow-none ring-0 divide-y-0',
-			header: 'flex items-center gap-2 border-b border-default px-4 py-3 sm:px-4 sm:py-3',
-			body: 'flex flex-col gap-4 p-4 sm:p-4',
-		}"
+		class="flex flex-col gap-4 border border-default bg-default p-4 lg:p-5"
 	>
-		<template #header>
-			<div class="flex min-w-0 flex-1 flex-col">
-				<h2 id="retention-h" class="text-base font-semibold text-highlighted">
+		<div class="flex items-start gap-3">
+			<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+				<h2 id="retention-h" class="text-[0.9375rem]/6 font-semibold text-highlighted">
 					{{ t('Retention') }}
 				</h2>
-				<p class="text-xs text-muted">{{ t('How long activity is kept.') }}</p>
+				<p class="text-pretty text-muted">
+					{{ t('How long activity is kept. Only owners can change it.') }}
+				</p>
 			</div>
 			<span
 				aria-live="polite"
@@ -184,7 +181,7 @@ onBeforeUnmount(clearSavedTimer)
 					{{ t('Saved') }}
 				</span>
 			</span>
-		</template>
+		</div>
 
 		<template v-if="skeletonVisible">
 			<USkeleton :class="[SKELETON_BAR, 'h-3.5 w-30']" />
@@ -244,10 +241,13 @@ onBeforeUnmount(clearSavedTimer)
 				</template>
 			</UAlert>
 
-			<div class="flex max-w-65 flex-col gap-1.5">
-				<span id="retention-label" class="font-medium text-highlighted">
-					{{ t('Keep activity for') }}
-				</span>
+			<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between md:gap-4">
+				<div class="flex min-w-0 flex-col gap-0.5">
+					<span id="retention-label" class="font-medium text-highlighted">
+						{{ t('Keep activity for') }}
+					</span>
+					<span class="text-xs text-muted">{{ helperCopy(selected) }}</span>
+				</div>
 				<USelectMenu
 					:model-value="selected"
 					:items="options"
@@ -257,15 +257,14 @@ onBeforeUnmount(clearSavedTimer)
 					aria-labelledby="retention-label"
 					color="neutral"
 					variant="outline"
-					class="w-full"
+					class="w-full md:w-40"
 					:ui="{
-						base: 'h-11 rounded-none border border-accented bg-default px-2.5 text-sm ring-0 md:h-8',
-						trailingIcon: 'size-3.5 text-muted',
+						base: 'h-11 rounded-none border border-accented bg-default px-3 text-base ring-0 md:h-8 md:text-sm',
+						trailingIcon: 'size-4 text-muted',
 						content: 'min-w-48',
 					}"
 					@update:model-value="choose($event as number)"
 				/>
-				<span class="text-xs text-muted">{{ helperCopy(selected) }}</span>
 			</div>
 
 			<UAlert
@@ -316,22 +315,20 @@ onBeforeUnmount(clearSavedTimer)
 				"
 			/>
 
-			<USeparator />
-
-			<dl class="flex flex-col gap-1.5">
-				<div class="flex flex-col md:flex-row md:gap-3">
-					<dt class="shrink-0 text-muted md:w-30">{{ t('Last cleanup') }}</dt>
-					<dd data-testid="retention-last" class="text-highlighted">
+			<dl class="flex flex-col gap-1 text-toned">
+				<div class="flex flex-wrap gap-x-1">
+					<dt class="after:content-[':']">{{ t('Last cleanup') }}</dt>
+					<dd data-testid="retention-last">
 						{{ lastCleanupLine(settings) }}
 					</dd>
 				</div>
-				<div class="flex flex-col md:flex-row md:gap-3">
-					<dt class="shrink-0 text-muted md:w-30">{{ t('Next cleanup') }}</dt>
+				<div class="flex flex-wrap gap-x-1">
+					<dt class="after:content-[':']">{{ t('Next cleanup') }}</dt>
 					<dd data-testid="retention-next" class="text-highlighted">
 						{{ nextCleanupLine(settings) }}
 					</dd>
 				</div>
 			</dl>
 		</template>
-	</UCard>
+	</section>
 </template>