From e34456020c8cbae4a0db6d3fea02ce9ae5472b9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 17 Nov 2025 14:12:30 +0100
Subject: [PATCH] feat: align conversion history width with upload container
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added max-w-4xl container constraint to ConversionHistory component to match
the FileConverter component width, creating a more consistent and aligned layout.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/converter/ConversionHistory.tsx | 182 +++++++++++----------
 1 file changed, 93 insertions(+), 89 deletions(-)

diff --git a/components/converter/ConversionHistory.tsx b/components/converter/ConversionHistory.tsx
index f751133..9da2736 100644
--- a/components/converter/ConversionHistory.tsx
+++ b/components/converter/ConversionHistory.tsx
@@ -71,99 +71,103 @@ export function ConversionHistory() {
 
   if (history.length === 0) {
     return (
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <History className="h-5 w-5" />
-            Conversion History
-          </CardTitle>
-          <CardDescription>Your recent conversions will appear here</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="text-center py-12 text-muted-foreground">
-            <History className="h-12 w-12 mx-auto mb-4 opacity-50" />
-            <p>No conversion history yet</p>
-            <p className="text-sm mt-1">Convert some files to see them here</p>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
+      <div className="w-full max-w-4xl mx-auto">
+        <Card>
+          <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <History className="h-5 w-5" />
               Conversion History
             </CardTitle>
-            <CardDescription>
-              Recent conversions ({history.length} item{history.length > 1 ? 's' : ''})
-            </CardDescription>
-          </div>
-          <Button variant="outline" size="sm" onClick={handleClearHistory}>
-            <Trash2 className="h-4 w-4 mr-2" />
-            Clear All
-          </Button>
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-3">
-          {history.map((item) => (
-            <div
-              key={item.id}
-              className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors"
-            >
-              <div className="flex items-start justify-between gap-4">
-                <div className="flex-1 min-w-0">
-                  {/* File conversion info */}
-                  <div className="flex items-center gap-2 mb-2">
-                    <span className="text-sm font-medium text-foreground truncate">
-                      {item.inputFileName}
-                    </span>
-                    <ArrowRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
-                    <span className="text-sm font-medium text-foreground truncate">
-                      {item.outputFileName}
-                    </span>
-                  </div>
-
-                  {/* Format conversion */}
-                  <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
-                    <span className="px-2 py-0.5 bg-muted rounded">
-                      {item.inputFormat}
-                    </span>
-                    <ArrowRight className="h-3 w-3" />
-                    <span className="px-2 py-0.5 bg-muted rounded">
-                      {item.outputFormat}
-                    </span>
-                    <span>•</span>
-                    <span>{formatFileSize(item.fileSize)}</span>
-                  </div>
-
-                  {/* Timestamp */}
-                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                    <Clock className="h-3 w-3" />
-                    <span>{formatTimestamp(item.timestamp)}</span>
-                  </div>
-                </div>
-
-                {/* Remove button */}
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  onClick={() => handleRemoveItem(item.id)}
-                  className="flex-shrink-0"
-                >
-                  <Trash2 className="h-4 w-4" />
-                  <span className="sr-only">Remove</span>
-                </Button>
-              </div>
+            <CardDescription>Your recent conversions will appear here</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="text-center py-12 text-muted-foreground">
+              <History className="h-12 w-12 mx-auto mb-4 opacity-50" />
+              <p>No conversion history yet</p>
+              <p className="text-sm mt-1">Convert some files to see them here</p>
             </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full max-w-4xl mx-auto">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <History className="h-5 w-5" />
+                Conversion History
+              </CardTitle>
+              <CardDescription>
+                Recent conversions ({history.length} item{history.length > 1 ? 's' : ''})
+              </CardDescription>
+            </div>
+            <Button variant="outline" size="sm" onClick={handleClearHistory}>
+              <Trash2 className="h-4 w-4 mr-2" />
+              Clear All
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {history.map((item) => (
+              <div
+                key={item.id}
+                className="border border-border rounded-lg p-4 hover:bg-muted/50 transition-colors"
+              >
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1 min-w-0">
+                    {/* File conversion info */}
+                    <div className="flex items-center gap-2 mb-2">
+                      <span className="text-sm font-medium text-foreground truncate">
+                        {item.inputFileName}
+                      </span>
+                      <ArrowRight className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                      <span className="text-sm font-medium text-foreground truncate">
+                        {item.outputFileName}
+                      </span>
+                    </div>
+
+                    {/* Format conversion */}
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+                      <span className="px-2 py-0.5 bg-muted rounded">
+                        {item.inputFormat}
+                      </span>
+                      <ArrowRight className="h-3 w-3" />
+                      <span className="px-2 py-0.5 bg-muted rounded">
+                        {item.outputFormat}
+                      </span>
+                      <span>•</span>
+                      <span>{formatFileSize(item.fileSize)}</span>
+                    </div>
+
+                    {/* Timestamp */}
+                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                      <Clock className="h-3 w-3" />
+                      <span>{formatTimestamp(item.timestamp)}</span>
+                    </div>
+                  </div>
+
+                  {/* Remove button */}
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleRemoveItem(item.id)}
+                    className="flex-shrink-0"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    <span className="sr-only">Remove</span>
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 }