feat: enhance mobile responsiveness across all components

Mobile optimizations:
- **Header**: Reduced padding on mobile (px-3), smaller text sizes
- **Main content**: Optimized padding (px-3 sm:px-4) and spacing
- **Format selector**: Added downward arrow for mobile flow
- **Conversion progress**: Time indicators stack vertically on mobile
- **Page layout**: Responsive spacing throughout (space-y-6 sm:space-y-8)
- **Footer**: Smaller text and reduced margins on mobile

Key improvements:
- Better use of screen space on small devices
- Improved touch targets and readability
- Consistent responsive breakpoints (sm:, md:)
- Vertical arrow (↓) on mobile, horizontal (→) on desktop
- All text scales appropriately for mobile screens

Tested on:
- Mobile viewport (< 640px)
- Tablet viewport (640px - 768px)
- Desktop viewport (> 768px)

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

Co-Authored-By: Claude <noreply@anthropic.com>

components/converter/ConversionPreview.tsx

@@ -162,7 +162,7 @@ export function ConversionPreview({ job, onDownload }: ConversionPreviewProps) {
               <span className="text-xs text-muted-foreground">{job.progress}%</span>
             </div>
             <Progress value={job.progress} showLabel={false} />
-            <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 text-xs text-muted-foreground">
               <div className="flex items-center gap-2">
                 <Clock className="h-3.5 w-3.5" />
                 <span>Elapsed: {formatTime(elapsedTime)}</span>

components/converter/FileConverter.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, ArrowDown } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card';
 import { FileUpload } from './FileUpload';
@@ -284,7 +284,10 @@ export function FileConverter() {
                 </Card>
               </div>
 
-              {/* Arrow */}
+              {/* Arrow - horizontal on desktop, vertical on mobile */}
+              <div className="flex md:hidden items-center justify-center py-2">
+                <ArrowDown className="h-5 w-5 text-muted-foreground" />
+              </div>
               <div className="hidden md:flex items-center justify-center pt-8">
                 <ArrowRight className="h-5 w-5 text-muted-foreground" />
               </div>