From fbb423243a8306f7b998970899e3bde358445be0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E4=BD=A9=E5=BA=AD?= <petty09190@gmail.com>
Date: Sun, 12 Oct 2025 01:55:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=84=AA=E5=8C=96=E6=89=8B=E6=A9=9F=E4=BB=8B?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../results/detail/[testResultId]/page.tsx    | 29 ++++++++++---------
 components/combined-analysis.tsx              | 14 ++++-----
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/admin/results/detail/[testResultId]/page.tsx b/app/admin/results/detail/[testResultId]/page.tsx
index 49b6f77..8c69294 100644
--- a/app/admin/results/detail/[testResultId]/page.tsx
+++ b/app/admin/results/detail/[testResultId]/page.tsx
@@ -344,28 +344,31 @@ function AdminResultDetailContent() {
     <div className="min-h-screen bg-background">
       {/* Header */}
       <header className="border-b bg-card/50 backdrop-blur-sm">
-        <div className="container mx-auto px-4 py-4">
-          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-            <div className="flex items-center gap-3">
-              <Button variant="ghost" size="sm" asChild>
+        <div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4">
+          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
+            {/* 返回按鈕和標題區域 */}
+            <div className="flex items-start gap-3">
+              <Button variant="ghost" size="sm" asChild className="flex-shrink-0">
                 <Link href="/admin/results">
-                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  <ArrowLeft className="w-4 h-4 sm:mr-2" />
                   <span className="hidden sm:inline">返回測試結果</span>
                 </Link>
               </Button>
-              <div className={`w-10 h-10 ${testTypeInfo.color} rounded-lg flex items-center justify-center`}>
-                <IconComponent className="w-6 h-6 text-white" />
+              <div className={`w-8 h-8 sm:w-10 sm:h-10 ${testTypeInfo.color} rounded-lg flex items-center justify-center flex-shrink-0`}>
+                <IconComponent className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
               </div>
-              <div>
-                <h1 className="text-xl font-bold text-foreground">
+              <div className="min-w-0 flex-1">
+                <h1 className="text-base sm:text-lg lg:text-xl font-bold text-foreground leading-tight">
                   {user.name} - {testTypeInfo.name}測試結果
                 </h1>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-xs sm:text-sm text-muted-foreground mt-1">
                   完成時間：{new Date(result.completedAt).toLocaleString("zh-TW")}
                 </p>
               </div>
             </div>
-            <div className="flex justify-end gap-2">
+            
+            {/* 功能按鈕區域 */}
+            <div className="flex justify-end gap-2 sm:gap-3">
               <Button 
                 onClick={() => {
                   if (navigator.share) {
@@ -381,7 +384,7 @@ function AdminResultDetailContent() {
                 }}
                 variant="outline" 
                 size="sm"
-                className="print:hidden"
+                className="print:hidden flex-shrink-0"
               >
                 <Share2 className="w-4 h-4 sm:mr-2" />
                 <span className="hidden sm:inline">分享結果</span>
@@ -390,7 +393,7 @@ function AdminResultDetailContent() {
                 onClick={() => window.print()} 
                 variant="outline" 
                 size="sm"
-                className="print:hidden"
+                className="print:hidden flex-shrink-0"
               >
                 <Printer className="w-4 h-4 sm:mr-2" />
                 <span className="hidden sm:inline">列印結果</span>
diff --git a/components/combined-analysis.tsx b/components/combined-analysis.tsx
index ea16231..746dd91 100644
--- a/components/combined-analysis.tsx
+++ b/components/combined-analysis.tsx
@@ -118,24 +118,24 @@ export function CombinedAnalysis({
       <Card className="text-center">
         <CardHeader>
           <div
-            className={`w-24 h-24 ${getLevelColor(overallScore)} rounded-full flex items-center justify-center mx-auto mb-4`}
+            className={`w-20 h-20 sm:w-24 sm:h-24 ${getLevelColor(overallScore)} rounded-full flex items-center justify-center mx-auto mb-4`}
           >
-            <span className="text-3xl font-bold text-white">{overallScore}</span>
+            <span className="text-2xl sm:text-3xl font-bold text-white">{overallScore}</span>
           </div>
-          <CardTitle className="text-3xl mb-2">
+          <CardTitle className="text-xl sm:text-2xl lg:text-3xl mb-2 px-2">
             綜合測試{isTimeout ? '(時間到)' : ''}完成！
           </CardTitle>
-          <div className="flex items-center justify-center gap-2 mb-4">
-            <Badge variant="secondary" className="text-lg px-4 py-1 bg-gradient-to-r from-blue-500 to-teal-500 text-white">
+          <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3 mb-4 px-2">
+            <Badge variant="secondary" className="text-sm sm:text-base lg:text-lg px-3 sm:px-4 py-1 bg-gradient-to-r from-blue-500 to-teal-500 text-white">
               {level}
             </Badge>
             {isTimeout && (
-              <Badge variant="destructive" className="text-lg px-4 py-1">
+              <Badge variant="destructive" className="text-sm sm:text-base lg:text-lg px-3 sm:px-4 py-1">
                 時間到強制提交
               </Badge>
             )}
           </div>
-          <p className="text-lg text-muted-foreground mb-3">{description}</p>
+          <p className="text-sm sm:text-base lg:text-lg text-muted-foreground mb-3 px-4">{description}</p>
         </CardHeader>
         <CardContent>
           <Progress value={overallScore} className="h-3 mb-4" />