mirror of
https://github.com/RayLabsHQ/gitea-mirror.git
synced 2026-10-30 22:21:58 +01:00
fix(ui): make the dashboard Repositories and Recent Activity cards match
The two cards sat at whatever height their own content needed, so they ended at different points whenever the lists were different lengths. That is the normal state: repositories and mirror jobs come from independent tables, and activity accumulates on every sync while the repository list only grows when a repo is added. - Drops items-start from the row so the columns stretch to the row height, in both the skeleton and the loaded state so the layout does not shift on load. - Adds h-full to both cards. Without it the column stretches but the card inside still hugs its content, so removing items-start alone changes nothing on screen. - Aligns the activity row padding with the repository rows (py-3 to py-3.5) so the rows line up when the two lists do have equal counts. Verified in the browser at 8 vs 8 and 8 vs 5 items: both cards measure 657px in each case. Claude-Session: https://claude.ai/code/session_01QRhZnpehnrVtnPRqJYDdVQ
This commit is contained in:
1 parent
f06f6695bb
commit
b3e8c69566
3 files changed
+5
-5
No files matched your search
@@ -269,7 +269,7 @@ export function Dashboard() {
|
||||
<StatusCardSkeleton />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-6 items-start">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
{/* Repository List Skeleton */}
|
||||
<div className="w-full lg:w-1/2 border rounded-lg p-4">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
@@ -327,7 +327,7 @@ export function Dashboard() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-6 items-start">
|
||||
<div className="flex flex-col lg:flex-row gap-6">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<RepositoryList repositories={repositories.slice(0, 8)} />
|
||||
</div>
|
||||
|
||||
@@ -39,7 +39,7 @@ export function RecentActivity({ activities }: RecentActivityProps) {
|
||||
useTimeFormat();
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<Card className="h-full w-full">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-3 text-base font-semibold">
|
||||
<Activity className="h-5 w-5 text-muted-foreground" />
|
||||
@@ -71,7 +71,7 @@ export function RecentActivity({ activities }: RecentActivityProps) {
|
||||
{activities.map((activity, index) => {
|
||||
const { Icon, color } = activityIcon(activity.status);
|
||||
return (
|
||||
<div key={index} className="flex items-center gap-x-3 py-3">
|
||||
<div key={index} className="flex items-center gap-x-3 py-3.5">
|
||||
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-muted">
|
||||
<Icon className={`h-4 w-4 ${color}`} />
|
||||
</div>
|
||||
|
||||
@@ -39,7 +39,7 @@ export function RepositoryList({ repositories }: RepositoryListProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<Card className="h-full w-full">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-3 text-base font-semibold">
|
||||
<GitFork className="h-5 w-5 text-muted-foreground" />
|
||||
|
||||
Reference in new issue
Block a user