From e9b155efb6b21a5a0e4a93269c059b78014de11d Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 27 May 2026 15:42:14 +0530
Subject: [PATCH] fix(mobile): hide dock toggle and remove language selector
 flags on mobile viewports

---
 desktop-app/resources/index.html   |  8 +++---
 desktop-app/resources/js/script.js | 45 +++++++++++++++++++++++++++---
 desktop-app/resources/styles.css   | 17 +++++++++++
 index.html                         |  8 +++---
 script.js                          | 45 +++++++++++++++++++++++++++---
 styles.css                         | 17 +++++++++++
 6 files changed, 124 insertions(+), 16 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 8740ec6..51d3c3a 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -297,10 +297,10 @@ <h5>Menu</h5>
                                     <i class="bi bi-translate me-2"></i> Language: <span id="mobile-current-lang-label">English</span>
                                 </button>
                                 <ul class="dropdown-menu w-100" aria-labelledby="mobileLanguageDropdown">
-                                    <li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">🇺🇸 English</a></li>
-                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">🇨🇳 简体中文</a></li>
-                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">🇯🇵 日本語</a></li>
-                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="ko">🇰🇷 한국어</a></li>
+                                    <li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">English</a></li>
+                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">简体中文</a></li>
+                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">日本語</a></li>
+                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="ko">한국어</a></li>
                                 </ul>
                             </div>
                             <button id="mobile-theme-toggle" class="mobile-menu-item" title="Toggle Dark Mode">
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index c25bbb9..9b320ec 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -3953,12 +3953,33 @@ This is a fully client-side application. Your content never leaves your browser
 
   let frPreferredDocked = false;
 
