fix: adjust the style to align the components

This commit is contained in:
Tiger Ren 2026-02-01 17:35:15 +08:00
parent a7298fe5b8
commit a40e8ebd9c
2 changed files with 36 additions and 21 deletions

View File

@ -89,7 +89,7 @@ export function ReleaseCard({ release, showActions = true }: ReleaseCardProps) {
} }
return ( return (
<Card> <Card className="flex flex-col h-full">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -170,21 +170,23 @@ export function ReleaseCard({ release, showActions = true }: ReleaseCardProps) {
)} )}
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="flex flex-col flex-grow">
{release.versionNumber && ( <div className="flex-grow">
<div className="text-sm text-slate-600 mb-2"> {release.versionNumber && (
<span className="font-medium">Version:</span> {release.versionNumber} <div className="text-sm text-slate-600 mb-2">
</div> <span className="font-medium">Version:</span> {release.versionNumber}
)} </div>
{release.releaseDate && ( )}
<div className="text-sm text-slate-600 mb-2"> {release.releaseDate && (
<span className="font-medium">Release Date:</span>{' '} <div className="text-sm text-slate-600 mb-2">
{new Date(release.releaseDate).toLocaleDateString()} <span className="font-medium">Release Date:</span>{' '}
</div> {new Date(release.releaseDate).toLocaleDateString()}
)} </div>
{release.description && ( )}
<p className="text-sm text-slate-600 line-clamp-2">{release.description}</p> {release.description && (
)} <p className="text-sm text-slate-600 line-clamp-2">{release.description}</p>
)}
</div>
<div className="mt-4 pt-4 border-t"> <div className="mt-4 pt-4 border-t">
<Link href={`/releases/${release.id}`}> <Link href={`/releases/${release.id}`}>
<Button variant="outline" size="sm" className="w-full"> <Button variant="outline" size="sm" className="w-full">

View File

@ -1,7 +1,7 @@
'use client'; 'use client';
import { useState } from 'react'; import { useState } from 'react';
import { X, RotateCcw, Pencil, Trash2, FileText, AlertCircle, CheckCircle, Check, SkipForward } from 'lucide-react'; import { X, RotateCcw, Pencil, Trash2, FileText, AlertCircle, CheckCircle, Check, SkipForward, Copy } from 'lucide-react';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'; import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
@ -170,7 +170,7 @@ export function StepDetailPanel({
return ( return (
<Sheet open={isOpen} onOpenChange={onClose}> <Sheet open={isOpen} onOpenChange={onClose}>
<SheetContent className="w-[600px] sm:max-w-[600px]"> <SheetContent className="w-[600px] sm:max-w-[600px]">
<SheetHeader> <SheetHeader className="px-6">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div> <div>
<SheetTitle className="text-xl mb-2">{step.name}</SheetTitle> <SheetTitle className="text-xl mb-2">{step.name}</SheetTitle>
@ -185,8 +185,8 @@ export function StepDetailPanel({
</div> </div>
</SheetHeader> </SheetHeader>
<ScrollArea className="h-[calc(100vh-180px)] mt-6"> <ScrollArea className="h-[calc(100vh-180px)] mt-6 px-6">
<div className="space-y-6 pr-4"> <div className="space-y-6">
{/* Status & Type */} {/* Status & Type */}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -207,7 +207,20 @@ export function StepDetailPanel({
{/* Content */} {/* Content */}
<div> <div>
<label className="text-sm font-medium text-slate-500 mb-2 block">Content</label> <div className="flex items-center justify-between mb-2">
<label className="text-sm font-medium text-slate-500">Content</label>
{!isEditing && (
<Button
variant="ghost"
size="sm"
onClick={() => navigator.clipboard.writeText(step.content)}
className="h-7 px-2 text-slate-500 hover:text-slate-700"
>
<Copy className="w-3.5 h-3.5 mr-1" />
Copy
</Button>
)}
</div>
{isEditing ? ( {isEditing ? (
<div className="space-y-3"> <div className="space-y-3">