Home Explore Help
Sign In
yunoadmin
/
bambuddy
mirror of https://github.com/maziggy/bambuddy
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

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
maziggy 3 months ago
parent
b3c3ab0563
commit
f805174e3f
5 changed files with 9 additions and 5 deletions
Unified View Show Diff Stats
  1. 4 0
      CHANGELOG.md
  2. 2 2
      frontend/src/pages/ArchivesPage.tsx
  3. 2 2
      frontend/src/pages/StatsPage.tsx
  4. 0 0
      static/assets/index-BPeSzFt8.js
  5. 1 1
      static/index.html

+ 4 - 0
CHANGELOG.md
View File 

@@ -18,6 +18,10 @@ All notable changes to Bambuddy will be documented in this file.
 
 - **Queue Scheduled Time Displayed in Wrong Timezone** (Issue #233):
 
 - **Queue Scheduled Time Displayed in Wrong Timezone** (Issue #233):
 
   - Fixed scheduled time being displayed in UTC instead of local timezone when editing queue items
 
   - 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
 
   - 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
 
 ### Added
 
 - **Windows Portable Launcher** (contributed by nmori):
 
 - **Windows Portable Launcher** (contributed by nmori):

+ 2 - 2
frontend/src/pages/ArchivesPage.tsx
View File 

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

+ 2 - 2
frontend/src/pages/StatsPage.tsx
View File 

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

File diff suppressed because it is too large
+ 0 - 0
static/assets/index-BPeSzFt8.js


+ 1 - 1
static/index.html
View File 

@@ -23,7 +23,7 @@
 
 
 
     <!-- Splash screens for iOS -->
 
     <!-- Splash screens for iOS -->
 
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
 
     <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">
 
     <link rel="stylesheet" crossorigin href="/assets/index-fdAEMOwp.css">
 
   </head>
 
   </head>
 
   <body>
 
   <body>

Some files were not shown because too many files changed in this diff