From f805174e3f065b30d4a96509d62e21ada5a458ef Mon Sep 17 00:00:00 2001 From: maziggy Date: Wed, 4 Feb 2026 07:44:58 +0100 Subject: [PATCH] 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 | 4 ++++ frontend/src/pages/ArchivesPage.tsx | 4 ++-- frontend/src/pages/StatsPage.tsx | 4 ++-- static/assets/{index-C8HAsISy.js => index-BPeSzFt8.js} | 4 ++-- static/index.html | 2 +- 5 files changed, 11 insertions(+), 7 deletions(-) rename static/assets/{index-C8HAsISy.js => index-BPeSzFt8.js} (92%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 679cd4b08..6ed0ecf2e 100644 --- a/CHANGELOG.md +++ b/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): diff --git a/frontend/src/pages/ArchivesPage.tsx b/frontend/src/pages/ArchivesPage.tsx index c7e57a787..9034cce20 100644 --- a/frontend/src/pages/ArchivesPage.tsx +++ b/frontend/src/pages/ArchivesPage.tsx @@ -2533,7 +2533,7 @@ export function ArchivesPage() { )} -
+

Archives

@@ -2553,7 +2553,7 @@ export function ArchivesPage() { {filteredArchives?.length || 0} of {archives?.length || 0} prints

-
+
{/* Export dropdown */}