claude-dev-server 1.2.1 → 1.2.3

package/dist/assets/dev.html

@@ -158,10 +158,10 @@ html, body {
   font-family: monospace;
   white-space: nowrap;
 }
-/* Portrait mode */
+/* Portrait mode - dev on top, ttyd on bottom */
 @media (orientation: portrait) {
   .claude-dev-server-container {
-    flex-direction: column;
+    flex-direction: column-reverse;
   }
   .claude-dev-server-divider {
     width: 100%;
@@ -172,9 +172,16 @@ html, body {
     width: 100%;
     min-width: unset;
     max-width: unset;
-    height: 50%;
+    height: 70%;
     min-height: 200px;
   }
+  .claude-dev-server-left {
+    width: 100%;
+    min-width: unset;
+    max-width: unset;
+    height: 30%;
+    min-height: 150px;
+  }
 }
   </style>
 </head>
@@ -184,6 +191,18 @@ html, body {
     const originalPath = '__CLAUDE_ORIGINAL_PATH__';
     const iframeSrc = '__CLAUDE_IFRAME_SRC__';
 
+    // Prevent dev.html from being loaded inside an iframe (nested loading)
+    // If we detect we're in an iframe, redirect to the actual dev server content
+    (function preventNestedLoading() {
+      if (window.top !== window.self) {
+        // We're inside an iframe - this should not happen for dev.html
+        // Redirect this iframe to the actual dev server content
+        console.log('[Claude Dev Server Wrapper] Detected nested iframe loading, redirecting to:', iframeSrc);
+        window.location.href = iframeSrc;
+        return;
+      }
+    })();
+
     const urlParams = new URLSearchParams(window.location.search);
     const wsPort = urlParams.get('wsPort');
 
@@ -484,13 +503,46 @@ html, body {
     }
 
     function setupDraggable(divider) {
-      let startX = 0;
-      let startWidth = 0;
-      let containerWidth = 0;
+      let startValue = 0;
+      let startSize = 0;
+      let containerSize = 0;
+      let isPortrait = window.matchMedia('(orientation: portrait)').matches;
 
       divider.addEventListener('mousedown', startDrag);
       divider.addEventListener('touchstart', startDrag);
 
+      // Listen for orientation changes
+      const orientationQuery = window.matchMedia('(orientation: portrait)');
+      orientationQuery.addEventListener('change', (e) => {
+        isPortrait = e.matches;
+
+        // Only need to adjust leftPanel, rightPanel stays flex: 1
+        const leftPanelEl = document.querySelector('.claude-dev-server-left');
+
+        if (e.matches) {
+          // Switching to portrait: ensure leftPanel width is 100%
+          if (leftPanelEl) {
+            leftPanelEl.style.width = '100%';
+          }
+        } else {
+          // Switching to landscape: clear inline styles
+          if (leftPanelEl) {
+            leftPanelEl.style.width = '';
+            leftPanelEl.style.height = '';
+          }
+        }
+
+        // Trigger resize events in iframes to notify their content
+        setTimeout(() => {
+          const iframes = document.querySelectorAll('iframe');
+          iframes.forEach(iframe => {
+            if (iframe.contentWindow) {
+              iframe.contentWindow.dispatchEvent(new Event('resize'));
+            }
+          });
+        }, 100);
+      });
+
       function startDrag(e) {
         isDragging = true;
         divider.classList.add('dragging');
@@ -499,14 +551,18 @@ html, body {
         iframes.forEach(iframe => iframe.style.pointerEvents = 'none');
 
         const clientX = e.touches ? e.touches[0].clientX : e.clientX;
-        startX = clientX;
+        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+
+        // Use X for landscape (horizontal drag), Y for portrait (vertical drag)
+        startValue = isPortrait ? clientY : clientX;
 
         const container = document.querySelector('.claude-dev-server-container');
         const leftPanelEl = document.querySelector('.claude-dev-server-left');
 
         if (container && leftPanelEl) {
-          containerWidth = container.offsetWidth;
-          startWidth = leftPanelEl.offsetWidth;
+          containerSize = isPortrait ? container.offsetHeight : container.offsetWidth;
+          // Always measure leftPanel
+          startSize = isPortrait ? leftPanelEl.offsetHeight : leftPanelEl.offsetWidth;
         }
 
         e.preventDefault();
@@ -521,17 +577,38 @@ html, body {
         }
 
         const clientX = e.touches ? e.touches[0].clientX : e.clientX;
-        const deltaX = clientX - startX;
+        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
 
-        let newWidth = startWidth + deltaX;
-        let percentage = (newWidth / containerWidth) * 100;
+        // Use appropriate axis based on orientation
+        const currentValue = isPortrait ? clientY : clientX;
+        // Calculate delta: dragging down/right = positive, dragging up/left = negative
+        let delta = currentValue - startValue;
+
+        // In portrait with column-reverse: dragging down (positive) should make leftPanel smaller
+        if (isPortrait) {
+          delta = -delta;
+        }
+
+        let newSize = startSize + delta;
+        let percentage = (newSize / containerSize) * 100;
         const clamped = Math.max(20, Math.min(80, percentage));
 
         const leftPanelEl = document.querySelector('.claude-dev-server-left');
+
         if (leftPanelEl) {
-          leftPanelEl.style.flex = 'none';
-          leftPanelEl.style.width = clamped + '%';
+          if (isPortrait) {
+            // Portrait: adjust leftPanel (bottom) height, width is 100%
+            leftPanelEl.style.flex = 'none';
+            leftPanelEl.style.height = clamped + '%';
+            leftPanelEl.style.width = '100%';
+          } else {
+            // Landscape: adjust leftPanel (left) width
+            leftPanelEl.style.flex = 'none';
+            leftPanelEl.style.width = clamped + '%';
+          }
         }
+
+        // rightPanel stays flex: 1, no modifications needed
       }
 
       function endDrag() {