-  function toggleFrDockMode() {
+  function toggleFrDockMode(forceFloat = false) {
     const panel = document.getElementById('find-replace-modal');
     const dockBtn = document.getElementById('find-replace-dock');
     const contentCont = document.querySelector('.content-container');
     if (!panel || !dockBtn || !contentCont) return;
 
+    if (window.innerWidth <= 768 || forceFloat) {
+      isFrDocked = false;
+      panel.classList.remove('docked');
+      if (panel.parentElement !== document.body) {
+        document.body.appendChild(panel);
+      }
+      contentCont.classList.remove('fr-docked');
+      contentCont.style.setProperty('--dock-width', '0px');
+
+      panel.style.top = '';
+      panel.style.left = '';
+      panel.style.right = '';
+      
+      dockBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i>';
+      dockBtn.title = "Toggle Dock Mode";
+      
+      panel.style.display = 'flex';
+      applyPaneWidths();
+      return;
+    }
+
     isFrDocked = !isFrDocked;
     
     // Save preference to localStorage
@@ -4119,7 +4140,12 @@ This is a fully client-side application. Your content never leaves your browser
     }
 
     // Restore docked/floating mode preference
-    const wasDockedPref = localStorage.getItem('find-replace-docked') === 'true';
+    let wasDockedPref = localStorage.getItem('find-replace-docked') === 'true';
+    
+    // Force floating-only mode on mobile/tablet viewports
+    if (window.innerWidth <= 768) {
+      wasDockedPref = false;
+    }
     
     if (wasDockedPref) {
       isFrDocked = false; // Set false so toggleFrDockMode() turns it to true
@@ -4571,6 +4597,7 @@ This is a fully client-side application. Your content never leaves your browser
   }
 
   function startResize(e) {
+    if (window.innerWidth <= 768) return;
     if (currentViewMode !== 'split') return;
     e.preventDefault();
     isResizing = true;
@@ -4579,6 +4606,7 @@ This is a fully client-side application. Your content never leaves your browser
   }
 
   function startResizeTouch(e) {
+    if (window.innerWidth <= 768) return;
     if (currentViewMode !== 'split') return;
     e.preventDefault();
     isResizing = true;
@@ -4625,6 +4653,10 @@ This is a fully client-side application. Your content never leaves your browser
   }
 
   function applyPaneWidths() {
+    if (window.innerWidth <= 768) {
+      resetPaneWidths();
+      return;
+    }
     if (currentViewMode !== 'split') return;
 
     const previewPercent = 100 - editorWidthPercent;
@@ -4733,7 +4765,12 @@ This is a fully client-side application. Your content never leaves your browser
 
   // Initialize resizer - Story 1.3
   initResizer();
-  window.addEventListener('resize', scheduleLineNumberUpdate);
+  window.addEventListener('resize', () => {
+    scheduleLineNumberUpdate();
+    if (window.innerWidth <= 768 && isFrDocked && isFindModalOpen) {
+      toggleFrDockMode(true);
+    }
+  });
 
   // View Mode Button Event Listeners - Story 1.1
   viewModeButtons.forEach(btn => {
@@ -6648,7 +6685,7 @@ This is a fully client-side application. Your content never leaves your browser
     }
     const mobileLabelEl = document.getElementById('mobile-current-lang-label');
     if (mobileLabelEl) {
-      const flags = { en: "🇺🇸 English", zh: "🇨🇳 简体中文", ja: "🇯🇵 日本語", ko: "🇰🇷 한국어" };
+      const flags = { en: "English", zh: "简体中文", ja: "日本語", ko: "한국어" };
       mobileLabelEl.textContent = flags[lang];
     }
 
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index e9fc5b3..ee4df05 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -3376,4 +3376,21 @@ html[lang="ko"] .markdown-body h1, html[lang="ko"] .markdown-body h2, html[lang=
   flex: 1;
   position: relative;
   overflow: hidden;
+}
+
+/* ========================================
+   MOBILE FIND PANEL RESPONSIVE FIXES
+   ======================================== */
+@media (max-width: 768px) {
+  #find-replace-dock {
+    display: none !important;
+  }
+  
+  /* Prevent full screen expansion of floating panel on small mobile viewports */
+  .find-replace-panel {
+    width: calc(100% - 24px) !important;
+    right: 12px !important;
+    left: 12px !important;
+    top: 80px !important;
+  }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 3658f04..b237181 100644
--- a/index.html
+++ b/index.html
@@ -294,10 +294,10 @@ <h5>Menu</h5>
                                     <i class="bi bi-translate me-2"></i> Language: <span id="mobile-current-lang-label">English</span>
                                 </button>
                                 <ul class="dropdown-menu w-100" aria-labelledby="mobileLanguageDropdown">
-                                    <li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">🇺🇸 English</a></li>
-                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">🇨🇳 简体中文</a></li>
-                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">🇯🇵 日本語</a></li>
-                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="ko">🇰🇷 한국어</a></li>
+                                    <li><a class="dropdown-item lang-select-item active" href="#" data-lang="en">English</a></li>
+                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="zh">简体中文</a></li>
+                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="ja">日本語</a></li>
+                                    <li><a class="dropdown-item lang-select-item" href="#" data-lang="ko">한국어</a></li>
                                 </ul>
                             </div>
                             <button id="mobile-theme-toggle" class="mobile-menu-item" title="Toggle Dark Mode">
diff --git a/script.js b/script.js
index c25bbb9..9b320ec 100644
--- a/script.js
+++ b/script.js
@@ -3953,12 +3953,33 @@ This is a fully client-side application. Your content never leaves your browser
 
   let frPreferredDocked = false;
 
-  function toggleFrDockMode() {
+  function toggleFrDockMode(forceFloat = false) {
     const panel = document.getElementById('find-replace-modal');
     const dockBtn = document.getElementById('find-replace-dock');
     const contentCont = document.querySelector('.content-container');
     if (!panel || !dockBtn || !contentCont) return;
 
+    if (window.innerWidth <= 768 || forceFloat) {
+      isFrDocked = false;
+      panel.classList.remove('docked');
+      if (panel.parentElement !== document.body) {
+        document.body.appendChild(panel);
+      }
+      contentCont.classList.remove('fr-docked');
+      contentCont.style.setProperty('--dock-width', '0px');
+
+      panel.style.top = '';
+      panel.style.left = '';
+      panel.style.right = '';
+      
+      dockBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i>';
+      dockBtn.title = "Toggle Dock Mode";
+      
+      panel.style.display = 'flex';
+      applyPaneWidths();
+      return;
+    }
+
     isFrDocked = !isFrDocked;
     
     // Save preference to localStorage
@@ -4119,7 +4140,12 @@ This is a fully client-side application. Your content never leaves your browser
     }
 
     // Restore docked/floating mode preference
-    const wasDockedPref = localStorage.getItem('find-replace-docked') === 'true';
+    let wasDockedPref = localStorage.getItem('find-replace-docked') === 'true';
+    
+    // Force floating-only mode on mobile/tablet viewports
+    if (window.innerWidth <= 768) {
+      wasDockedPref = false;
+    }
     
     if (wasDockedPref) {
       isFrDocked = false; // Set false so toggleFrDockMode() turns it to true
@@ -4571,6 +4597,7 @@ This is a fully client-side application. Your content never leaves your browser
   }
 
   function startResize(e) {
+    if (window.innerWidth <= 768) return;
     if (currentViewMode !== 'split') return;
     e.preventDefault();
     isResizing = true;
@@ -4579,6 +4606,7 @@ This is a fully client-side application. Your content never leaves your browser
   }
 
   function startResizeTouch(e) {
+    if (window.innerWidth <= 768) return;
     if (currentViewMode !== 'split') return;
     e.preventDefault();
     isResizing = true;
@@ -4625,6 +4653,10 @@ This is a fully client-side application. Your content never leaves your browser
   }
 
   function applyPaneWidths() {
+    if (window.innerWidth <= 768) {
+      resetPaneWidths();
+      return;
+    }
     if (currentViewMode !== 'split') return;
 
     const previewPercent = 100 - editorWidthPercent;
@@ -4733,7 +4765,12 @@ This is a fully client-side application. Your content never leaves your browser
 
   // Initialize resizer - Story 1.3
   initResizer();
-  window.addEventListener('resize', scheduleLineNumberUpdate);
+  window.addEventListener('resize', () => {
+    scheduleLineNumberUpdate();
+    if (window.innerWidth <= 768 && isFrDocked && isFindModalOpen) {
+      toggleFrDockMode(true);
+    }
+  });
 
   // View Mode Button Event Listeners - Story 1.1
   viewModeButtons.forEach(btn => {
@@ -6648,7 +6685,7 @@ This is a fully client-side application. Your content never leaves your browser
     }
     const mobileLabelEl = document.getElementById('mobile-current-lang-label');
     if (mobileLabelEl) {
-      const flags = { en: "🇺🇸 English", zh: "🇨🇳 简体中文", ja: "🇯🇵 日本語", ko: "🇰🇷 한국어" };
+      const flags = { en: "English", zh: "简体中文", ja: "日本語", ko: "한국어" };
       mobileLabelEl.textContent = flags[lang];
     }
 
diff --git a/styles.css b/styles.css
index e9fc5b3..ee4df05 100644
--- a/styles.css
+++ b/styles.css
@@ -3376,4 +3376,21 @@ html[lang="ko"] .markdown-body h1, html[lang="ko"] .markdown-body h2, html[lang=
   flex: 1;
   position: relative;
   overflow: hidden;
+}
+
+/* ========================================
+   MOBILE FIND PANEL RESPONSIVE FIXES
+   ======================================== */
+@media (max-width: 768px) {
+  #find-replace-dock {
+    display: none !important;
+  }
+  
+  /* Prevent full screen expansion of floating panel on small mobile viewports */
+  .find-replace-panel {
+    width: calc(100% - 24px) !important;
+    right: 12px !important;
+    left: 12px !important;
+    top: 80px !important;
+  }
 }
\ No newline at end of file