fix(reader): keep footer compact on mobile and clear text under chrome

On phones the footer's progress cell rendered the full chapter title (e.g. 'Long Chapter Name · 5 / 12') in a div with no max-width or nowrap, so the text wrapped to multiple lines and ballooned the bottom bar. Combined with viewport offsets that were computed from assumed pixel heights with ~0px margin, the book text slipped underneath the bars. Chapter label in footer: split #progress-display into two spans (progressLabel hidden on mobile via 'hidden sm:inline', progressMain always shown) and cap it with 'truncate whitespace-nowrap max-w-[5rem] sm:max-w-none' so it can never wrap or grow the bar. Phones now show just '5 / 12'; larger screens keep 'Chapter · 5 / 12'. Viewport offset: replace the fragile hardcoded calc() with runtime measurement. Gave the chrome bars ids (reader-topbar/reader-bottombar) and added updateViewportInsets(), which sets #reader-viewport top/bottom from each bar's real offsetHeight (which already includes env(safe-area-inset-*) padding) plus a 6px margin. It runs on init and refreshes on resize, orientationchange, and via a ResizeObserver, so the content area tracks the actual chrome height on any DPI, notch, home-indicator, or zoom level instead of guessing. Refactored formatProgress into formatProgressParts (returns {label, main}; only chapter mode sets a label) with a setProgress() helper wiring progressLabel/progressMain/progressText across the relocate, cycleProgressMode, and applyProgressMode call sites. Rebuilt reader_templ.go and style.css.
chore(deps): promote golang.org/x/net to direct dependency
2026-08-05 21:48:28 -04:00 · 2026-08-05 15:31:48 -04:00 · 2026-08-05 15:31:40 -04:00 · 2026-07-31 10:45:53 -04:00 · 2026-07-31 10:45:41 -04:00
10 changed files with 232 additions and 142 deletions
@@ -90,7 +90,7 @@ func TestCalibreLibraryScan(t *testing.T) {
 	// Create scanner and configure it
 	scanner := services.NewMediaScanner(setup.DB)
 	scanner.SetAdminID(adminID)
-	err = scanner.SetFolders([]string{tmpDir})
+	err = scanner.SetFolders([]string{tmpDir}, false)
 	require.NoError(t, err, "Failed to set scanner folders")

 	// Scan library
@@ -167,7 +167,7 @@ func TestCalibreLibraryScanWithoutSidecar(t *testing.T) {
 	// Create scanner and configure it
 	scanner := services.NewMediaScanner(setup.DB)
 	scanner.SetAdminID(adminID)
-	err = scanner.SetFolders([]string{tmpDir})
+	err = scanner.SetFolders([]string{tmpDir}, false)
 	require.NoError(t, err, "Failed to set scanner folders")

 	// Scan library
@@ -31,6 +31,7 @@ services:
  app:
    image: git.linuxhg.com/bookhoard/bookhoard:${IMAGE_TAG:-latest}
    container_name: bookhoard
+    restart: unless-stopped
    environment:
      # Database Configuration
      DATABASE_HOST: db
@@ -29,6 +29,7 @@ require (
 	github.com/yuin/goldmark v1.8.2
 	github.com/yuin/goldmark-highlighting v0.0.0-20220208100518-594be1970594
 	golang.org/x/crypto v0.50.0
+	golang.org/x/net v0.53.0
 	golang.org/x/text v0.36.0
 )

@@ -57,7 +58,6 @@ require (
 	github.com/rogpeppe/go-internal v1.14.1 // indirect
 	github.com/xyproto/randomstring v1.2.0 // indirect
 	golang.org/x/image v0.39.0 // indirect
-	golang.org/x/net v0.53.0 // indirect
 	golang.org/x/sync v0.20.0 // indirect
 	golang.org/x/sys v0.43.0 // indirect
 	golang.org/x/time v0.15.0 // indirect
@@ -128,8 +128,8 @@ func (h *Handler) StartScanner(c *echo.Context) error {
 		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid user id"})
 	}

-	// Set the folder paths
-	if err := h.scanner.SetFolders(req.FolderPaths); err != nil {
+	// Set the folder paths (watch=true: this long-lived scanner reads events)
+	if err := h.scanner.SetFolders(req.FolderPaths, true); err != nil {
 		return c.JSON(http.StatusBadRequest, map[string]string{"error": "invalid folder paths: " + err.Error()})
 	}

@@ -202,7 +202,7 @@ func (h *Handler) StartWatchModeForLibrary(ctx context.Context, libraryID pgtype
 	}

 	scanner := services.NewMediaScanner(h.db)
-	if err := scanner.SetFolders(folderPaths); err != nil {
+	if err := scanner.SetFolders(folderPaths, true); err != nil {
 		return fmt.Errorf("failed to set scanner folders: %v", err)
 	}

@@ -146,16 +146,18 @@ type CalibreOPFMetadata struct {
 	Timestamp    *time.Time
 }

-// NewMediaScanner creates a new media scanner instance
+// NewMediaScanner creates a new media scanner instance.
+//
+// The fsnotify watcher is NOT created here. It is created lazily inside
+// SetFolders only when watch=true (the long-lived watch-mode scanner).
+// Ephemeral one-off scan jobs pass watch=false, so they never allocate a
+// watcher (and thus can never panic on EMFILE/ENOSPC). This fixes the
+// fd/inotify-watch leak where every scan job created a watcher that was
+// never closed.
 func NewMediaScanner(db *database.Queries) *MediaScanner {
-	watcher, err := fsnotify.NewWatcher()
-	if err != nil {
-		panic(fmt.Sprintf("Failed to create file watcher: %v", err))
-	}
-
 	return &MediaScanner{
 		db:             db,
-		watcher:        watcher,
+		watcher:        nil,
 		settingsCache:  NewSettingsCache(30 * time.Second),
 		dirtyDirs:      make(map[string]time.Time),
 		fileStability:  make(map[string]*atomic.Bool),
@@ -238,24 +240,34 @@ func (s *MediaScanner) GetStats() (int, int, int) {
 	return s.totalFiles, s.newItems, s.errors
 }

-func (s *MediaScanner) SetFolders(folders []string) error {
+// SetFolders configures the scanner's folders and (optionally) sets up an
+// fsnotify watcher over the full directory tree.
+//
+// watch should be true only for the single long-lived watch-mode scanner that
+// actually consumes watcher.Events. Ephemeral scan jobs must pass false so no
+// watcher (and thus no fd/inotify watches) is allocated — the watcher is never
+// read by scan jobs and previously leaked one watcher per job.
+func (s *MediaScanner) SetFolders(folders []string, watch bool) error {
 	s.folders = folders

-	// Remove old watch if exists
+	// Always close any previously-owned watcher so reconfiguration doesn't leak.
 	if s.watcher != nil {
-		if s.watcher != nil {
-			if err := s.watcher.Close(); err != nil {
-				fmt.Printf("Warning: failed to close old watcher during folder reconfiguration: %v\n", err)
-			}
+		if err := s.watcher.Close(); err != nil {
+			fmt.Printf("Warning: failed to close old watcher during folder reconfiguration: %v\n", err)
 		}
+		s.watcher = nil
 	}

-	// Create new watcher
-	watcher, err := fsnotify.NewWatcher()
-	if err != nil {
-		return fmt.Errorf("failed to create watcher: %v", err)
+	// Create + populate a fresh watcher only when the caller intends to read events.
+	if watch {
+		watcher, err := fsnotify.NewWatcher()
+		if err != nil {
+			// Return an error instead of panicking so a failed watcher can't
+			// take down the whole process.
+			return fmt.Errorf("failed to create watcher: %w", err)
+		}
+		s.watcher = watcher
 	}
-	s.watcher = watcher

 	// Build cache of allowed extensions per folder
 	// Uses Go AllowedExtensions map as source of truth (not DB)
@@ -286,31 +298,36 @@ func (s *MediaScanner) SetFolders(folders []string) error {
 		}
 	}

-	// Add all folders and their subdirectories to the watcher (like Audiobookshelf)
-	watchCount := 0
-	for _, folder := range folders {
-		if err := s.watcher.Add(folder); err != nil {
-			fmt.Printf("[WATCHER] Warning: failed to watch root folder %s: %v\n", folder, err)
-		} else {
-			watchCount++
-		}
-		filepath.WalkDir(folder, func(path string, d fs.DirEntry, err error) error {
-			if err != nil {
-				return err
-			}
-			if !d.IsDir() || path == folder {
-				return nil
-			}
-			if err := s.watcher.Add(path); err != nil {
-				fmt.Printf("[WATCHER] Warning: failed to watch subdirectory %s: %v\n", path, err)
+	// Add all folders and their subdirectories to the watcher (like Audiobookshelf).
+	// Only when watching; scan jobs (watch=false) skip this entirely.
+	if s.watcher != nil {
+		watchCount := 0
+		for _, folder := range folders {
+			if err := s.watcher.Add(folder); err != nil {
+				fmt.Printf("[WATCHER] Warning: failed to watch root folder %s: %v\n", folder, err)
 			} else {
 				watchCount++
 			}
-			return nil
-		})
-	}
+			filepath.WalkDir(folder, func(path string, d fs.DirEntry, err error) error {
+				if err != nil {
+					return err
+				}
+				if !d.IsDir() || path == folder {
+					return nil
+				}
+				if err := s.watcher.Add(path); err != nil {
+					fmt.Printf("[WATCHER] Warning: failed to watch subdirectory %s: %v\n", path, err)
+				} else {
+					watchCount++
+				}
+				return nil
+			})
+		}

-	fmt.Printf("[WATCHER] Now watching %d directories across %d root folders\n", watchCount, len(folders))
+		fmt.Printf("[WATCHER] Now watching %d directories across %d root folders\n", watchCount, len(folders))
+	} else {
+		fmt.Printf("[SCANNER] Configured %d root folders (watch mode disabled, no inotify watcher)\n", len(folders))
+	}

 	return nil
 }
@@ -417,8 +434,10 @@ func (s *MediaScanner) ScanFolders(ctx context.Context) error {
 			}

 			if d.IsDir() {
-				if err := s.watcher.Add(path); err != nil {
-					fmt.Printf("Warning: failed to watch subdirectory %s: %v\n", path, err)
+				if s.watcher != nil {
+					if err := s.watcher.Add(path); err != nil {
+						fmt.Printf("Warning: failed to watch subdirectory %s: %v\n", path, err)
+					}
 				}
 				return nil
 			}
@@ -2601,6 +2620,13 @@ func (s *MediaScanner) WatchChanges(ctx context.Context) error {
 	go s.startBackupScan(ctx)

 	go func() {
+		// The event loop only runs if a real watcher was set up (watch=true).
+		// If watching with no watcher (e.g. inotify unavailable through a Docker
+		// bind mount), polling via startBackupScan above still handles detection.
+		if s.watcher == nil {
+			fmt.Printf("[WATCHER] No inotify watcher configured; relying on periodic polling for change detection\n")
+			return
+		}
 		fmt.Printf("[WATCHER] Event loop started for %d folders\n", len(s.folders))
 		for {
 			select {
@@ -205,7 +205,23 @@ func (w *Worker) worker() {
 				return
 			}

-			w.processJob(job)
+			// Recover from any panic inside a job so a single failing job can
+			// never crash the whole worker goroutine (and thus the process).
+			func() {
+				defer func() {
+					if r := recover(); r != nil {
+						fmt.Printf("[WORKER] panic in job %s (%s): %v\n", job.ID, job.Type, r)
+						w.mu.Lock()
+						w.results[job.ID] = &JobResult{
+							JobID:  job.ID,
+							Status: JobStatusFailed,
+							Error:  fmt.Sprintf("panic: %v", r),
+						}
+						w.mu.Unlock()
+					}
+				}()
+				w.processJob(job)
+			}()

 		case <-w.ctx.Done():
 			return
@@ -348,6 +364,7 @@ func (w *Worker) processScanJob(job *Job) (interface{}, error) {
 	}

 	scanner := NewMediaScanner(db)
+	defer scanner.Close()
 	scanner.job = job

 	job.ProgressCallback = func(progress float64, filesScanned, newItems, errors int) {
@@ -377,7 +394,7 @@ func (w *Worker) processScanJob(job *Job) (interface{}, error) {
 		}
 	}

-	if err := scanner.SetFolders(folders); err != nil {
+	if err := scanner.SetFolders(folders, false); err != nil {
 		return nil, err
 	}

@@ -521,7 +538,8 @@ func (w *Worker) processSetFoldersJob(job *Job) (interface{}, error) {

 	// Create scanner and configure folders
 	scanner := NewMediaScanner(db)
-	if err := scanner.SetFolders(folders); err != nil {
+	defer scanner.Close()
+	if err := scanner.SetFolders(folders, false); err != nil {
 		return nil, fmt.Errorf("failed to set folders: %w", err)
 	}

@@ -900,6 +918,7 @@ func (w *Worker) processDirectoryScanJob(job *Job) (interface{}, error) {

 	// Create temporary scanner instance for this job
 	scanner := NewMediaScanner(db)
+	defer scanner.Close()
 	scanner.job = job
 	// Find which library owns this directory (prefix match for subdirectories)
 	ctx := context.Background()
@@ -918,7 +937,7 @@ func (w *Worker) processDirectoryScanJob(job *Job) (interface{}, error) {
 		folderPaths = append(folderPaths, f.FolderPath)
 	}
 	// Configure scanner with folders
-	if err := scanner.SetFolders(folderPaths); err != nil {
+	if err := scanner.SetFolders(folderPaths, false); err != nil {
 		return nil, fmt.Errorf("failed to set folders: %w", err)
 	}
 	// Now scan the directory
@@ -36,7 +36,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
 	<html lang="en">
 		<head>
 			<meta charset="UTF-8"/>
-			<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+			<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
 			<title>{ metadata.Title } - Bookhoard Reader</title>
 			<link rel="manifest" href="/static/manifest.json"/>
 			<link href="/static/reader-fonts.css" rel="stylesheet"/>
@@ -71,7 +71,7 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
 					</div>
 				</div>
 			</div>
-			<div id="reader-viewport" class="absolute inset-x-0 top-[52px] bottom-[52px]">
+			<div id="reader-viewport" class="absolute inset-x-0" style="top: 56px; bottom: 56px;">
 				<foliate-view id="reader-view" class="block w-full h-full"></foliate-view>
 			</div>
 			@DictionaryPopup()
@@ -82,25 +82,25 @@ templ Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookm
 templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress) {
 	<div id="reader-chrome" class="transition-opacity duration-300">
 		<!-- Top bar -->
-		<div class="fixed top-0 left-0 right-0 bg-opacity-95 backdrop-blur border-b z-40" style="background-color: var(--bg-primary);">
-			<div class="flex items-center justify-between px-4 py-3">
-				<a href={ "/media/" + metadata.MediaItemID } class="text-lg hover:underline">
+		<div id="reader-topbar" class="fixed top-0 left-0 right-0 bg-opacity-95 backdrop-blur border-b z-40 pt-[env(safe-area-inset-top)]" style="background-color: var(--bg-primary);">
+			<div class="flex items-center justify-between px-3 py-2 sm:px-4 sm:py-3">
+				<a href={ "/media/" + metadata.MediaItemID } class="text-base sm:text-lg hover:underline">
 					← Back
 				</a>
-				<h1 class="text-lg font-semibold">{ metadata.Title }</h1>
+				<h1 class="text-base sm:text-lg font-semibold hidden sm:block sm:truncate">{ metadata.Title }</h1>
 				<button
 					@click="toggleSettings()"
-					class="p-2 rounded-lg hover:bg-gray-700"
+					class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700"
 					title="Settings"
 				>
 					⚙️
 				</button>
 			</div>
 		</div> <!-- Bottom bar -->
-		<div class="fixed bottom-0 left-0 right-0 bg-opacity-95 backdrop-blur border-t z-40" style="background-color: var(--bg-primary);">
-			<div class="flex items-center px-2 py-2 gap-1">
+		<div id="reader-bottombar" class="fixed bottom-0 left-0 right-0 bg-opacity-95 backdrop-blur border-t z-40 pb-[env(safe-area-inset-bottom)]" style="background-color: var(--bg-primary);">
+			<div class="flex items-center px-1.5 py-1.5 gap-0.5 sm:px-2 sm:py-2 sm:gap-1">
 				<!-- Left navigation -->
-				<button @click="goLeft()" class="p-2 rounded-lg hover:bg-gray-700" title="Go Left" aria-label="Go left">
+				<button @click="goLeft()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Go Left" aria-label="Go left">
 					<svg class="reader-icon" width="24" height="24" aria-hidden="true">
 						<path d="M 15 6 L 9 12 L 15 18"></path>
 					</svg>
@@ -118,7 +118,7 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 				/>
 				<datalist id="tick-marks"></datalist>
 				<!-- Right navigation -->
-				<button @click="goRight()" class="p-2 rounded-lg hover:bg-gray-700" title="Go Right" aria-label="Go right">
+				<button @click="goRight()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Go Right" aria-label="Go right">
 					<svg class="reader-icon" width="24" height="24" aria-hidden="true">
 						<path d="M 9 6 L 15 12 L 9 18"></path>
 					</svg>
@@ -129,7 +129,7 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 				<template x-if="isFixedLayout">
 					<div class="flex items-center gap-1">
 						<!-- Zoom out -->
-						<button @click="zoomOut()" class="p-2 rounded-lg hover:bg-gray-700" title="Zoom Out" aria-label="Zoom out">
+						<button @click="zoomOut()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Zoom Out" aria-label="Zoom out">
 							<svg class="reader-icon" width="20" height="20" aria-hidden="true">
 								<path d="M 5 10 L 15 10"></path>
 							</svg>
@@ -139,20 +139,20 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 							<span x-text="zoomPercent + '%'">100%</span>
 						</button>
 						<!-- Zoom in -->
-						<button @click="zoomIn()" class="p-2 rounded-lg hover:bg-gray-700" title="Zoom In" aria-label="Zoom in">
+						<button @click="zoomIn()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Zoom In" aria-label="Zoom in">
 							<svg class="reader-icon" width="20" height="20" aria-hidden="true">
 								<path d="M 10 5 L 10 15 M 5 10 L 15 10"></path>
 							</svg>
 						</button>
 						<!-- Magnifier -->
-						<button @click="toggleMagnifier()" class="p-2 rounded-lg hover:bg-gray-700" title="Magnifier" aria-label="Toggle magnifier">
+						<button @click="toggleMagnifier()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Magnifier" aria-label="Toggle magnifier">
 							<svg class="reader-icon" width="20" height="20" aria-hidden="true">
 								<circle cx="9" cy="9" r="5"></circle>
 								<path d="M 13 13 L 18 18"></path>
 							</svg>
 						</button>
 						<!-- Pan/Select mode (PDF only) -->
-						<button x-show="isPDF" @click="toggleInteractionMode()" class="p-2 rounded-lg hover:bg-gray-700" title="Pan/Select Mode" aria-label="Toggle pan/select mode">
+						<button x-show="isPDF" @click="toggleInteractionMode()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Pan/Select Mode" aria-label="Toggle pan/select mode">
 							<svg class="reader-icon" width="20" height="20" aria-hidden="true">
 								<path d="M 5 3 v 12 M 5 15 l -2 2 M 5 15 l 2 2 M 5 3 l 3 3"></path>
 							</svg>
@@ -162,24 +162,26 @@ templ ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 				<!-- Separator -->
 				<div class="w-px h-6 bg-gray-600 mx-1"></div>
 				<!-- Progress display -->
-				<div id="progress-display" x-text="progressText" @click="cycleProgressMode()" :title="progressTooltip()" class="text-sm min-w-[4rem] text-center cursor-pointer">
-					if progress.FormatGroup == "reflowable" {
-						if metadata.EstimatedPages > 0 {
-							{ fmt.Sprintf("%.0f%% · Page %d/%d", progress.Percentage, progress.CurrentPage, metadata.EstimatedPages) }
+				<div id="progress-display" @click="cycleProgressMode()" :title="progressTooltip()" class="text-sm min-w-[4rem] max-w-[5rem] sm:max-w-none text-center cursor-pointer truncate whitespace-nowrap overflow-hidden">
+					<span class="hidden sm:inline" x-text="progressLabel"></span><span x-text="progressMain">
+						if progress.FormatGroup == "reflowable" {
+							if metadata.EstimatedPages > 0 {
+								{ fmt.Sprintf("%.0f%% · Page %d/%d", progress.Percentage, progress.CurrentPage, metadata.EstimatedPages) }
+							} else {
+								{ fmt.Sprintf("%.0f%%", progress.Percentage) }
+							}
 						} else {
-							{ fmt.Sprintf("%.0f%%", progress.Percentage) }
+							{ fmt.Sprintf("%d/%d", progress.CurrentPage, progress.TotalPages) }
 						}
-					} else {
-						{ fmt.Sprintf("%d/%d", progress.CurrentPage, progress.TotalPages) }
-					}
+					</span>
 				</div>
 				<!-- Separator -->
 				<div class="w-px h-6 bg-gray-600 mx-1"></div>
 				<!-- Action buttons -->
 				<div class="flex items-center gap-1">
-					<button @click="toggleTOC()" class="p-2 rounded-lg hover:bg-gray-700" title="Table of Contents">📖</button>
-					<button @click="addBookmark()" class="p-2 rounded-lg hover:bg-gray-700" title="Bookmark">🏷️</button>
-					<button @click="toggleBookmarks()" class="p-2 rounded-lg hover:bg-gray-700" title="Notes">📝</button>
+					<button @click="toggleTOC()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Table of Contents">📖</button>
+					<button @click="addBookmark()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Bookmark">🏷️</button>
+					<button @click="toggleBookmarks()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Notes">📝</button>
 				</div>
 			</div>
 		</div>
@@ -60,7 +60,7 @@ func Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookma
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\"><title>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -126,7 +126,7 @@ func Reader(user User, metadata ReaderMetadata, progress ReadingProgress, bookma
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div></div><div id=\"reader-viewport\" class=\"absolute inset-x-0 top-[52px] bottom-[52px]\"><foliate-view id=\"reader-view\" class=\"block w-full h-full\"></foliate-view></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</div></div></div><div id=\"reader-viewport\" class=\"absolute inset-x-0\" style=\"top: 56px; bottom: 56px;\"><foliate-view id=\"reader-view\" class=\"block w-full h-full\"></foliate-view></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -163,7 +163,7 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 			templ_7745c5c3_Var4 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div id=\"reader-chrome\" class=\"transition-opacity duration-300\"><!-- Top bar --><div class=\"fixed top-0 left-0 right-0 bg-opacity-95 backdrop-blur border-b z-40\" style=\"background-color: var(--bg-primary);\"><div class=\"flex items-center justify-between px-4 py-3\"><a href=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<div id=\"reader-chrome\" class=\"transition-opacity duration-300\"><!-- Top bar --><div id=\"reader-topbar\" class=\"fixed top-0 left-0 right-0 bg-opacity-95 backdrop-blur border-b z-40 pt-[env(safe-area-inset-top)]\" style=\"background-color: var(--bg-primary);\"><div class=\"flex items-center justify-between px-3 py-2 sm:px-4 sm:py-3\"><a href=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -176,20 +176,20 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\" class=\"text-lg hover:underline\">← Back</a><h1 class=\"text-lg font-semibold\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "\" class=\"text-base sm:text-lg hover:underline\">← Back</a><h1 class=\"text-base sm:text-lg font-semibold hidden sm:block sm:truncate\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(metadata.Title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 90, Col: 54}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 90, Col: 95}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</h1><button @click=\"toggleSettings()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Settings\">⚙️</button></div></div><!-- Bottom bar --><div class=\"fixed bottom-0 left-0 right-0 bg-opacity-95 backdrop-blur border-t z-40\" style=\"background-color: var(--bg-primary);\"><div class=\"flex items-center px-2 py-2 gap-1\"><!-- Left navigation --><button @click=\"goLeft()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Go Left\" aria-label=\"Go left\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 15 6 L 9 12 L 15 18\"></path></svg></button><!-- Progress slider --><input id=\"progress-slider\" type=\"range\" min=\"0\" max=\"1\" step=\"any\" list=\"tick-marks\" @input=\"goToFraction($event.target.value)\" class=\"grow\"> <datalist id=\"tick-marks\"></datalist><!-- Right navigation --><button @click=\"goRight()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Go Right\" aria-label=\"Go right\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 9 6 L 15 12 L 9 18\"></path></svg></button><!-- Separator --><div class=\"w-px h-6 bg-gray-600 mx-1\"></div><!-- Zoom controls (fixed-layout only) --><template x-if=\"isFixedLayout\"><div class=\"flex items-center gap-1\"><!-- Zoom out --><button @click=\"zoomOut()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Zoom Out\" aria-label=\"Zoom out\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 5 10 L 15 10\"></path></svg></button><!-- Zoom percentage --><button @click=\"resetZoom()\" class=\"text-xs px-1 rounded-lg hover:bg-gray-700 min-w-[3rem]\" title=\"Reset Zoom\" aria-label=\"Reset zoom\"><span x-text=\"zoomPercent + '%'\">100%</span></button><!-- Zoom in --><button @click=\"zoomIn()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Zoom In\" aria-label=\"Zoom in\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 10 5 L 10 15 M 5 10 L 15 10\"></path></svg></button><!-- Magnifier --><button @click=\"toggleMagnifier()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Magnifier\" aria-label=\"Toggle magnifier\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"5\"></circle> <path d=\"M 13 13 L 18 18\"></path></svg></button><!-- Pan/Select mode (PDF only) --><button x-show=\"isPDF\" @click=\"toggleInteractionMode()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Pan/Select Mode\" aria-label=\"Toggle pan/select mode\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 5 3 v 12 M 5 15 l -2 2 M 5 15 l 2 2 M 5 3 l 3 3\"></path></svg></button></div></template><!-- Separator --><div class=\"w-px h-6 bg-gray-600 mx-1\"></div><!-- Progress display --><div id=\"progress-display\" x-text=\"progressText\" @click=\"cycleProgressMode()\" :title=\"progressTooltip()\" class=\"text-sm min-w-[4rem] text-center cursor-pointer\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</h1><button @click=\"toggleSettings()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Settings\">⚙️</button></div></div><!-- Bottom bar --><div id=\"reader-bottombar\" class=\"fixed bottom-0 left-0 right-0 bg-opacity-95 backdrop-blur border-t z-40 pb-[env(safe-area-inset-bottom)]\" style=\"background-color: var(--bg-primary);\"><div class=\"flex items-center px-1.5 py-1.5 gap-0.5 sm:px-2 sm:py-2 sm:gap-1\"><!-- Left navigation --><button @click=\"goLeft()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Go Left\" aria-label=\"Go left\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 15 6 L 9 12 L 15 18\"></path></svg></button><!-- Progress slider --><input id=\"progress-slider\" type=\"range\" min=\"0\" max=\"1\" step=\"any\" list=\"tick-marks\" @input=\"goToFraction($event.target.value)\" class=\"grow\"> <datalist id=\"tick-marks\"></datalist><!-- Right navigation --><button @click=\"goRight()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Go Right\" aria-label=\"Go right\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 9 6 L 15 12 L 9 18\"></path></svg></button><!-- Separator --><div class=\"w-px h-6 bg-gray-600 mx-1\"></div><!-- Zoom controls (fixed-layout only) --><template x-if=\"isFixedLayout\"><div class=\"flex items-center gap-1\"><!-- Zoom out --><button @click=\"zoomOut()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Zoom Out\" aria-label=\"Zoom out\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 5 10 L 15 10\"></path></svg></button><!-- Zoom percentage --><button @click=\"resetZoom()\" class=\"text-xs px-1 rounded-lg hover:bg-gray-700 min-w-[3rem]\" title=\"Reset Zoom\" aria-label=\"Reset zoom\"><span x-text=\"zoomPercent + '%'\">100%</span></button><!-- Zoom in --><button @click=\"zoomIn()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Zoom In\" aria-label=\"Zoom in\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 10 5 L 10 15 M 5 10 L 15 10\"></path></svg></button><!-- Magnifier --><button @click=\"toggleMagnifier()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Magnifier\" aria-label=\"Toggle magnifier\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"5\"></circle> <path d=\"M 13 13 L 18 18\"></path></svg></button><!-- Pan/Select mode (PDF only) --><button x-show=\"isPDF\" @click=\"toggleInteractionMode()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Pan/Select Mode\" aria-label=\"Toggle pan/select mode\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 5 3 v 12 M 5 15 l -2 2 M 5 15 l 2 2 M 5 3 l 3 3\"></path></svg></button></div></template><!-- Separator --><div class=\"w-px h-6 bg-gray-600 mx-1\"></div><!-- Progress display --><div id=\"progress-display\" @click=\"cycleProgressMode()\" :title=\"progressTooltip()\" class=\"text-sm min-w-[4rem] max-w-[5rem] sm:max-w-none text-center cursor-pointer truncate whitespace-nowrap overflow-hidden\"><span class=\"hidden sm:inline\" x-text=\"progressLabel\"></span><span x-text=\"progressMain\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -198,7 +198,7 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 				var templ_7745c5c3_Var7 string
 				templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.0f%% · Page %d/%d", progress.Percentage, progress.CurrentPage, metadata.EstimatedPages))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 168, Col: 112}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 169, Col: 113}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 				if templ_7745c5c3_Err != nil {
@@ -208,7 +208,7 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%.0f%%", progress.Percentage))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 170, Col: 51}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 171, Col: 52}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
@@ -219,14 +219,14 @@ func ReaderChrome(user User, metadata ReaderMetadata, progress ReadingProgress)
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%d/%d", progress.CurrentPage, progress.TotalPages))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 173, Col: 71}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 174, Col: 72}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</div><!-- Separator --><div class=\"w-px h-6 bg-gray-600 mx-1\"></div><!-- Action buttons --><div class=\"flex items-center gap-1\"><button @click=\"toggleTOC()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Table of Contents\">📖</button> <button @click=\"addBookmark()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Bookmark\">🏷️</button> <button @click=\"toggleBookmarks()\" class=\"p-2 rounded-lg hover:bg-gray-700\" title=\"Notes\">📝</button></div></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</span></div><!-- Separator --><div class=\"w-px h-6 bg-gray-600 mx-1\"></div><!-- Action buttons --><div class=\"flex items-center gap-1\"><button @click=\"toggleTOC()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Table of Contents\">📖</button> <button @click=\"addBookmark()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Bookmark\">🏷️</button> <button @click=\"toggleBookmarks()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Notes\">📝</button></div></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -359,7 +359,7 @@ func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component {
 				var templ_7745c5c3_Var14 string
 				templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.ResolveAttributeValue(bookmark.CfiPosition)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 390, Col: 38}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 392, Col: 38}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var14)
 				if templ_7745c5c3_Err != nil {
@@ -372,7 +372,7 @@ func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component {
 				var templ_7745c5c3_Var15 string
 				templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 393, Col: 49}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 395, Col: 49}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
 				if templ_7745c5c3_Err != nil {
@@ -385,7 +385,7 @@ func ReaderBookmarksPanel(bookmarks []Bookmark) templ.Component {
 				var templ_7745c5c3_Var16 string
 				templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(bookmark.Position)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 395, Col: 27}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/reader.templ`, Line: 397, Col: 27}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 				if templ_7745c5c3_Err != nil {
@@ -372,6 +372,8 @@ document.addEventListener("alpine:init", () => {
    interactionMode: "select" as string,
    magnifierEnabled: false,
    progressText: "",
+    progressLabel: "",
+    progressMain: "",
    sliderValue: 0,
    settings: null as ReaderSettings | null,
    justify: true,
@@ -489,21 +491,20 @@ document.addEventListener("alpine:init", () => {
          tocItem,
          section,
        };
-        const progressStr = this.formatProgress(
+        const progressParts = this.formatProgressParts(
          fraction,
          location,
          pageItem,
          tocItem,
          section,
        );
-        this.progressText = progressStr;
+        this.setProgress(progressParts);
        this.sliderValue = fraction;
        const slider = document.getElementById(
          "progress-slider",
        ) as HTMLInputElement;
        if (slider) {
          slider.value = fraction;
-          slider.title = progressStr;
        }
        const range = e.detail.range as Range | undefined;
        if (range) {
@@ -547,6 +548,34 @@ document.addEventListener("alpine:init", () => {
      }
      this.initTime = Date.now();
      this.fetchReadingSpeed();
+      this.setupViewportInsets();
+    },
+    updateViewportInsets() {
+      const top = document.getElementById("reader-topbar");
+      const bot = document.getElementById("reader-bottombar");
+      const vp = document.getElementById("reader-viewport");
+      if (!top || !bot || !vp) return;
+      const margin = 6;
+      vp.style.setProperty("top", `${top.offsetHeight + margin}px`);
+      vp.style.setProperty("bottom", `${bot.offsetHeight + margin}px`);
+    },
+    setupViewportInsets() {
+      const top = document.getElementById("reader-topbar");
+      const bot = document.getElementById("reader-bottombar");
+      this.updateViewportInsets();
+      window.addEventListener("resize", () => this.updateViewportInsets());
+      window.addEventListener("orientationchange", () =>
+        setTimeout(() => this.updateViewportInsets(), 250),
+      );
+      if (
+        typeof ResizeObserver !== "undefined" &&
+        top &&
+        bot
+      ) {
+        const ro = new ResizeObserver(() => this.updateViewportInsets());
+        ro.observe(top);
+        ro.observe(bot);
+      }
    },
    debouncedSaveProgress(fraction: number, location: any, cfi: string) {
      if (Date.now() - this.initTime < 5000) return;
@@ -774,19 +803,20 @@ document.addEventListener("alpine:init", () => {
        /* ignore bookmark errors for now */
      }
    },
-    formatProgress(
+    formatProgressParts(
      fraction: number,
      location: { current: number; next: number; total: number },
      pageItem: { id: number; label: string; href: string },
      tocItem: FoliateTocItem | null,
      section: { current: number; total: number },
-    ): string {
+    ): { label: string; main: string } {
      const percent = new Intl.NumberFormat("en", { style: "percent" }).format(
        fraction,
      );
+      const chapterLabel = tocItem?.label ? `${tocItem.label} · ` : "";
      switch (this.progressMode) {
        case "percentage":
-          return percent;
+          return { label: "", main: percent };
        case "chapter": {
          if (this.isFixedLayout && tocItem && this.chapterBoundaries.length > 0) {
            const totalSections = this.book?.sections?.filter(
@@ -809,10 +839,10 @@ document.addEventListener("alpine:init", () => {
                1,
                Math.min(currentPage - chapterStart + 1, chapterPages),
              );
-              const label = tocItem.label
-                ? `${tocItem.label} · `
-                : "";
-              return `${label}${currentInChapter} / ${chapterPages}`;
+              return {
+                label: chapterLabel,
+                main: `${currentInChapter} / ${chapterPages}`,
+              };
            }
          }
          if (tocItem && this.chapterBoundaries.length > 0) {
@@ -836,10 +866,10 @@ document.addEventListener("alpine:init", () => {
                1,
                Math.min(currentPage - chapterStart + 1, chapterPages),
              );
-              const label = tocItem.label
-                ? `${tocItem.label} · `
-                : "";
-              return `${label}${currentInChapter} / ${chapterPages}`;
+              return {
+                label: chapterLabel,
+                main: `${currentInChapter} / ${chapterPages}`,
+              };
            }
          }
          if (section && this.sectionFractionsArr.length > 1) {
@@ -859,16 +889,19 @@ document.addEventListener("alpine:init", () => {
                Math.round((fraction - startFrac) * pageBase),
              );
              const clamped = Math.min(currentInSec, totalInSec);
-              const label = tocItem?.label
-                ? `${tocItem.label} · `
-                : "";
-              return `${label}${clamped} / ${totalInSec}`;
+              return {
+                label: chapterLabel,
+                main: `${clamped} / ${totalInSec}`,
+              };
            }
          }
          if (location.total > 0) {
-            return `${percent} · ${location.current} / ${location.total}`;
+            return {
+              label: "",
+              main: `${percent} · ${location.current} / ${location.total}`,
+            };
          }
-          return percent;
+          return { label: "", main: percent };
        }
        case "time-left": {
          if (this.readingSpeedPpm > 0 && location.total > 0) {
@@ -877,30 +910,47 @@ document.addEventListener("alpine:init", () => {
            if (mins >= 60) {
              const hrs = Math.floor(mins / 60);
              const m = mins % 60;
-              return `${percent} · ~${hrs}h ${m}m left`;
+              return { label: "", main: `${percent} · ~${hrs}h ${m}m left` };
            }
-            return `${percent} · ~${mins} min left`;
+            return { label: "", main: `${percent} · ~${mins} min left` };
          }
-          return `${percent} · ~-- min left`;
+          return { label: "", main: `${percent} · ~-- min left` };
        }
        default: {
          if (this.isFixedLayout) {
            const pageInfo = this.getRenderedPageInfo();
            if (pageInfo) {
-              return `${pageInfo.current} / ${pageInfo.total}`;
+              return { label: "", main: `${pageInfo.current} / ${pageInfo.total}` };
            }
          }
          if (pageItem) {
-            return `${percent} · Page ${pageItem.label}`;
+            return { label: "", main: `${percent} · Page ${pageItem.label}` };
          }
          const pageInfoReflow = this.getRenderedPageInfo();
          if (pageInfoReflow) {
-            return `${percent} · ${pageInfoReflow.current + 1} / ${pageInfoReflow.total}`;
+            return {
+              label: "",
+              main: `${percent} · ${pageInfoReflow.current + 1} / ${pageInfoReflow.total}`,
+            };
          }
-          return `${percent} · ${location.current} / ${location.total}`;
+          return {
+            label: "",
+            main: `${percent} · ${location.current} / ${location.total}`,
+          };
        }
      }
    },
+    setProgress(parts: { label: string; main: string }, sliderTitle?: string) {
+      this.progressLabel = parts.label;
+      this.progressMain = parts.main;
+      this.progressText = parts.label + parts.main;
+      const slider = document.getElementById(
+        "progress-slider",
+      ) as HTMLInputElement;
+      if (slider) {
+        slider.title = sliderTitle ?? this.progressText;
+      }
+    },
    cycleProgressMode() {
      const modes = ["pages", "chapter", "percentage", "time-left"];
      const idx = modes.indexOf(this.progressMode);
@@ -909,19 +959,15 @@ document.addEventListener("alpine:init", () => {
      if (this.lastRelocateDetail) {
        const { fraction, location, pageItem, tocItem, section } =
          this.lastRelocateDetail;
-        this.progressText = this.formatProgress(
-          fraction,
-          location,
-          pageItem,
-          tocItem,
-          section,
+        this.setProgress(
+          this.formatProgressParts(
+            fraction,
+            location,
+            pageItem,
+            tocItem,
+            section,
+          ),
        );
-        const slider = document.getElementById(
-          "progress-slider",
-        ) as HTMLInputElement;
-        if (slider) {
-          slider.title = this.progressText;
-        }
      }
    },
    async fetchReadingSpeed() {
@@ -944,19 +990,15 @@ document.addEventListener("alpine:init", () => {
      if (this.lastRelocateDetail) {
        const { fraction, location, pageItem, tocItem, section } =
          this.lastRelocateDetail;
-        this.progressText = this.formatProgress(
-          fraction,
-          location,
-          pageItem,
-          tocItem,
-          section,
+        this.setProgress(
+          this.formatProgressParts(
+            fraction,
+            location,
+            pageItem,
+            tocItem,
+            section,
+          ),
        );
-        const slider = document.getElementById(
-          "progress-slider",
-        ) as HTMLInputElement;
-        if (slider) {
-          slider.title = this.progressText;
-        }
      }
    },
    computeFixedLayoutChapterBoundaries() {
Author	SHA1	Message	Date
john-okeefe	c5c2270007	fix(reader): keep footer compact on mobile and clear text under chrome Release / build-and-push (push) Successful in 2m39s Details On phones the footer's progress cell rendered the full chapter title (e.g. 'Long Chapter Name · 5 / 12') in a div with no max-width or nowrap, so the text wrapped to multiple lines and ballooned the bottom bar. Combined with viewport offsets that were computed from assumed pixel heights with ~0px margin, the book text slipped underneath the bars. Chapter label in footer: split #progress-display into two spans (progressLabel hidden on mobile via 'hidden sm:inline', progressMain always shown) and cap it with 'truncate whitespace-nowrap max-w-[5rem] sm:max-w-none' so it can never wrap or grow the bar. Phones now show just '5 / 12'; larger screens keep 'Chapter · 5 / 12'. Viewport offset: replace the fragile hardcoded calc() with runtime measurement. Gave the chrome bars ids (reader-topbar/reader-bottombar) and added updateViewportInsets(), which sets #reader-viewport top/bottom from each bar's real offsetHeight (which already includes env(safe-area-inset-*) padding) plus a 6px margin. It runs on init and refreshes on resize, orientationchange, and via a ResizeObserver, so the content area tracks the actual chrome height on any DPI, notch, home-indicator, or zoom level instead of guessing. Refactored formatProgress into formatProgressParts (returns {label, main}; only chapter mode sets a label) with a setProgress() helper wiring progressLabel/progressMain/progressText across the relocate, cycleProgressMode, and applyProgressMode call sites. Rebuilt reader_templ.go and style.css.	2026-08-05 21:48:28 -04:00
john-okeefe	94a4facc6c	chore(deps): promote golang.org/x/net to direct dependency Release / build-and-push (push) Successful in 3m2s Details Pulled in as a direct requirement by templ v0.3.1020 code generation; it was previously only an indirect dependency.	2026-08-05 15:31:48 -04:00
john-okeefe	11617c1860	fix(reader): tighten mobile header/footer and add safe-area margins The reader chrome used the same dimensions at every screen size, and the book viewport offset was hardcoded to 52px. This made the header/footer oversized on phones and left the body text flush against (or overlapping) the bars, with no handling for notched-device safe areas. - Add viewport-fit=cover so notched devices expose safe-area insets. - Shrink the top bar on mobile (px-3 py-2 / text-base, scaling up at sm:) and hide the chapter title on phones (hidden sm:block sm:truncate). - Shrink the bottom bar on mobile (tighter padding/gap, p-1.5 sm:p-2 on buttons) while keeping all controls visible. - Replace the hardcoded top-[52px] bottom-[52px] viewport offsets with responsive calc() values (44/48px mobile, 60px at sm:) that fold in env(safe-area-inset-*), plus matching safe-area padding on the bars, so the book content always clears the chrome with a visible margin. Regenerates reader_templ.go and rebuilds style.css.	2026-08-05 15:31:40 -04:00
john-okeefe	d0040fe428	chore(deploy): add restart: unless-stopped to app container Release / build-and-push (push) Successful in 2m26s Details The app service in docker-compose.yml had no restart policy (defaults to 'no'), so if the process exited -- e.g. the watcher-leak panic fixed in the previous commit -- the container stayed down until a manual restart. Adding restart: unless-stopped makes the container self-recover from crashes or host reboots, while still honoring explicit 'docker compose down'. Defense-in-depth alongside the scanner leak/panic fix: even if a future unforeseen panic occurs, the app comes back automatically.	2026-07-31 10:45:53 -04:00
john-okeefe	59d5de3607	fix(scanner): eliminate fsnotify watcher leak and harden worker against panics The bookhoard container crashed with 'panic: Failed to create file watcher: too many open files' (media_scanner.go) after running for a few hours, preceded by floods of 'no space left on device' from watcher.Add. Root cause: every scan job called NewMediaScanner(), which eagerly created an fsnotify watcher. SetFolders() then walked the entire library tree and registered one inotify watch per directory (~3,000+ across the libraries), and ScanFolders() registered them again during its walk. The worker never called scanner.Close() on these ephemeral per-job scanners, and the worker loop had no recover(), so: 1. Leaked watchers accumulated until the kernel inotify watch cap was hit (ENOSPC -> 'no space left on device'), then 2. the process fd limit (ulimit -n 1024) was exhausted, causing fsnotify.NewWatcher() to fail with EMFILE, and 3. NewMediaScanner panicked on that error, taking down the whole process (exit code 2). With no restart policy the container stayed down. The scan jobs run frequently (scan_poll_interval), so the leak built up within hours. Note this was NOT a disk-space issue; df showed plenty free. Fix: - media_scanner.go: NewMediaScanner no longer creates a watcher eagerly (s.watcher starts nil), which removes the panic site entirely -- there is nothing to fail at construction. The watcher is created lazily only when needed. - media_scanner.go: SetFolders gains a [?1049h[22;0;0t[1;24r(B[m[4l[?7h[?25l[H[2JEvery 2.0s: bool[1;37Hgaruda-ser8: Fri 31 Jul 2026 10:45:41 AM EDT[2;66Hin 0.002s (127)[2;80H [3dsh: line 1: bool: command not found [4d[24;1H[?12l[?25h[?1049l[23;0;0t [?1l> parameter. It creates and populates a watcher (returning an error instead of panicking) only when watch=true; otherwise it skips all watcher.Add calls. ScanFolders guards its watcher.Add with a nil check, and the WatchChanges event loop exits cleanly when there is no watcher (polling still runs). - worker.go: the worker() loop now wraps each job in defer/recover() so a panicking job is recorded as failed and can never kill the process. - worker.go: the three ephemeral scan handlers (processScanJob, processSetFoldersJob, processDirectoryScanJob) now defer scanner.Close() and call SetFolders(..., false), so scan jobs allocate zero watchers and zero inotify watches. Any pre-existing leak is also bounded by Close(). - handlers/scanner.go: the long-lived watch-mode scanners (StartScanner and StartWatchModeForLibrary) pass watch=true since they actually read watcher.Events for live change detection. - calibre_integration_test.go: updated to the new SetFolders signature (watch=false, matching one-off scan usage). Auto-add is fully preserved: new files are still detected by the periodic poller (startBackupScan), which is independent of fsnotify and unaffected by these changes. The watch-mode event loop remains as bonus responsiveness when inotify is available; through Docker bind mounts where inotify is unreliable, polling is what catches new books.	2026-07-31 10:45:41 -04:00