fix: adjust the style to align the components
This commit is contained in:
parent
a7298fe5b8
commit
a40e8ebd9c
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue