Improve mobile responsiveness and book metadata layout

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 2026-02-01: 1.0.4
+
+* Improve mobile responsiveness and book metadata layout
+
 ### 2026-02-01: 1.0.3
 
 * Add mobile responsiveness

README.md

@@ -1,6 +1,6 @@
 # ⚡ Speed reader
 
-![Version](https://img.shields.io/badge/version-1.0.3-blue?style=for-the-badge)
+![Version](https://img.shields.io/badge/version-1.0.4-blue?style=for-the-badge)
 ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black)
 ![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)
 ![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rsvp-speed-reader",
   "private": true,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.jsx

@@ -719,7 +719,6 @@ function App() {
           <kbd style={styles.kbd}>↓</kbd> speed
           <kbd style={styles.kbd}>R</kbd> reset
         </div>
-      </div>
 
         {/* Book metadata display */}
         {bookMetadata && (bookMetadata.title || bookMetadata.cover) && (
@@ -745,6 +744,7 @@ function App() {
             </div>
           </aside>
         )}
+      </div>
 
       {/* Keyboard shortcuts modal */}
       {showShortcuts && (
@@ -1432,14 +1432,11 @@ const styles = {
 
   // Book metadata
   bookMetadata: {
-    position: "fixed",
-    bottom: "20px",
-    left: "20px",
     display: "flex",
     alignItems: "flex-end",
     gap: "12px",
     maxWidth: "280px",
-    zIndex: 50,
+    marginTop: "16px",
   },
   bookCover: {
     width: "48px",

src/index.css

@@ -48,7 +48,25 @@ button:active {
   color: #ccc !important;
 }
 
+/* Desktop: fixed book metadata */
+@media (min-width: 866px) {
+  .book-metadata {
+    position: fixed !important;
+    bottom: 20px !important;
+    left: 20px !important;
+    margin-top: 0 !important;
+    z-index: 50;
+  }
+}
+
 /* Mobile responsiveness */
+@media (max-width: 865px) {
+  /* Controls margin */
+  .bottom-area > div:first-child {
+    margin-bottom: 10px !important;
+  }
+}
+
 @media (max-width: 600px) {
   /* Hide text labels on buttons */
   .icon-btn span,
@@ -58,7 +76,7 @@ button:active {
 
   /* Reduce top bar padding */
   .top-bar {
-    padding: 12px 16px !important;
+    padding: 12px 5px !important;
   }
 
   /* Smaller WPM display */
@@ -99,9 +117,8 @@ button:active {
 
   /* Smaller book metadata */
   .book-metadata {
-    max-width: 200px !important;
+    max-width: 100% !important;
-    bottom: 12px !important;
+    justify-content: center;
-    left: 12px !important;
   }
 
   .book-cover {
@@ -128,6 +145,30 @@ button:active {
   }
 }
 
+@media (max-width: 480px) {
+  /* Book metadata left aligned */
+  .book-metadata {
+    justify-content: flex-start !important;
+    margin-top: 6px !important;
+  }
+
+  /* Reading area vertical centering */
+  .main-area {
+    position: relative;
+    top: 20px;
+  }
+
+  /* WPM selection centered, compact */
+  .wpm-control {
+    gap: 0 !important;
+  }
+
+  .wpm-btn {
+    padding-left: 5px !important;
+    padding-right: 5px !important;
+  }
+}
+
 @media (max-width: 400px) {
   /* Even smaller word display for very small screens */
   .word-display {
@@ -137,9 +178,4 @@ button:active {
   .word-container {
     height: 80px !important;
   }
-
-  /* Hide book metadata on very small screens */
-  .book-metadata {
-    display: none !important;
-  }
 }