fixed some bugs

app/about/page.tsx

@@ -12,9 +12,9 @@ export default function AboutPage() {
   const { theme, setTheme } = useTheme()
   
   return (
-    <div className="container mx-auto px-4 py-8 max-w-4xl">
+    <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-8 max-w-4xl">
       <div className="mb-6">
-        <div className="flex items-center justify-between mb-4">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-4">
           <Link href="/">
             <Button variant="ghost">
               <ArrowLeft className="mr-2 h-4 w-4" />
@@ -32,8 +32,8 @@ export default function AboutPage() {
             <span className="sr-only">Toggle theme</span>
           </Button>
         </div>
-        <h1 className="text-4xl font-bold mb-2">About AI Evaluation Dashboard</h1>
-        <p className="text-xl text-muted-foreground">
+        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2">About AI Evaluation Dashboard</h1>
+        <p className="text-lg sm:text-xl text-muted-foreground">
           A comprehensive platform for documenting and sharing AI system evaluations
         </p>
       </div>

app/evaluation/[id]/page.client.tsx

@@ -294,9 +294,9 @@ export default function EvaluationDetailsPage() {
 
   return (
     <TooltipProvider>
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-8 max-w-4xl">
       <div className="mb-6">
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
           <Button onClick={() => router.push("/")} variant="outline" size="sm">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Dashboard
@@ -305,7 +305,7 @@ export default function EvaluationDetailsPage() {
             <Link href="/about">
               <Button variant="ghost" size="sm">
                 <Info className="h-4 w-4 mr-2" />
-                About
+                <span className="hidden sm:inline">About</span>
               </Button>
             </Link>
             <Button
@@ -320,13 +320,14 @@ export default function EvaluationDetailsPage() {
             </Button>
             <Button variant="outline" size="sm" onClick={exportReport}>
               <Download className="h-4 w-4 mr-2" />
-              Export Report
+              <span className="hidden sm:inline">Export Report</span>
+              <span className="sm:hidden">Export</span>
             </Button>
           </div>
         </div>
 
         <div className="mt-3 text-center">
-          <h1 className="text-3xl font-heading">{evaluation.systemName}</h1>
+          <h1 className="text-2xl sm:text-3xl font-heading">{evaluation.systemName}</h1>
           <p className="text-muted-foreground">{evaluation.provider}</p>
         </div>
       </div>
@@ -730,13 +731,13 @@ export default function EvaluationDetailsPage() {
               className="cursor-pointer hover:bg-muted/50 transition-colors p-3 -m-3 rounded-lg mb-4"
               onClick={toggleCapabilitiesStats}
             >
-              <h3 className="flex items-center justify-between text-lg font-semibold">
+              <h3 className="flex items-center justify-between text-base sm:text-lg font-semibold">
                 <div className="flex items-center gap-2">
                   <Brain className="h-4 w-4 text-blue-600" />
                   Capabilities
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="text-sm font-normal text-muted-foreground">
+                  <span className="text-xs sm:text-sm font-normal text-muted-foreground">
                     {capabilitiesStatsExpanded ? 'Hide details' : 'Show details'}
                   </span>
                   {capabilitiesStatsExpanded ? (
@@ -877,13 +878,13 @@ export default function EvaluationDetailsPage() {
               className="cursor-pointer hover:bg-muted/50 transition-colors p-3 -m-3 rounded-lg mb-4"
               onClick={toggleRisksStats}
             >
-              <h3 className="flex items-center justify-between text-lg font-semibold">
+              <h3 className="flex items-center justify-between text-base sm:text-lg font-semibold">
                 <div className="flex items-center gap-2">
                   <ShieldAlert className="h-4 w-4 text-red-600" />
                   Risks
                 </div>
                 <div className="flex items-center gap-2">
-                  <span className="text-sm font-normal text-muted-foreground">
+                  <span className="text-xs sm:text-sm font-normal text-muted-foreground">
                     {risksStatsExpanded ? 'Hide details' : 'Show details'}
                   </span>
                   {risksStatsExpanded ? (

components/ai-evaluation-dashboard.tsx

@@ -286,8 +286,8 @@ export function AIEvaluationDashboard({ onBack, onSaveEvaluation }: AIEvaluation
     <div className="min-h-screen bg-background flex flex-col">
       {/* Header */}
       <header className="border-b bg-card">
-        <div className="container mx-auto px-6 py-4">
-          <div className="flex items-center justify-between">
+        <div className="container mx-auto px-4 sm:px-6 py-4">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
             <div className="flex items-center gap-4">
               {onBack && (
                 <Button variant="ghost" size="sm" onClick={onBack} className="gap-2">
@@ -296,26 +296,29 @@ export function AIEvaluationDashboard({ onBack, onSaveEvaluation }: AIEvaluation
                 </Button>
               )}
               <div>
-                <h1 className="text-2xl font-bold font-heading text-foreground">New Eval Card</h1>
-                <p className="text-muted-foreground">Create comprehensive AI system evaluation card</p>
+                <h1 className="text-xl sm:text-2xl font-bold font-heading text-foreground">New Eval Card</h1>
+                <p className="text-sm sm:text-base text-muted-foreground">Create comprehensive AI system evaluation card</p>
               </div>
             </div>
-            <div className="flex items-center gap-4">
-              <div className="text-right">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4 w-full sm:w-auto">
+              <div className="text-left sm:text-right">
                 <p className="text-sm text-muted-foreground">Overall Progress</p>
                 <div className="flex items-center gap-2">
                   <Progress value={getOverallProgress()} className="w-24" />
                   <span className="text-sm font-medium">{Math.round(getOverallProgress())}%</span>
                 </div>
               </div>
-              {evaluationData.systemInfo && (
-                <Badge variant="secondary" className="font-medium">
-                  {evaluationData.systemInfo.name}
-                </Badge>
-              )}
-              <Button onClick={handleSaveEvaluation} className="gap-2">
-                Save Eval Card
-              </Button>
+              <div className="flex items-center gap-2 w-full sm:w-auto">
+                {evaluationData.systemInfo && (
+                  <Badge variant="secondary" className="font-medium">
+                    {evaluationData.systemInfo.name}
+                  </Badge>
+                )}
+                <Button onClick={handleSaveEvaluation} className="gap-2 w-full sm:w-auto">
+                  <span className="hidden sm:inline">Save Eval Card</span>
+                  <span className="sm:hidden">Save</span>
+                </Button>
+              </div>
             </div>
           </div>
         </div>
@@ -323,8 +326,8 @@ export function AIEvaluationDashboard({ onBack, onSaveEvaluation }: AIEvaluation
 
       {/* Step tabs navigation */}
       <div className="border-b bg-card">
-        <div className="container mx-auto px-6">
-          <div className="flex items-center space-x-8">
+        <div className="container mx-auto px-4 sm:px-6 py-4">
+          <div className="flex items-center space-x-4 sm:space-x-8 overflow-x-auto">
             {steps.map((step) => {
               const isActive = currentStep === step.id
               const isCompleted =
@@ -336,7 +339,7 @@ export function AIEvaluationDashboard({ onBack, onSaveEvaluation }: AIEvaluation
               return (
                 <div
                   key={step.id}
-                  className={`flex items-center gap-3 py-4 border-b-2 transition-colors ${
+                  className={`flex items-center gap-2 sm:gap-3 py-4 border-b-2 transition-colors whitespace-nowrap ${
                     isActive
                       ? "border-primary text-primary"
                       : isCompleted
@@ -345,7 +348,7 @@ export function AIEvaluationDashboard({ onBack, onSaveEvaluation }: AIEvaluation
                   }`}
                 >
                   <div
-                    className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium ${
+                    className={`flex items-center justify-center w-6 h-6 sm:w-8 sm:h-8 rounded-full text-xs sm:text-sm font-medium ${
                       isActive
                         ? "bg-primary text-primary-foreground"
                         : isCompleted
@@ -355,7 +358,7 @@ export function AIEvaluationDashboard({ onBack, onSaveEvaluation }: AIEvaluation
                   >
                     {step.number}
                   </div>
-                  <span className="font-medium">{step.label}</span>
+                  <span className="font-medium text-sm sm:text-base">{step.label}</span>
                 </div>
               )
             })}
@@ -363,7 +366,9 @@ export function AIEvaluationDashboard({ onBack, onSaveEvaluation }: AIEvaluation
         </div>
       </div>
 
-  <div className="container mx-auto px-6 py-6 flex-1 min-h-0">{renderCurrentStep()}</div>
+      <div className="container mx-auto px-4 sm:px-6 py-4 sm:py-6 flex-1 min-h-0">
+        {renderCurrentStep()}
+      </div>
     </div>
   )
 }

components/category-evaluation.tsx

@@ -303,19 +303,19 @@ export function CategoryEvaluation({ category, score, onScoreUpdate, onSaveDetai
       <div className="space-y-6">
         <Card>
           <CardHeader>
-            <div className="flex items-center justify-between">
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
               <div className="flex-1">
-                <CardTitle className="font-heading flex items-center gap-2">
-                  {category.name}
+                <CardTitle className="font-heading flex flex-col sm:flex-row sm:items-center gap-2">
+                  <span>{category.name}</span>
                   <Badge variant={category.type === "capability" ? "secondary" : "destructive"}>{category.type}</Badge>
                 </CardTitle>
                 <CardDescription className="mt-2">{category.description}</CardDescription>
               </div>
               {isComplete && (
-                <div className="text-right">
+                <div className="text-left sm:text-right">
                   <div className="flex items-center gap-2 mb-1">
                     <CheckCircle className="h-5 w-5 text-green-600" />
-                    <span className="font-medium">Score: {currentScore.totalScore}/{currentScore.totalApplicable || currentScore.totalQuestions}</span>
+                    <span className="font-medium text-sm sm:text-base">Score: {currentScore.totalScore}/{currentScore.totalApplicable || currentScore.totalQuestions}</span>
                   </div>
                   <Badge
                     variant={
@@ -418,14 +418,14 @@ export function CategoryEvaluation({ category, score, onScoreUpdate, onSaveDetai
 
                 {benchmarkAnswers[question.id] === "yes" && (
                   <div className="space-y-4 ml-4 p-4 bg-muted/30 rounded-lg">
-                    <div className="flex items-center justify-between">
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                       <Label className="text-sm font-medium">Sources & Evidence</Label>
                       <Button
                         type="button"
                         variant="outline"
                         size="sm"
                         onClick={() => addSource(question.id, "benchmark")}
-                        className="flex items-center gap-1"
+                        className="flex items-center gap-1 self-start sm:self-auto"
                       >
                         <Plus className="h-3 w-3" />
                         Add Source
@@ -434,13 +434,14 @@ export function CategoryEvaluation({ category, score, onScoreUpdate, onSaveDetai
 
                     {(benchmarkSources[question.id] || []).map((source, index) => (
                       <div key={source.id} className="space-y-3 p-3 border rounded-lg bg-background">
-                        <div className="flex items-center justify-between">
+                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                           <span className="text-sm font-medium">Source {index + 1}</span>
                           <Button
                             type="button"
                             variant="ghost"
                             size="sm"
                             onClick={() => removeSource(question.id, source.id, "benchmark")}
+                            className="self-start sm:self-auto"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>
@@ -566,14 +567,14 @@ export function CategoryEvaluation({ category, score, onScoreUpdate, onSaveDetai
 
                 {processAnswers[question.id] === "yes" && (
                   <div className="space-y-4 ml-4 p-4 bg-muted/30 rounded-lg">
-                    <div className="flex items-center justify-between">
+                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                       <Label className="text-sm font-medium">Documentation & Evidence</Label>
                       <Button
                         type="button"
                         variant="outline"
                         size="sm"
                         onClick={() => addSource(question.id, "process")}
-                        className="flex items-center gap-1"
+                        className="flex items-center gap-1 self-start sm:self-auto"
                       >
                         <Plus className="h-3 w-3" />
                         Add Documentation
@@ -582,13 +583,14 @@ export function CategoryEvaluation({ category, score, onScoreUpdate, onSaveDetai
 
                     {(processSources[question.id] || []).map((source, index) => (
                       <div key={source.id} className="space-y-3 p-3 border rounded-lg bg-background">
-                        <div className="flex items-center justify-between">
+                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                           <span className="text-sm font-medium">Document {index + 1}</span>
                           <Button
                             type="button"
                             variant="ghost"
                             size="sm"
                             onClick={() => removeSource(question.id, source.id, "process")}
+                            className="self-start sm:self-auto"
                           >
                             <Trash2 className="h-3 w-3" />
                           </Button>

components/evaluation-form.tsx

@@ -71,19 +71,19 @@ export function EvaluationForm({
       {/* Progress Header */}
       <Card>
         <CardHeader>
-          <div className="flex items-center justify-between">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
             <div>
-              <CardTitle className="font-heading">Detailed Evaluation</CardTitle>
+              <CardTitle className="text-lg sm:text-xl font-heading">Detailed Evaluation</CardTitle>
               <CardDescription>Complete the evaluation for each selected category</CardDescription>
             </div>
-            <div className="text-right">
+            <div className="text-left sm:text-right w-full sm:w-auto">
               <div className="flex items-center gap-2 mb-2">
                 <span className="text-sm font-medium">Progress:</span>
                 <Badge variant="secondary">
                   {completedCount}/{totalCount}
                 </Badge>
               </div>
-              <Progress value={progress} className="w-32" />
+              <Progress value={progress} className="w-full sm:w-32" />
             </div>
           </div>
         </CardHeader>