From 55881739ac338c2577f1d7804d7ab1fe7a7419cd Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 11:02:18 +0100
Subject: [PATCH] feat: adjust iframe layout when editor panel opens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When editor panel tab-content is open, the preview iframe now scales down (0.7) and repositions with appropriate margins to provide optimal viewing alongside the editor panel. This creates a smooth transition between full-width preview and side-by-side editing mode.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.vue                           | 26 ++++++++++++++++++----
 src/components/editor/EditorPanel.vue | 31 ++++++++++++++++-----------
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c0cf083..46e2de4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
 import PagedJsWrapper from './components/PagedJsWrapper.vue';
 import EditorPanel from './components/editor/EditorPanel.vue';
 import ElementPopup from './components/ElementPopup.vue';
-import { onMounted, ref, watch, computed } from 'vue';
+import { onMounted, ref, watch, computed, provide } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
 import Coloris from '@melloware/coloris';
 
@@ -10,6 +10,9 @@ const stylesheetStore = useStylesheetStore();
 const previewFrame1 = ref(null);
 const previewFrame2 = ref(null);
 const elementPopup = ref(null);
+const activeTab = ref('');
+
+provide('activeTab', activeTab);
 
 let savedScrollPercentage = 0;
 const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
@@ -133,8 +136,16 @@ onMounted(() => renderPreview(true));
 
   <EditorPanel />
 
-  <iframe ref="previewFrame1" class="preview-frame"></iframe>
-  <iframe ref="previewFrame2" class="preview-frame"></iframe>
+  <iframe
+    ref="previewFrame1"
+    class="preview-frame"
+    :class="{ shifted: activeTab.length > 0 }"
+  ></iframe>
+  <iframe
+    ref="previewFrame2"
+    class="preview-frame"
+    :class="{ shifted: activeTab.length > 0 }"
+  ></iframe>
 
   <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
 </template>
@@ -147,7 +158,14 @@ onMounted(() => renderPreview(true));
   width: 100vw;
   height: 100vh;
   border: none;
-  transition: opacity 0.1s ease-in-out;
+  transition: opacity 0.1s ease-in-out, margin-left ease-in-out var(--curve),
+    transform ease-in-out var(--curve), height ease-in-out var(--curve);
+}
+
+.preview-frame.shifted {
+  margin-left: 19rem;
+  transform: scale(0.7) translateY(-30vh);
+  height: 142vh;
 }
 
 .preview-frame:nth-of-type(1) {
diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue
index 988a515..7741e0c 100644
--- a/src/components/editor/EditorPanel.vue
+++ b/src/components/editor/EditorPanel.vue
@@ -27,7 +27,7 @@
       </button>
     </nav>
 
-    <div class="tab-content">
+    <div class="tab-content" :class="{ open: activeTab.length > 0 }">
       <div v-if="activeTab === 'document'" class="tab-panel">
         <PageSettings />
         <TextSettings />
@@ -45,21 +45,16 @@
 </template>
 
 <script setup>
-import { ref, provide } from 'vue';
+import { inject } from 'vue';
 import PageSettings from './PageSettings.vue';
 import TextSettings from './TextSettings.vue';
 import StylesheetViewer from '../StylesheetViewer.vue';
 
-// Tab management
-const activeTab = ref('document');
-
-// Provide activeTab to child components
-provide('activeTab', activeTab);
+const activeTab = inject('activeTab');
 </script>
 
 <style lang="scss" scoped>
 #editor-panel {
-  padding: 1rem;
   position: fixed;
   top: 0;
   left: 0;
@@ -68,21 +63,33 @@ provide('activeTab', activeTab);
   display: flex;
   flex-direction: column;
   z-index: 2;
-
-  background-color: var(--color-panel-bg);
-  box-shadow: -5px 0px 12px;
 }
 
 nav {
-  margin-bottom: 2rem;
+  position: absolute;
+  margin: 1rem 0 0 1rem;
 
   display: flex;
   gap: 0.5rem;
+  z-index: 2;
 }
 
 .tab-content {
   flex: 1;
   overflow: hidden;
+  position: relative;
+  left: -35rem;
+
+  padding: 4rem 1rem 1rem 1rem;
+
+  background-color: var(--color-panel-bg);
+  box-shadow: -5px 0px 12px;
+
+  transition: left ease-in-out var(--curve);
+}
+
+.tab-content.open {
+  left: 0rem;
 }
 
 .tab-panel {