Fix mobile layout issues on Archives and Statistics pages

Header action buttons were overflowing outside the screen on iPhone/mobile
devices because the header containers used fixed horizontal layouts.

Changed both pages to use the responsive pattern from PrintersPage:
- Headers stack vertically on mobile (flex-col), horizontal on sm+ (sm:flex-row)
- Button containers use flex-wrap to allow wrapping on narrow screens
- Added gap-4 between title and buttons when stacked

Closes #255

CHANGELOG.md

@@ -18,6 +18,10 @@ All notable changes to Bambuddy will be documented in this file.
 - **Queue Scheduled Time Displayed in Wrong Timezone** (Issue #233):
   - Fixed scheduled time being displayed in UTC instead of local timezone when editing queue items
   - The datetime picker now correctly shows and saves times in the user's local timezone
+- **Mobile Layout Issues on Archives and Statistics Pages** (Issue #255):
+  - Fixed header buttons overflowing outside the screen on iPhone/mobile devices
+  - Headers now stack vertically on small screens with proper wrapping
+  - Applied consistent responsive pattern from PrintersPage
 
 ### Added
 - **Windows Portable Launcher** (contributed by nmori):

frontend/src/pages/ArchivesPage.tsx

@@ -2533,7 +2533,7 @@ export function ArchivesPage() {
         </div>
       )}
 
-      <div className="flex items-center justify-between mb-8">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
         <div>
           <div className="flex items-center gap-3">
             <h1 className="text-2xl font-bold text-white">Archives</h1>
@@ -2553,7 +2553,7 @@ export function ArchivesPage() {
             {filteredArchives?.length || 0} of {archives?.length || 0} prints
           </p>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
           {/* Export dropdown */}
           <div className="relative">
             <Button

frontend/src/pages/StatsPage.tsx

@@ -672,12 +672,12 @@ export function StatsPage() {
 
   return (
     <div className="p-4 md:p-8">
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
         <div>
           <h1 className="text-2xl font-bold text-white">{t('stats.title')}</h1>
           <p className="text-bambu-gray">{t('stats.subtitle')}</p>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 flex-wrap">
           {/* Hidden widgets button - toggles panel in Dashboard */}
           {hiddenCount > 0 && (
             <Button

static/index.html

@@ -23,7 +23,7 @@
 
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-C8HAsISy.js"></script>
+    <script type="module" crossorigin src="/assets/index-BPeSzFt8.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-fdAEMOwp.css">
   </head>
   <body>