diff --git a/admin_ui/index.html b/admin_ui/index.html
index 561bb17..c1e1b1d 100644
--- a/admin_ui/index.html
+++ b/admin_ui/index.html
@@ -61,7 +61,7 @@
min-width: 0;
}
.editor {
- flex: 1;
+ flex: 1 1 50%;
display: flex;
flex-direction: column;
padding: 0.75rem;
@@ -114,7 +114,7 @@
}
.preview {
- width: 45%;
+ flex: 1 1 50%;
min-width: 320px;
display: flex;
flex-direction: column;
@@ -163,6 +163,15 @@
color: #e5e7eb;
font-size: 0.75rem;
}
+ .preview-expand {
+ padding: 0.15rem 0.45rem;
+ border-radius: 999px;
+ border: 1px solid #4b5563;
+ background: #020617;
+ color: #e5e7eb;
+ font-size: 0.75rem;
+ cursor: pointer;
+ }
.preview-inner {
flex: 1;
@@ -192,6 +201,37 @@
width: 1200px; /* typical desktop layout */
max-width: 100%;
}
+
+ /* Adjust column ratios per mode */
+ .device-mobile .editor {
+ flex-basis: 50%;
+ }
+ .device-mobile .preview {
+ flex-basis: 50%;
+ }
+
+ .device-tablet .editor {
+ flex-basis: 40%;
+ }
+ .device-tablet .preview {
+ flex-basis: 60%;
+ }
+
+ .device-desktop .editor {
+ flex-basis: 35%;
+ }
+ .device-desktop .preview {
+ flex-basis: 65%;
+ }
+
+ /* Full-width preview mode: hide editor, preview takes all */
+ .preview-full .editor {
+ display: none;
+ }
+ .preview-full .preview {
+ flex-basis: 100%;
+ width: 100%;
+ }
@@ -219,6 +259,7 @@
โ
+
@@ -240,6 +281,7 @@
const statusEl = document.getElementById('status');
const deviceButtons = document.querySelectorAll('.device-btn');
const openPreviewEl = document.getElementById('open-preview');
+ const expandPreviewEl = document.getElementById('expand-preview');
let currentSlug = null;
@@ -258,6 +300,10 @@
});
});
+ expandPreviewEl.addEventListener('click', () => {
+ document.body.classList.toggle('preview-full');
+ });
+
async function loadPages() {
const res = await fetch(API_BASE + '/api/pages');
const pages = await res.json();