feat(ui): align Dashboard Active and Recent Activity card heights

Both cards now use h-100 with a flex column layout so v-row stretches
them to match, and their v-card-text grows to fill so their footers
line up. Move Active's "+N more queued" out of the list body into a
proper v-card-actions footer mirroring Recent Activity's "View all
downloads" button.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-04-18 15:52:05 -04:00
parent e9edaeb66d
commit 24c3999f55
+9 -9
View File
@@ -140,7 +140,7 @@
<v-row class="mt-4"> <v-row class="mt-4">
<!-- Active Downloads (queued + running, auto-refresh) --> <!-- Active Downloads (queued + running, auto-refresh) -->
<v-col cols="12" md="4"> <v-col cols="12" md="4">
<v-card> <v-card class="h-100 d-flex flex-column">
<v-card-title class="d-flex align-center"> <v-card-title class="d-flex align-center">
<v-icon class="mr-2" :class="{ 'mdi-spin': activeDownloads.length }"> <v-icon class="mr-2" :class="{ 'mdi-spin': activeDownloads.length }">
{{ activeDownloads.length ? 'mdi-loading' : 'mdi-download' }} {{ activeDownloads.length ? 'mdi-loading' : 'mdi-download' }}
@@ -160,7 +160,7 @@
<v-icon>mdi-refresh</v-icon> <v-icon>mdi-refresh</v-icon>
</v-btn> </v-btn>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text class="flex-grow-1">
<v-list v-if="activeDownloads.length" density="compact"> <v-list v-if="activeDownloads.length" density="compact">
<v-list-item <v-list-item
v-for="dl in visibleActiveDownloads" v-for="dl in visibleActiveDownloads"
@@ -181,11 +181,6 @@
</v-chip> </v-chip>
</v-list-item-subtitle> </v-list-item-subtitle>
</v-list-item> </v-list-item>
<v-list-item v-if="hiddenActiveCount" class="text-caption text-medium-emphasis">
<v-btn variant="text" size="small" to="/downloads?status=queued">
+{{ hiddenActiveCount }} more queued
</v-btn>
</v-list-item>
</v-list> </v-list>
<div v-else class="text-center py-8"> <div v-else class="text-center py-8">
<v-icon size="48" color="secondary" :style="{ opacity: 0.5 }">mdi-check-circle-outline</v-icon> <v-icon size="48" color="secondary" :style="{ opacity: 0.5 }">mdi-check-circle-outline</v-icon>
@@ -193,19 +188,24 @@
<div class="text-caption text-medium-emphasis mt-1">All sources are idle</div> <div class="text-caption text-medium-emphasis mt-1">All sources are idle</div>
</div> </div>
</v-card-text> </v-card-text>
<v-card-actions>
<v-btn variant="text" :to="hiddenActiveCount ? '/downloads?status=queued' : '/downloads'">
{{ hiddenActiveCount ? `View all downloads (+${hiddenActiveCount} more queued)` : 'View all downloads' }}
</v-btn>
</v-card-actions>
</v-card> </v-card>
</v-col> </v-col>
<!-- Recent Activity --> <!-- Recent Activity -->
<v-col cols="12" md="8"> <v-col cols="12" md="8">
<v-card> <v-card class="h-100 d-flex flex-column">
<v-card-title> <v-card-title>
Recent Activity Recent Activity
<v-chip v-if="recentActivity.length" size="small" class="ml-2" variant="tonal"> <v-chip v-if="recentActivity.length" size="small" class="ml-2" variant="tonal">
Last 7 days Last 7 days
</v-chip> </v-chip>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text class="flex-grow-1">
<v-list v-if="recentActivityGrouped.length"> <v-list v-if="recentActivityGrouped.length">
<template v-for="entry in visibleRecentActivity" :key="entry.key"> <template v-for="entry in visibleRecentActivity" :key="entry.key">
<v-list-item v-if="entry.kind === 'single'"> <v-list-item v-if="entry.kind === 'single'">