perf: resolve startup forced reflows, debounce resize layout, and optimize touch targets

Author: ThisIs-Developer

desktop-app/resources/js/script.js

@@ -5073,12 +5073,17 @@ document.addEventListener("DOMContentLoaded", function () {
 
   initTabs();
   if (loadGlobalState().syncScrollingEnabled === false) toggleSyncScrolling();
-  initEditorGeometry();
-  refreshEditorWidth();
   updateMobileStats();
   updateFindHighlights();
   syncHighlightScroll();
 
+  // Defer DOM geometry measurement until after FCP/LCP critical paint path
+  setTimeout(function() {
+    initEditorGeometry();
+    refreshEditorWidth();
+    scheduleLineNumberUpdate();
+  }, 100);
+
   // Initialize resizer - Story 1.3
   initResizer();
   function constrainFloatingPanelPosition() {
@@ -5105,14 +5110,18 @@ document.addEventListener("DOMContentLoaded", function () {
     lastFloatingTop = constrainedTop;
   }
 
+  let resizeLayoutTimeout = null;
   window.addEventListener('resize', () => {
-    initEditorGeometry();
-    refreshEditorWidth();
-    scheduleLineNumberUpdate();
-    if (window.innerWidth < 1080 && isFrDocked && isFindModalOpen) {
-      toggleFrDockMode(true);
-    }
-    constrainFloatingPanelPosition();
+    clearTimeout(resizeLayoutTimeout);
+    resizeLayoutTimeout = setTimeout(function() {
+      initEditorGeometry();
+      refreshEditorWidth();
+      scheduleLineNumberUpdate();
+      if (window.innerWidth < 1080 && isFrDocked && isFindModalOpen) {
+        toggleFrDockMode(true);
+      }
+      constrainFloatingPanelPosition();
+    }, 100);
   });
 
   // View Mode Button Event Listeners - Story 1.1

desktop-app/resources/styles.css

@@ -1890,6 +1890,46 @@ a:focus {
   position: relative;
 }
 
+/* Touch Hitbox Expansion for Tab Menu Button */
+.tab-menu-btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 48px;
+  height: 48px;
+}
+
+/* Touch-optimized styling for coarser pointers (e.g., smartphones & tablets) */
+@media (pointer: coarse) {
+  .tab-bar {
+    height: 40px !important;
+  }
+  .tab-item {
+    height: 40px !important;
+    font-size: 14px !important;
+    padding: 0 10px 0 12px !important;
+    gap: 8px !important;
+  }
+  .tab-new-btn {
+    width: 32px !important;
+    height: 32px !important;
+    font-size: 18px !important;
+  }
+  .tab-menu-btn {
+    width: 30px !important;
+    height: 30px !important;
+    font-size: 18px !important;
+  }
+  .tab-close-btn {
+    width: 20px !important;
+    height: 20px !important;
+    font-size: 13px !important;
+    opacity: 0.8 !important;
+  }
+}
+
 .tab-item:hover .tab-menu-btn,
 .tab-item.active .tab-menu-btn {
   opacity: 0.65;

script.js

@@ -5073,12 +5073,17 @@ document.addEventListener("DOMContentLoaded", function () {
 
   initTabs();
   if (loadGlobalState().syncScrollingEnabled === false) toggleSyncScrolling();
-  initEditorGeometry();
-  refreshEditorWidth();
   updateMobileStats();
   updateFindHighlights();
   syncHighlightScroll();
 
+  // Defer DOM geometry measurement until after FCP/LCP critical paint path
+  setTimeout(function() {
+    initEditorGeometry();
+    refreshEditorWidth();
+    scheduleLineNumberUpdate();
+  }, 100);
+
   // Initialize resizer - Story 1.3
   initResizer();
   function constrainFloatingPanelPosition() {
@@ -5105,14 +5110,18 @@ document.addEventListener("DOMContentLoaded", function () {
     lastFloatingTop = constrainedTop;
   }
 
+  let resizeLayoutTimeout = null;
   window.addEventListener('resize', () => {
-    initEditorGeometry();
-    refreshEditorWidth();
-    scheduleLineNumberUpdate();
-    if (window.innerWidth < 1080 && isFrDocked && isFindModalOpen) {
-      toggleFrDockMode(true);
-    }
-    constrainFloatingPanelPosition();
+    clearTimeout(resizeLayoutTimeout);
+    resizeLayoutTimeout = setTimeout(function() {
+      initEditorGeometry();
+      refreshEditorWidth();
+      scheduleLineNumberUpdate();
+      if (window.innerWidth < 1080 && isFrDocked && isFindModalOpen) {
+        toggleFrDockMode(true);
+      }
+      constrainFloatingPanelPosition();
+    }, 100);
   });
 
   // View Mode Button Event Listeners - Story 1.1

styles.css

@@ -1890,6 +1890,46 @@ a:focus {
   position: relative;
 }
 
+/* Touch Hitbox Expansion for Tab Menu Button */
+.tab-menu-btn::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 48px;
+  height: 48px;
+}
+
+/* Touch-optimized styling for coarser pointers (e.g., smartphones & tablets) */
+@media (pointer: coarse) {
+  .tab-bar {
+    height: 40px !important;
+  }
+  .tab-item {
+    height: 40px !important;
+    font-size: 14px !important;
+    padding: 0 10px 0 12px !important;
+    gap: 8px !important;
+  }
+  .tab-new-btn {
+    width: 32px !important;
+    height: 32px !important;
+    font-size: 18px !important;
+  }
+  .tab-menu-btn {
+    width: 30px !important;
+    height: 30px !important;
+    font-size: 18px !important;
+  }
+  .tab-close-btn {
+    width: 20px !important;
+    height: 20px !important;
+    font-size: 13px !important;
+    opacity: 0.8 !important;
+  }
+}
+
 .tab-item:hover .tab-menu-btn,
 .tab-item.active .tab-menu-btn {
   opacity: 0.65;