claude-dev-server 1.2.0 → 1.2.2

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>
@@ -484,13 +491,19 @@ 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
+      window.matchMedia('(orientation: portrait)').addEventListener('change', (e) => {
+        isPortrait = e.matches;
+      });
+
       function startDrag(e) {
         isDragging = true;
         divider.classList.add('dragging');
@@ -499,14 +512,17 @@ 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;
+          startSize = isPortrait ? leftPanelEl.offsetHeight : leftPanelEl.offsetWidth;
         }
 
         e.preventDefault();
@@ -521,16 +537,28 @@ 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;
+        const delta = currentValue - startValue;
+
+        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 height
+            leftPanelEl.style.height = clamped + '%';
+            leftPanelEl.style.width = '';
+          } else {
+            // Landscape: adjust width
+            leftPanelEl.style.width = clamped + '%';
+            leftPanelEl.style.height = '';
+          }
         }
       }