diff --git a/renderer/index.html b/renderer/index.html index a15bda2..4add6e3 100644 --- a/renderer/index.html +++ b/renderer/index.html @@ -84,13 +84,6 @@ - - -
@@ -108,6 +101,13 @@
+
+ +
@@ -144,6 +144,7 @@
+
diff --git a/renderer/renderer.js b/renderer/renderer.js index 5be30f0..60e79c5 100644 --- a/renderer/renderer.js +++ b/renderer/renderer.js @@ -17,6 +17,7 @@ const editorPanel = document.getElementById('editor-panel'); const previewPanel = document.getElementById('preview-panel'); const mainContent = document.getElementById('main-content'); + const contentWrapper = document.getElementById('content-wrapper'); const tabList = document.getElementById('tab-list'); // Sidebar @@ -822,7 +823,7 @@ document.addEventListener('mousemove', (e) => { if (!isResizing) return; - const rect = mainContent.getBoundingClientRect(); + const rect = contentWrapper.getBoundingClientRect(); const pct = Math.max(20, Math.min(80, ((e.clientX - rect.left) / rect.width) * 100)); editorPanel.style.flex = `0 0 ${pct}%`; previewPanel.style.flex = `0 0 ${100 - pct}%`; diff --git a/renderer/style.css b/renderer/style.css index bda7d05..884d229 100644 --- a/renderer/style.css +++ b/renderer/style.css @@ -308,11 +308,20 @@ html, body { #main-content { flex: 1; display: flex; + flex-direction: column; overflow: hidden; position: relative; min-width: 0; } +#content-wrapper { + flex: 1; + display: flex; + flex-direction: row; + overflow: hidden; + min-height: 0; +} + /* ===== Editor Panel ===== */ #editor-panel { flex: 1;