From a40e8ebd9c711ac6daaf865b194f8cdb225f5cb4 Mon Sep 17 00:00:00 2001
From: Tiger Ren <tigeren@live.com>
Date: Sun, 1 Feb 2026 17:35:15 +0800
Subject: [PATCH] fix: adjust the style to align the components

---
 src/components/releases/release-card.tsx   | 34 ++++++++++++----------
 src/components/steps/step-detail-panel.tsx | 23 +++++++++++----
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/components/releases/release-card.tsx b/src/components/releases/release-card.tsx
index bd0e318..747bb71 100644
--- a/src/components/releases/release-card.tsx
+++ b/src/components/releases/release-card.tsx
@@ -89,7 +89,7 @@ export function ReleaseCard({ release, showActions = true }: ReleaseCardProps) {
   }
 
   return (
-    <Card>
+    <Card className="flex flex-col h-full">
       <CardHeader className="pb-3">
         <div className="flex items-start justify-between">
           <div className="flex items-center gap-3">
@@ -170,21 +170,23 @@ export function ReleaseCard({ release, showActions = true }: ReleaseCardProps) {
           )}
         </div>
       </CardHeader>
-      <CardContent>
-        {release.versionNumber && (
-          <div className="text-sm text-slate-600 mb-2">
-            <span className="font-medium">Version:</span> {release.versionNumber}
-          </div>
-        )}
-        {release.releaseDate && (
-          <div className="text-sm text-slate-600 mb-2">
-            <span className="font-medium">Release Date:</span>{' '}
-            {new Date(release.releaseDate).toLocaleDateString()}
-          </div>
-        )}
-        {release.description && (
-          <p className="text-sm text-slate-600 line-clamp-2">{release.description}</p>
-        )}
+      <CardContent className="flex flex-col flex-grow">
+        <div className="flex-grow">
+          {release.versionNumber && (
+            <div className="text-sm text-slate-600 mb-2">
+              <span className="font-medium">Version:</span> {release.versionNumber}
+            </div>
+          )}
+          {release.releaseDate && (
+            <div className="text-sm text-slate-600 mb-2">
+              <span className="font-medium">Release Date:</span>{' '}
+              {new Date(release.releaseDate).toLocaleDateString()}
+            </div>
+          )}
+          {release.description && (
+            <p className="text-sm text-slate-600 line-clamp-2">{release.description}</p>
+          )}
+        </div>
         <div className="mt-4 pt-4 border-t">
           <Link href={`/releases/${release.id}`}>
             <Button variant="outline" size="sm" className="w-full">
diff --git a/src/components/steps/step-detail-panel.tsx b/src/components/steps/step-detail-panel.tsx
index 3decabc..adb7945 100644
--- a/src/components/steps/step-detail-panel.tsx
+++ b/src/components/steps/step-detail-panel.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 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 { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -170,7 +170,7 @@ export function StepDetailPanel({
   return (
     <Sheet open={isOpen} onOpenChange={onClose}>
       <SheetContent className="w-[600px] sm:max-w-[600px]">
-        <SheetHeader>
+        <SheetHeader className="px-6">
           <div className="flex items-start justify-between">
             <div>
               <SheetTitle className="text-xl mb-2">{step.name}</SheetTitle>
@@ -185,8 +185,8 @@ export function StepDetailPanel({
           </div>
         </SheetHeader>
 
-        <ScrollArea className="h-[calc(100vh-180px)] mt-6">
-          <div className="space-y-6 pr-4">
+        <ScrollArea className="h-[calc(100vh-180px)] mt-6 px-6">
+          <div className="space-y-6">
             {/* Status & Type */}
             <div className="flex items-center gap-4">
               <div className="flex items-center gap-2">
@@ -207,7 +207,20 @@ export function StepDetailPanel({
 
             {/* Content */}
             <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 ? (
                 <div className="space-y-3">