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,32 +719,32 @@ function App() {
           <kbd style={styles.kbd}>↓</kbd> speed
           <kbd style={styles.kbd}>R</kbd> reset
         </div>
-      </div>
 
-      {/* Book metadata display */}
+        {/* Book metadata display */}
-      {bookMetadata && (bookMetadata.title || bookMetadata.cover) && (
+        {bookMetadata && (bookMetadata.title || bookMetadata.cover) && (
-        <aside style={styles.bookMetadata} aria-label="Current book" className="book-metadata">
+          <aside style={styles.bookMetadata} aria-label="Current book" className="book-metadata">
-          {bookMetadata.cover && (
+            {bookMetadata.cover && (
-            <img
+              <img
-              src={bookMetadata.cover}
+                src={bookMetadata.cover}
-              alt={`Cover of ${bookMetadata.title || "current book"}`}
+                alt={`Cover of ${bookMetadata.title || "current book"}`}
-              style={styles.bookCover}
+                style={styles.bookCover}
-              className="book-cover"
+                className="book-cover"
-            />
+              />
-          )}
-          <div style={styles.bookInfo}>
-            {bookMetadata.title && (
-              <h3 style={styles.bookTitle} className="book-title">{bookMetadata.title}</h3>
             )}
-            {bookMetadata.author && (
+            <div style={styles.bookInfo}>
-              <p style={styles.bookAuthor} className="book-author">{bookMetadata.author}</p>
+              {bookMetadata.title && (
-            )}
+                <h3 style={styles.bookTitle} className="book-title">{bookMetadata.title}</h3>
-            <p style={styles.bookStats} className="book-stats">
+              )}
-              {formatReadingTime((words.length - currentIndex) / wpm)} left
+              {bookMetadata.author && (
-            </p>
+                <p style={styles.bookAuthor} className="book-author">{bookMetadata.author}</p>
-          </div>
+              )}
-        </aside>
+              <p style={styles.bookStats} className="book-stats">
-      )}
+                {formatReadingTime((words.length - currentIndex) / wpm)} left
+              </p>
+            </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;
-  }
 }