From c10c219736072a858e6ea230c0d79a73651fd4a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=A2=D1=80=D0=BE=D1=88?=
 =?UTF-8?q?=D0=B8=D0=BD?= <i@atroshin.ru>
Date: Tue, 4 Aug 2026 04:42:35 +0300
Subject: [PATCH] fix: Bible reader toolbar & select dark theme; service tab
 scroll jump

- Bible reader toolbar: bg-navy->bg-surface/50, selects: appearance-none bg-surface
- Prayer view select: appearance-none bg-surface (match settings style)
- Service view: preserve content height before loading to prevent scroll jump
---
 src/ui/bible-view.ts   | 12 ++++++------
 src/ui/prayer-view.ts  |  2 +-
 src/ui/service-view.ts |  4 ++++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/ui/bible-view.ts b/src/ui/bible-view.ts
index e156f0b..217ca3b 100644
--- a/src/ui/bible-view.ts
+++ b/src/ui/bible-view.ts
@@ -131,22 +131,22 @@ export class BibleView {
 
     this.container.innerHTML = `
       <div class="flex flex-col h-full">
-        <div class="bg-navy text-parchment p-3 flex items-center gap-4 flex-wrap">
-          <select id="version-select" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm">
+        <div class="bg-surface/50 border border-gold/20 rounded-lg p-3 flex items-center gap-4 flex-wrap">
+          <select id="version-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
             ${this.versions.map(v =>
               `<option value="${v.id}" ${v.id === this.currentVersion ? 'selected' : ''}>${v.name}</option>`
             ).join('')}
           </select>
-          <select id="book-select" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm">
+          <select id="book-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
             ${this.getBooksForVersion().map(b =>
               `<option value="${b.id}" ${b.id === this.currentBook ? 'selected' : ''}>${b.name}</option>`
             ).join('')}
           </select>
           <div class="flex items-center gap-1">
-            <button id="prev-chapter" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">◀</button>
-            <select id="chapter-select" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm">
+            <button id="prev-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">◀</button>
+            <select id="chapter-select" class="appearance-none bg-surface text-navy border border-gold/20 rounded px-2 py-1 text-sm">
             </select>
-            <button id="next-chapter" class="bg-navy-light text-parchment border border-gold/30 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">▶</button>
+            <button id="next-chapter" class="bg-surface/50 text-navy border border-gold/20 rounded px-2 py-1 text-sm hover:bg-gold/20 disabled:opacity-40">▶</button>
           </div>
         </div>
 
diff --git a/src/ui/prayer-view.ts b/src/ui/prayer-view.ts
index 3213a81..38276a9 100644
--- a/src/ui/prayer-view.ts
+++ b/src/ui/prayer-view.ts
@@ -226,7 +226,7 @@ export class PrayerView {
           `).join('')}
         </div>
         <p class="text-navy-light text-sm mb-2">${subtitle}</p>
-        <select id="prayer-select" class="w-full border border-gold/20 bg-surface/50 text-navy rounded-lg px-3 py-2 text-sm mb-3">
+        <select id="prayer-select" class="w-full appearance-none bg-surface text-navy border border-gold/20 rounded-lg px-3 py-2 text-sm mb-3">
           ${sections.map(s => `
             <option value="${s.id}" ${this.activeSection === s.id ? 'selected' : ''}>${s.name}</option>
           `).join('')}
diff --git a/src/ui/service-view.ts b/src/ui/service-view.ts
index 6cbc217..8462c8b 100644
--- a/src/ui/service-view.ts
+++ b/src/ui/service-view.ts
@@ -791,6 +791,10 @@ export class ServiceView {
     const contentEl = document.getElementById('service-content');
     if (!contentEl) return;
 
+    const prevHeight = contentEl.offsetHeight;
+    if (prevHeight > 0) {
+      contentEl.style.minHeight = prevHeight + 'px';
+    }
     contentEl.innerHTML = `<p class="text-navy-light italic">${this.t.loading}</p>`;
 
     try {