Merge pull request #390 from JDProfresh/fix/phone-breakpoint-480

fix(mobile): raise the phone breakpoint from 430px to 600px

src/web/public/index.html

@@ -686,7 +686,7 @@
           <button class="btn-toolbar btn-shell" onclick="app.runShell()" title="Run Shell">
             Run Shell
           </button>
-          <!-- Phone-only: replaces the Shell button on ≤430px (Shell moves into the Run
+          <!-- Phone-only: replaces the Shell button under 600px (Shell moves into the Run
                dropdown there). Sends a bare Enter to the active session, the complement
                to the accessory bar's Esc. Hidden everywhere else — see styles.css. -->
           <button class="btn-toolbar btn-enter" onclick="app.sendEnterKey()" title="Send Enter">

src/web/public/mobile-handlers.js

@@ -85,20 +85,20 @@ const MobileDetection = {
     return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
   },
 
-  /** Check if screen is small (phone-sized, <430px) */
+  /** Check if screen is small (phone-sized, <600px) */
   isSmallScreen() {
-    return window.innerWidth < 430;
+    return window.innerWidth < 600;
   },
 
-  /** Check if screen is medium (tablet-sized, 430-768px) */
+  /** Check if screen is medium (tablet-sized, 600-768px) */
   isMediumScreen() {
-    return window.innerWidth >= 430 && window.innerWidth < 768;
+    return window.innerWidth >= 600 && window.innerWidth < 768;
   },
 
   /** Get device type based on screen width */
   getDeviceType() {
     const width = window.innerWidth;
-    if (width < 430) return 'mobile';
+    if (width < 600) return 'mobile';
     if (width < 768) return 'tablet';
     return 'desktop';
   },

src/web/public/mobile-overview.js

@@ -12,7 +12,7 @@
  * the SAME comparator the desktop rail uses: blocked longest-first, then
  * running longest-first, then quiet most-recently-quiet first.
  *
- * PHONE ONLY. The gate is `shouldUseMobileOverview()` (viewport < 430px, not a
+ * PHONE ONLY. The gate is `shouldUseMobileOverview()` (viewport < 600px, not a
  * popped-out solo window, per-device setting on). Tablet and desktop keep the
  * welcome overlay untouched. The container ships with the `hidden` attribute and
  * only this module removes it, so desktop (which never loads mobile.css) cannot
@@ -38,7 +38,7 @@
  */
 
 /** Viewport width that counts as a phone. Matches the mobile.css phone block. */
-const MOBILE_OVERVIEW_PHONE_QUERY = '(max-width: 430px)';
+const MOBILE_OVERVIEW_PHONE_QUERY = '(max-width: 599px)';
 
 /** How many past conversations show before the "Show all" toggle. */
 const MOBILE_OVERVIEW_PAST_LIMIT = 8;

src/web/public/mobile.css

@@ -46,9 +46,9 @@ html.mobile-init .file-browser-panel {
 }
 
 /* ============================================================================
-   Tablet Breakpoint (430px - 768px)
+   Tablet Breakpoint (600px - 768px)
    ============================================================================ */
-@media (max-width: 768px) and (min-width: 430px) {
+@media (max-width: 768px) and (min-width: 600px) {
   /* Compact header for tablet - fixed at top, includes safe area padding */
   .header {
     position: fixed;
@@ -303,12 +303,12 @@ html.mobile-init .file-browser-panel {
   }
 
   /* Show desktop voice button on tablet (hidden by max-width:1023px in styles.css,
-     mobile .btn-voice-mobile only shows at <430px) */
+     mobile .btn-voice-mobile only shows at <600px) */
   .toolbar-center .btn-toolbar.btn-voice {
     display: flex !important;
   }
 
-  /* Toolbar — use desktop-style sizing on tablet (plenty of room at 430-768px) */
+  /* Toolbar — use desktop-style sizing on tablet (plenty of room at 600-768px) */
   .toolbar {
     padding: 0 0.5rem;
     gap: 0.5rem;
@@ -333,9 +333,9 @@ html.mobile-init .file-browser-panel {
 }
 
 /* ============================================================================
-   Phone Breakpoint (<430px)
+   Phone Breakpoint (<600px)
    ============================================================================ */
-@media (max-width: 430px) {
+@media (max-width: 599px) {
   /* Phones get a 44px header, up from 36px. Every header control is a touch
      target and 44px is the floor for one; the brand "C" that gets you home is
      the one that matters most. Redefined as the TOKEN rather than a literal so
@@ -499,7 +499,7 @@ html.mobile-init .file-browser-panel {
 
   /* Exception to the 26px shrink above: in sidebar layout this button is the
      ONLY way to open the session list — the strip it replaced is gone. A 26px
-     target is below --touch-target-min (44px), which the 430-768px block
+     target is below --touch-target-min (44px), which the 600-768px block
      already enforces for every other header button. */
   html[data-session-list='sidebar'] #sidebarToggleBtn {
     width: 44px;
@@ -1170,7 +1170,7 @@ html.mobile-init .file-browser-panel {
     }
   }
 
-  @media (max-width: 430px) {
+  @media (max-width: 599px) {
     .btn-case-settings-mobile {
       display: none !important;
     }
@@ -3147,7 +3147,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
 
 /* Keyboard accessory bar + paste overlay base styles moved to styles.css
    (always loaded — covers iPad landscape where mobile.css doesn't load).
-   Phone-specific overrides remain in @media (max-width: 430px) above. */
+   Phone-specific overrides remain in @media (max-width: 599px) above. */
 
 /* ============================================================================
    iOS Safari Specific Fixes
@@ -3190,7 +3190,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
   }
 }
 
-@media (max-width: 430px) {
+@media (max-width: 599px) {
   /* Attachment history (COD-18): full-screen sheet on phones */
   .attachment-history-drawer {
     top: 0;
@@ -3240,7 +3240,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
    already reserves that space), so it needs the same safe-area padding as the
    other banners. The overlay is fixed and handles its own insets.
    ============================================================================ */
-@media (max-width: 430px) {
+@media (max-width: 599px) {
   .offline-banner {
     padding: 0.4rem 0.5rem;
     padding-left: calc(0.5rem + var(--safe-area-left));
@@ -3730,7 +3730,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
    This whole file is served with media="(max-width: 1023px)", so these
    top-level rules cover the entire handheld range — deliberately NOT wrapped in
    a nested @media, because the two compact `.session-tabs` blocks above live in
-   `max-width: 768px` and `max-width: 430px` and would leave 769-1023px
+   `max-width: 768px` and `max-width: 599px` and would leave 769-1023px
    unhandled.
 
    Placement at the END of the file is load-bearing: the compact strip blocks at

src/web/public/session-ui.js

@@ -2526,7 +2526,7 @@ Object.assign(CodemanApp.prototype, {
       if (!input._mobileScrollWired) {
         input._mobileScrollWired = true;
         input.addEventListener('focus', () => {
-          if (window.innerWidth <= 430) {
+          if (window.innerWidth < 600) {
             setTimeout(() => input.scrollIntoView({ behavior: 'smooth', block: 'center' }), 300);
           }
         });

src/web/public/settings-ui.js

@@ -402,7 +402,7 @@ Object.assign(CodemanApp.prototype, {
     document.getElementById('appSettingsShowMultiMonitorButton').checked = settings.showMultiMonitorButton ?? defaults.showMultiMonitorButton ?? false;
     document.getElementById('appSettingsShowPlanUsageLimits').checked = this.planUsageChipEnabled(settings);
     document.getElementById('appSettingsShowRedrawButton').checked = settings.showRedrawButton ?? defaults.showRedrawButton ?? false;
-    // Phone overview home screen: only meaningful under 430px, so the row is
+    // Phone overview home screen: only meaningful under 600px, so the row is
     // hidden elsewhere rather than offering a toggle that changes nothing.
     // Spawn lineage lines: desktop-only (the overlay sits UNDER the fixed mobile
     // header), so the row is hidden elsewhere rather than offering a toggle that

src/web/public/styles.css

@@ -5270,7 +5270,7 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
 .run-mode-dot.shell { background: #94a3b8; }
 
 /* Phone-only Enter button (see index.html). Hidden by default at every width;
-   mobile.css turns it on inside @media (max-width: 430px), where it takes over
+   mobile.css turns it on inside @media (max-width: 599px), where it takes over
    the slot the Shell button occupies on wider screens. */
 .btn-toolbar.btn-enter {
   display: none;
@@ -11930,7 +11930,7 @@ kbd {
 }
 /* Footer row: the buttons are btn-toolbar (display: flex, block-level), so
    without this rule the four of them stack vertically. Mirrors the
-   runSummaryModal footer; the ≤430px block in mobile.css adds wrapping. */
+   runSummaryModal footer; the phone block (under 600px) in mobile.css adds wrapping. */
 .readmymind-modal .modal-footer {
   display: flex;
   justify-content: flex-end;
@@ -13307,7 +13307,7 @@ body.touch-device.cjk-input-visible .main {
    Keyboard Accessory Bar
    Base styles in styles.css (always loaded) so iPad landscape (≥1024px,
    where mobile.css doesn't load) still gets dark styling. Phone overrides
-   remain in mobile.css @media (max-width: 430px).
+   remain in mobile.css @media (max-width: 599px).
    ═══════════════════════════════════════════════════════════════ */
 
 .keyboard-accessory-bar {

src/web/public/terminal-ui.js

@@ -5082,7 +5082,7 @@ Object.assign(CodemanApp.prototype, {
     const viewportType =
       typeof MobileDetection !== 'undefined' && MobileDetection.getDeviceType
         ? MobileDetection.getDeviceType()
-        : window.innerWidth < 430
+        : window.innerWidth < 600
           ? 'mobile'
           : window.innerWidth < 768
             ? 'tablet'