Merge pull request 'Mobile UI Fixes' (#3) from dev into main

Reviewed-on: #3

README.md

@@ -4,15 +4,12 @@
 
 <img src="public/banner.png" alt="WaifuBoard Hero" width="100%"/>
 <div align="center">
-<br>
 
 [![Windows](https://img.shields.io/badge/Windows-SUPPORTED-0078D6?style=for-the-badge&logo=windows&logoColor=white)](https://waifuboard.app)
 [![Latest](https://img.shields.io/gitea/v/release/ItsSkaiya/WaifuBoard?gitea_url=https://git.waifuboard.app&style=for-the-badge)](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)
-![Downloads](https://img.shields.io/endpoint?url=https://waifuboard.jaiet7.workers.dev&style=for-the-badge)
 [![Extensions](https://img.shields.io/badge/Extensions-Repository-8257e5?style=for-the-badge)](https://git.waifuboard.app/ItsSkaiya/WaifuBoard-Extensions)
-[![Discord](https://img.shields.io/badge/Discord-JOIN-5865F2?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/BVdGSCXxrm)
 
-**[Website](https://waifuboard.app)** • **[Documentation](https://waifuboard.app/docs)** •  **[Download Latest](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)** 
+**[Website](https://waifuboard.app)** • **[Documentation](https://waifuboard.app/docs)** •  **[Download Latest](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest)** • **[Discord (soon)](#)**
 
 </div>
 
@@ -33,11 +30,10 @@
 ## 🖥️ Download & Platform Support
 
 | Platform   | Status          | Link                                                      |
-|----------|-----------------|-----------------------------------------------------------|
+|------------|-----------------|-----------------------------------------------------------|
 | Windows    | ✅ Available now | [Latest Release](https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases/latest) |
 | Linux      | ⏳ Coming soon   | —                                                         |
 | macOS      | ⏳ Coming soon   | —                                                         |
-| Android  | ⏳ Coming soon   | —                                                         |
 
 ## 📦 Extensions & Marketplace
 

src/content/image-handler.js

@@ -1,26 +1,12 @@
-const gallery = document.getElementById('content-gallery');
+let masonryTimer = null;
-
-if (gallery) {
-    const ro = new ResizeObserver(() => {
-        const items = gallery.querySelectorAll('.image-entry[data-type="image"]');
-        items.forEach(item => resizeMasonryItem(item));
-        relayoutMasonry(gallery);
-    });
-    ro.observe(gallery);
-}
-
-let masonryFrameRunning = false;
 function scheduleMasonryRelayout(grid) {
-    if (masonryFrameRunning) return;
+    clearTimeout(masonryTimer);
-    masonryFrameRunning = true;
+    masonryTimer = setTimeout(() => {
-
-    requestAnimationFrame(() => {
         relayoutMasonry(grid);
-        masonryFrameRunning = false;
+    }, 50);
-    });
 }
 
-export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {}) {
+export function createImageCard(id, tags, imageUrl, thumbnailUrl, type, options = {}) {
     const {
         showMessage,
         showTagModal,
@@ -30,7 +16,7 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {})
     const card = document.createElement('div');
     card.className = 'image-entry loading newly-added';
     card.dataset.id = id;
-    card.dataset.type = 'image';
+    card.dataset.type = type;
     card.title = tags.join(', ');
 
     const img = document.createElement('img');
@@ -42,10 +28,10 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {})
         img.classList.add('loaded');
         card.classList.remove('loading');
 
-        setTimeout(() => {
+        if (type !== 'book') {
-            resizeMasonryItem(card);
+            setTimeout(() => resizeMasonryItem(card), 20);
             scheduleMasonryRelayout(card.parentElement);
-        }, 100);
+        }
 
         setTimeout(() => {
             card.classList.remove('newly-added');
@@ -59,42 +45,7 @@ export function createImageCard(id, tags, imageUrl, thumbnailUrl, options = {})
 
     card.appendChild(img);
 
-    const buttonsOverlay = createButtonsOverlay(
+    if (type === 'book') {
-        id, imageUrl, thumbnailUrl, tags,
-        card, favoriteIds, showMessage, showTagModal, options
-    );
-    card.appendChild(buttonsOverlay);
-
-    return card;
-}
-
-export function createBookCard(id, tags, imageUrl, thumbnailUrl, title, options = {}) {
-    const card = document.createElement('div');
-    card.className = 'image-entry loading newly-added';
-    card.dataset.id = id;
-    card.dataset.type = 'book';
-    card.dataset.title = title || 'Unknown';
-    card.title = tags.join(', ');
-
-    const img = document.createElement('img');
-    img.src = thumbnailUrl || imageUrl;
-    img.loading = 'lazy';
-    img.alt = title || tags.join(' ');
-
-    img.onload = () => {
-        img.classList.add('loaded');
-        card.classList.remove('loading');
-
-        setTimeout(() => card.classList.remove('newly-added'), 400);
-    };
-
-    img.onerror = () => {
-        card.classList.remove('loading');
-        img.classList.add('loaded');
-    };
-
-    card.appendChild(img);
-
         const readOverlay = document.createElement('div');
         readOverlay.className = 'book-read-overlay';
         readOverlay.innerHTML = `
@@ -105,29 +56,12 @@ export function createBookCard(id, tags, imageUrl, thumbnailUrl, title, options
             <span>Click To Read</span>
         `;
         card.appendChild(readOverlay);
-
         return card;
-}
+    }
 
-function createButtonsOverlay(id, imageUrl, thumbnailUrl, tags, card, favoriteIds, showMessage, showTagModal, options) {
     const buttonsOverlay = document.createElement('div');
     buttonsOverlay.className = 'image-buttons';
 
-    const tagBtn = document.createElement('button');
-    tagBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>`;
-    tagBtn.title = "View Tags";
-    tagBtn.onclick = e => {
-        e.stopPropagation();
-        showTagModal(tags);
-    };
-    const favBtn = createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteIds, showMessage, options);
-    buttonsOverlay.appendChild(tagBtn);
-    buttonsOverlay.appendChild(favBtn);
-
-    return buttonsOverlay;
-}
-
-function createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteIds, showMessage, options) {
     const favBtn = document.createElement('button');
     favBtn.className = 'heart-button';
     favBtn.dataset.id = id;
@@ -135,7 +69,7 @@ function createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteId
     const isFavorited = favoriteIds.has(String(id));
     updateHeartIcon(favBtn, isFavorited);
 
-    favBtn.onclick = async e => {
+    favBtn.onclick = async (e) => {
         e.stopPropagation();
         e.preventDefault();
 
@@ -153,58 +87,81 @@ function createFavoriteButton(id, imageUrl, thumbnailUrl, tags, card, favoriteId
                         options.applyLayoutToGallery(options.favoritesGallery, options.currentLayout);
                     }
                 }
-            } else showMessage('Failed to remove favorite', 'error');
+            } else {
+                showMessage('Failed to remove favorite', 'error');
+            }
         } else {
             const favoriteData = {
                 id: String(id),
                 image_url: imageUrl,
                 thumbnail_url: thumbnailUrl,
                 tags: tags.join(','),
-                title: card.title || card.dataset.title || 'Unknown'
+                title: card.title || 'Unknown'
             };
             const success = await window.api.addFavorite(favoriteData);
             if (success) {
                 favoriteIds.add(String(id));
                 updateHeartIcon(favBtn, true);
                 showMessage('Added to favorites', 'success');
-            } else showMessage('Failed to save favorite', 'error');
+            } else {
+                showMessage('Failed to save favorite', 'error');
+            }
         }
     };
 
-    return favBtn;
+    const tagBtn = document.createElement('button');
-}
+    tagBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>`;
+    tagBtn.title = "View Tags";
+    tagBtn.onclick = (e) => {
+        e.stopPropagation();
+        showTagModal(tags);
+    };
 
-function updateHeartIcon(btn, isFavorited) {
+    buttonsOverlay.appendChild(tagBtn);
-    btn.innerHTML = isFavorited
+    buttonsOverlay.appendChild(favBtn);
-        ? `<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`
+    card.appendChild(buttonsOverlay);
-        : `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
+
-    btn.title = isFavorited ? "Remove from Favorites" : "Add to Favorites";
+    return card;
 }
 
 function resizeMasonryItem(item) {
     if (item.dataset.type === 'book') return;
 
     const grid = item.parentElement;
-    if (!grid) return;
+    const rowHeight = parseInt(getComputedStyle(grid).gridAutoRows);
+    const rowGap = parseInt(getComputedStyle(grid).gap);
+
     const img = item.querySelector("img");
-    if (!img || !img.complete || img.naturalWidth === 0) return;
 
-    const simulatedWidth = item.getBoundingClientRect().width;
+    if (!img) return;
 
-    const gridStyles = getComputedStyle(grid);
+    if (!img.complete || img.naturalWidth === 0) {
-    const rowHeight = parseInt(gridStyles.gridAutoRows);
+        return;
-    const rowGap = parseInt(gridStyles.gap);
+    }
 
-    const totalHeight = (img.naturalHeight / img.naturalWidth) * simulatedWidth;
+    const width = img.clientWidth;
+    const imageHeight = (img.naturalHeight / img.naturalWidth) * width;
+
+    const extra = 2;
+    const totalHeight = imageHeight + extra;
     const rowSpan = Math.ceil((totalHeight + rowGap) / (rowHeight + rowGap));
+    item.style.gridRowEnd = "span " + rowSpan;
 
-    item.style.gridRowEnd = `span ${rowSpan}`;
+    item.style.height = totalHeight + "px";
-    item.style.height = "auto";
+}
+
+function updateHeartIcon(btn, isFavorited) {
+    if (isFavorited) {
+        btn.innerHTML = `<svg viewBox="0 0 24 24" fill="#ef4444" stroke="#ef4444" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
+        btn.title = "Remove from Favorites";
+    } else {
+        btn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>`;
+        btn.title = "Add to Favorites";
+    }
 }
 
 function relayoutMasonry(grid) {
-    if (!grid) return;
+    const items = grid.querySelectorAll('.image-entry:not([data-type="book"])');
-    const items = grid.querySelectorAll('.image-entry[data-type="image"]');
     items.forEach(item => resizeMasonryItem(item));
 }
 

src/renderer.js

@@ -2,7 +2,7 @@ import { populateSources } from './extensions/load-extensions.js';
 import { setupGlobalKeybinds } from './utils/keybinds.js';
 import { getDomElements } from './utils/dom-loader.js';
 import { performSearch, loadMoreResults } from './modules/search-handler.js';
-import { createImageCard, createBookCard, populateTagModal } from './content/image-handler.js';
+import { createImageCard, populateTagModal } from './content/image-handler.js';
 import { showMessage as uiShowMessage } from './modules/ui-utils.js';
 import { applyLayoutToGallery } from './modules/layout-manager.js';
 
@@ -23,38 +23,12 @@ document.addEventListener('DOMContentLoaded', async () => {
         }
     } catch (e) { console.error(e); }
 
-    function showMessage(msg, type = 'success') {
+    function showMessage(msg, type = 'success') { if (domRefs.messageBar) uiShowMessage(domRefs.messageBar, msg, type); }
-        if (domRefs.messageBar) uiShowMessage(domRefs.messageBar, msg, type);
+    function showTagModal(tags) { if (domRefs.tagInfoContent) { populateTagModal(domRefs.tagInfoContent, tags); domRefs.tagInfoModal.classList.remove('hidden'); } }
-    }
-
-    function showTagModal(tags) {
-        if (domRefs.tagInfoContent) {
-            populateTagModal(domRefs.tagInfoContent, tags);
-            domRefs.tagInfoModal.classList.remove('hidden');
-        }
-    }
-
     function localCreateImageCard(id, tags, img, thumb, type) {
-        const sharedOptions = {
+        return createImageCard(id, tags, img, thumb, type, { currentLayout, showMessage, showTagModal, applyLayoutToGallery, favoritesGallery: document.getElementById('favorites-gallery'), favoriteIds });
-            currentLayout,
-            showMessage,
-            showTagModal,
-            applyLayoutToGallery,
-            favoritesGallery: document.getElementById('favorites-gallery'),
-            favoriteIds
-        };
-
-        if (type === 'book') {
-            const title = tags[0] || 'Unknown';
-            return createBookCard(id, tags, img, thumb, title, sharedOptions);
-        } else {
-            return createImageCard(id, tags, img, thumb, sharedOptions);
-        }
-    }
-
-    function updateHeader() {
-        if (domRefs.headerContext) domRefs.headerContext.classList.add('hidden');
     }
+    function updateHeader() { if (domRefs.headerContext) domRefs.headerContext.classList.add('hidden'); }
 
     const callbacks = { showMessage, applyLayoutToGallery, updateHeader, createImageCard: localCreateImageCard };
 
@@ -316,16 +290,13 @@ document.addEventListener('DOMContentLoaded', async () => {
         const favGallery = document.getElementById('favorites-gallery');
         const rawFavorites = await window.api.getFavorites();
         favGallery.innerHTML = '';
-        if (!rawFavorites || rawFavorites.length === 0) {
+        if (!rawFavorites || rawFavorites.length === 0) favGallery.innerHTML = '<div class="loading-state"><p>No favorites found.</p></div>';
-            favGallery.innerHTML = '<div class="loading-state"><p>No favorites found.</p></div>';
+        else {
-        } else {
             rawFavorites.forEach(row => {
                 let tags = [];
                 if (typeof row.tags === 'string') tags = row.tags.split(',').filter(t=>t);
                 else if (Array.isArray(row.tags)) tags = row.tags;
-
+                const card = localCreateImageCard(row.id, tags, row.image_url, row.thumbnail_url, 'image');
-                const cardType = row.type || 'image';
-                const card = localCreateImageCard(row.id, tags, row.image_url, row.thumbnail_url, cardType);
                 card.dataset.title = row.title;
                 favGallery.appendChild(card);
             });

views/emulator.html

@@ -11,15 +11,30 @@
 
 <body>
 
-<aside class="sidebar">
+    <aside class="sidebar">
-    <a href="index.html" class="nav-button" title="Image Boards"> ... </a>
+        <a href="index.html" class="nav-button" title="Image Boards">
-    <button class="nav-button active" title="Emulator"> ... </button>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-    <button class="nav-button" title="Reset" onclick="window.location.reload()"> ... </button>
+                <rect x="3" y="3" width="7" height="7"></rect>
-</aside>
+                <rect x="14" y="3" width="7" height="7"></rect>
+                <rect x="14" y="14" width="7" height="7"></rect>
+                <rect x="3" y="14" width="7" height="7"></rect>
+            </svg>
+            <span>Back To Home</span>
+        </a>
 
-<div class="main-wrapper">
+        <button class="nav-button active" title="Emulator">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml-icon lucide-code-xml"><path d="m18 16 4-4-4-4"/><path d="m6 8-4 4 4 4"/><path d="m14.5 4-5 16"/></svg>
+            <span>Emulator</span>
+        </button>
+        <button class="nav-button" title="Reset" onclick="window.location.reload()">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+            <span>Reset</span>
+        </button>
+    </aside>
+
+    <div class="main-wrapper">
         <header class="top-header">
-        <button id="hamburger-btn" class="hamburger">Menu</button>
+            <button id="hamburger-btn" class="hamburger">☰</button>
             <h3>Extension Emulator</h3>
         </header>
 
@@ -27,22 +42,15 @@
             <div class="editor-pane">
                 <div class="control-bar" style="background: transparent; border: none; padding: 0;">
                     <h4 style="margin:0">Extension Code</h4>
-                <span style="font-size: 0.8rem; color: var(--text-tertiary); margin-left: auto;">
+                    <span style="font-size: 0.8rem; color: var(--text-tertiary); margin-left: auto;">Paste your .js file
-                        Paste your .js file here
+                        here</span>
-                    </span>
                 </div>
                 <textarea id="code-input" class="code-editor" spellcheck="false"
                     placeholder="// Paste your extension class here..."></textarea>
             </div>
 
             <div class="preview-pane">
-
+                <div class="control-bar">
-            <div class="control-bar" id="main-control-bar">
-                <button id="mobile-controls-toggle" class="btn-run mobile-only">
-                    Options
-                </button>
-
-                <div id="desktop-controls" class="control-group-wrapper">
                     <div class="control-group">
                         <label>Function</label>
                         <select id="func-select" class="control-input">
@@ -66,9 +74,8 @@
 
                     <button class="btn-run" id="run-btn">Run</button>
                 </div>
-            </div>
 
-            <div style="display: flex; flex-direction: column; flex: 1; overflow:Emulator hidden; position: relative;">
+                <div style="display: flex; flex-direction: column; flex: 1; overflow: hidden; position: relative;">
                     <div class="tabs">
                         <button class="tab-btn active" onclick="switchTab('visual')">Visual</button>
                         <button class="tab-btn" onclick="switchTab('json')">JSON</button>
@@ -88,99 +95,10 @@
                 </div>
             </div>
         </div>
-</div>
-
-<div id="mobile-controls-overlay"></div>
-<div id="mobile-controls-drawer">
-    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
-        <h4 style="margin:0; color:var(--text-primary);">Run Options</h4>
-        <button id="close-drawer-btn" style="background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--text-secondary);">
-            X
-        </button>
     </div>
 
-    <div class="control-group-wrapper">
+    <script src="../src/emulator/emulator.js"></script>
-        <div class="control-group">
+    <script src="../src/hamburger.js"></script>
-            <label>Function</label>
-            <select id="func-select-mobile" class="control-input">
-                <option value="fetchSearchResult">fetchSearchResult (Search)</option>
-                <option value="fetchInfo">fetchInfo (Image Details)</option>
-                <option value="findChapters">findChapters (Manga/Novel)</option>
-                <option value="findChapterPages">findChapterPages (Read)</option>
-            </select>
-        </div>
-
-        <div class="control-group">
-            <label>Query / ID / URL</label>
-            <input type="text" id="arg-input-mobile" class="control-input" placeholder="Search query or ID">
-        </div>
-
-        <div class="control-group">
-            <label>Page</label>
-            <input type="number" id="page-input-mobile" class="control-input" value="1" min="1">
-        </div>
-
-        <button class="btn-run" id="run-btn-mobile">Run</button>
-    </div>
-</div>
-
-<script src="../src/emulator/emulator.js"></script>
-<script src="../src/hamburger.js"></script>
-
-<script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const toggleBtn     = document.getElementById('mobile-controls-toggle');
-        const drawer        = document.getElementById('mobile-controls-drawer');
-        const overlay       = document.getElementById('mobile-controls-overlay');
-        const closeBtn      = document.getElementById('close-drawer-btn');
-
-        const funcSelect    = document.getElementById('func-select');
-        const argInput      = document.getElementById('arg-input');
-        const pageInput     = document.getElementById('page-input');
-        const runBtn        = document.getElementById('run-btn');
-
-        const funcMobile    = document.getElementById('func-select-mobile');
-        const argMobile     = document.getElementById('arg-input-mobile');
-        const pageMobile    = document.getElementById('page-input-mobile');
-        const runMobile     = document.getElementById('run-btn-mobile');
-
-        const syncDesktopToMobile = () => {
-            funcMobile.value  = funcSelect.value;
-            argMobile.value   = argInput.value;
-            pageMobile.value  = pageInput.value;
-        };
-
-        const syncMobileToDesktop = () => {
-            funcSelect.value  = funcMobile.value;
-            argInput.value    = argMobile.value;
-            pageInput.value   = pageMobile.value;
-        };
-
-        toggleBtn?.addEventListener('click', () => {
-            syncDesktopToMobile();
-            drawer.classList.add('open');
-            overlay.classList.add('open');
-        });
-
-        const closeDrawer = () => {
-            syncMobileToDesktop();
-            drawer.classList.remove('open');
-            overlay.classList.remove('open');
-        };
-
-        closeBtn?.addEventListener('click', closeDrawer);
-        overlay?.addEventListener('click', closeDrawer);
-
-        document.addEventListener('keydown', e => {
-            if (e.key === 'Escape') closeDrawer();
-        });
-
-        runMobile?.addEventListener('click', () => {
-            syncMobileToDesktop();
-            closeDrawer();
-            runBtn.click();
-        });
-    });
-</script>
 </body>
+
 </html>

views/styles/books.css

@@ -402,43 +402,3 @@
         gap: 2.5rem;
     }
 }
-
-#pagination-controls {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    padding: 1rem 0;
-}
-
-#pagination-controls .page-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.4rem 0.8rem;
-}
-.image-entry[data-type="book"] {
-    position: relative;
-}
-
-.image-entry[data-type="book"] .book-read-overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    pointer-events: none;
-
-    color: #9b5cff;
-    font-weight: 600;
-    text-shadow: 0 0 6px rgba(0,0,0,0.6);
-    opacity: 0;
-    transition: opacity .25s ease;
-}
-
-.image-entry[data-type="book"]:hover .book-read-overlay {
-    opacity: 1;
-}

views/styles/emulator.css

@@ -3,8 +3,8 @@
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     height: calc(100vh - var(--header-height));
-    padding: 1rem 2rem 2rem;
+    padding: 1rem 2rem 2rem 2rem;
-    overflow: hidden;
+    overflow: auto;
 }
 
 .editor-pane,
@@ -207,68 +207,11 @@ pre {
 @media (max-width: 767px) {
     .emulator-container {
         grid-template-columns: 1fr;
-        grid-template-rows: minmax(220px, 35vh) 1fr;
+        grid-template-rows: minmax(250px, 40vh) minmax(400px, 1fr);
         gap: 1rem;
-        padding: 0.75rem;
+        padding: 1rem;
         height: auto;
-        min-height: calc(100vh - var(--header-height));
+        overflow-y: auto;
-        overflow: visible;
-    }
-
-    #mobile-controls-toggle {
-        display: block !important;
-        width: 100%;
-    }
-
-    #desktop-controls {
-        display: none;
-    }
-
-    .control-bar {
-        padding: 0.75rem;
-        justify-content: center;
-    }
-
-    .tabs {
-        flex-shrink: 0;
-    }
-
-    #visual-container {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-        gap: 0.75rem;
-        padding: 0.5rem 0;
-    }
-
-    .visual-card {
-        width: calc(50% - 0.375rem);
-        max-width: 180px;
-        margin: 0;
-    }
-
-    .visual-card img {
-        height: 220px;
-    }
-
-    .visual-card .title {
-        font-size: 0.8rem;
-        padding: 0.45rem;
-    }
-
-    .visual-chapter {
-        padding: 0.85rem 0.75rem;
-        font-size: 0.95rem;
-    }
-
-    #console-content,
-    #json-content pre {
-        font-size: 0.82rem;
-        line-height: 1.4;
-    }
-
-    .loading-state {
-        font-size: 1rem;
     }
 
     .editor-pane,
@@ -287,22 +230,14 @@ pre {
     .preview-pane {
         display: flex;
         flex-direction: column;
-        height: auto;
+        overflow: visible;
-        min-height: 0;
-    }
-
-    .preview-pane > div:nth-child(2) {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
     }
 
     .code-editor {
-        min-height: 200px;
-        max-height: 40vh;
         font-size: 13px;
         padding: 0.75rem;
+        min-height: 200px;
+        max-height: 35vh;
     }
 
     .control-bar {
@@ -353,10 +288,9 @@ pre {
     }
 
     .output-area {
-        flex: 1;
-        overflow-y: auto !important;
-        min-height: 300px;
         padding: 0.75rem;
+        min-height: 300px;
+        overflow: auto;
     }
 
     .visual-card {
@@ -434,59 +368,3 @@ pre {
         height: 180px;
     }
 }
-
-.control-group-wrapper {
-    display: flex;
-    gap: 0.5rem;
-    align-items: end;
-    flex-wrap: wrap;
-    width: 100%;
-}
-
-#mobile-controls-drawer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: var(--bg-surface);
-    border-top: 1px solid var(--border);
-    border-radius: var(--radius-md) var(--radius-md) 0 0;
-    padding: 1rem;
-    transform: translateY(100%);
-    transition: transform 0.25s ease;
-    z-index: 1000;
-    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
-}
-
-#mobile-controls-drawer.open {
-    transform: translateY(0);
-}
-
-#mobile-controls-drawer .control-group-wrapper {
-    flex-direction: column;
-    gap: 1rem;
-}
-
-#mobile-controls-drawer .control-group {
-    min-width: 0;
-}
-
-#mobile-controls-drawer .btn-run {
-    width: 100%;
-    margin-top: 0.5rem;
-}
-
-#mobile-controls-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,0.5);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.25s;
-    z-index: 999;
-}
-
-#mobile-controls-overlay.open {
-    opacity: 1;
-    pointer-events: auto;
-}