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>

app/page.tsx

@@ -11,10 +11,10 @@ export default function Home() {
       <div className="min-h-screen bg-background">
         {/* Header */}
         <header className="border-b border-border">
-          <div className="container mx-auto px-4 py-4 flex items-center justify-between">
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">Convert UI</h1>
-              <p className="text-sm text-muted-foreground">
+          <div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex items-center justify-between gap-2">
+            <div className="min-w-0">
+              <h1 className="text-xl sm:text-2xl font-bold text-foreground">Convert UI</h1>
+              <p className="text-xs sm:text-sm text-muted-foreground">
                 File conversion in your browser
               </p>
             </div>
@@ -23,16 +23,16 @@ export default function Home() {
         </header>
 
         {/* Main content */}
-        <main className="container mx-auto px-4 py-8 md:py-16">
-          <div className="space-y-8">
+        <main className="container mx-auto px-3 sm:px-4 py-6 sm:py-8 md:py-16">
+          <div className="space-y-6 sm:space-y-8">
             <FileConverter />
             <ConversionHistory />
           </div>
         </main>
 
         {/* Footer */}
-        <footer className="border-t border-border mt-16">
-          <div className="container mx-auto px-4 py-6 text-center text-sm text-muted-foreground">
+        <footer className="border-t border-border mt-8 sm:mt-12 md:mt-16">
+          <div className="container mx-auto px-3 sm:px-4 py-6 text-center text-xs sm:text-sm text-muted-foreground">
             <p>
               Powered by{' '}
               <a