From b2613b21064e9e8654ffb90848c9e708e8d9f4ac Mon Sep 17 00:00:00 2001
From: Gr33nbl00d <G_Rehm@ich-habe-fertig.com>
Date: Wed, 23 Sep 2026 20:13:25 +0200
Subject: [PATCH 1/2] fix(ui): respect iOS safe areas, screen height and
 landscape layout

---
 frontend/src/features/notes/ui/panel.js |  2 +-
 static/css/00-tokens.css                | 27 ++++++++-
 static/css/01-agent-chat.css            | 76 +++++++++++++++++--------
 static/css/02-compare.css               | 20 ++++---
 static/css/03-agent-chat.css            |  6 +-
 static/css/05-documents.css             |  4 +-
 static/css/06-admin-settings.css        | 26 +++++----
 static/css/07-documents.css             | 44 +++++++-------
 static/css/13-image-editor.css          |  2 +-
 static/css/14-email.css                 |  7 ++-
 static/css/17-research.css              |  4 +-
 static/index.html                       |  7 +++
 static/js/chat.js                       |  7 ---
 static/js/emailLibrary/index.js         |  9 +--
 static/js/emailLibrary/reader.js        |  3 +-
 static/js/features/notes/ui/panel.js    |  2 +-
 static/js/init.js                       | 25 ++++++++
 static/js/modalSnap.js                  | 52 ++++++++++++++---
 static/js/sidebar-layout.js             |  6 +-
 static/js/windowResize.js               |  9 ++-
 20 files changed, 243 insertions(+), 95 deletions(-)

diff --git a/frontend/src/features/notes/ui/panel.js b/frontend/src/features/notes/ui/panel.js
index 0a6031233..2265897c0 100644
--- a/frontend/src/features/notes/ui/panel.js
+++ b/frontend/src/features/notes/ui/panel.js
@@ -190,7 +190,7 @@ export function createPanel({
     // which left it as a side panel squeezing the chat).
     if (window.innerWidth <= 768) {
       pane.style.position = 'fixed';
-      pane.style.inset = '0';
+      pane.style.inset = 'var(--sheet-top) 0 0';
       pane.style.width = '100%';
       pane.style.maxWidth = '100%';
       pane.style.zIndex = '170';
diff --git a/static/css/00-tokens.css b/static/css/00-tokens.css
index e502f7670..1105ba70c 100644
--- a/static/css/00-tokens.css
+++ b/static/css/00-tokens.css
@@ -82,6 +82,28 @@
   /* Warm accent — used by the Goals/Today UI in Notes. Lives as a token so
      themes can override without touching the goal CSS. */
   --accent-warm: #d19a66;
+
+  /* Device safe areas (notch, Dynamic Island, home indicator) */
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+  /* Full-height sheets start clear of the status-bar blur; flush when there is no inset */
+  --sheet-top: calc(var(--safe-top) + min(var(--safe-top), 24px));
+  --app-height: 100dvh;
+}
+/* The on-screen keyboard covers the home indicator */
+:root.keyboard-open { --safe-bottom: 0px; }
+/* iOS standalone web apps report dvh (and the viewport) short by the status bar
+   height; lvh still matches the screen. Body becomes the containing block for
+   fixed elements so overlays reach the real bottom edge as well. Containment
+   stops body's background reaching the canvas, so html paints it instead. */
+@media (display-mode: standalone) {
+  @supports (-webkit-touch-callout: none) {
+    :root { --app-height: 100lvh; }
+    html { height: var(--app-height); background-color: var(--bg); }
+    body { contain: layout; overflow: clip; }
+  }
 }
 
 :root.light {
@@ -121,9 +143,12 @@ body {
   font-family: var(--font-family, 'Fira Code', monospace);
   display: flex;
   height: 100%;
-  height: 100dvh; /* dynamic viewport height — adapts when mobile keyboard opens */
+  height: var(--app-height);
+  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
   overflow: hidden;
 }
+/* iOS keeps the full height when the keyboard opens; size the shell to what is visible */
+:root.keyboard-open body { height: var(--keyboard-viewport-height, var(--app-height)); }
 
 /* Self-hosted Fira Code font */
 @font-face { font-family: 'Fira Code'; font-weight: 300; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Light.woff2') format('woff2'); }
diff --git a/static/css/01-agent-chat.css b/static/css/01-agent-chat.css
index 7db3115a6..506d04e81 100644
--- a/static/css/01-agent-chat.css
+++ b/static/css/01-agent-chat.css
@@ -562,8 +562,8 @@ body.bg-pattern-ascii-fireflies {
     /* Fixed hamburger — always visible, toggles sidebar */
     .hamburger-btn {
       position: fixed;
-      top: 12px;
-      left: 9px;
+      top: calc(12px + var(--safe-top));
+      left: calc(9px + var(--safe-left));
       right: auto;
       z-index: 210;
       width: 30px;
@@ -583,7 +583,7 @@ body.bg-pattern-ascii-fireflies {
     }
     body.hamburger-right .hamburger-btn {
       left: auto;
-      right: 9px;
+      right: calc(9px + var(--safe-right));
     }
     .mobile-new-chat-btn {
       display: none;
@@ -655,6 +655,25 @@ body.bg-pattern-ascii-fireflies {
       border-right: none;
       border-left: 1px solid var(--border);
     }
+    /* Edge columns bleed into the safe-area strips instead of leaving bare background */
+    @media (min-width: 769px) {
+      .sidebar:not(.hidden) {
+        margin-bottom: calc(-1 * var(--safe-bottom));
+        padding-bottom: var(--safe-bottom);
+      }
+      .sidebar:not(.hidden):not(.right-side) {
+        margin-left: calc(-1 * var(--safe-left));
+        padding-left: var(--safe-left);
+      }
+      .sidebar.right-side:not(.hidden) {
+        margin-right: calc(-1 * var(--safe-right));
+        padding-right: var(--safe-right);
+      }
+      .icon-rail {
+        margin-bottom: calc(-1 * var(--safe-bottom));
+        padding-bottom: calc(8px + var(--safe-bottom));
+      }
+    }
     .icon-rail-divider {
       width: 24px;
       height: 1px;
@@ -4800,7 +4819,7 @@ body.bg-pattern-ascii-fireflies {
 
     .toast {
       position:fixed;
-      top: 16px; right: 16px;
+      top: calc(16px + var(--safe-top)); right: calc(16px + var(--safe-right));
       left: auto; bottom: auto;
       background:var(--panel); color:var(--fg);
       border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
@@ -4984,8 +5003,8 @@ body.bg-pattern-ascii-fireflies {
     .toast.toast-panel-offset.exiting { transform: translateX(-120%); }
     @media (max-width: 768px) {
       .toast {
-        top: 12px;
-        right: 12px;
+        top: calc(12px + var(--safe-top));
+        right: calc(12px + var(--safe-right));
         max-width: calc(100vw - 24px);
         /* Receive touches so the swipe-to-dismiss gesture works (desktop keeps
            pointer-events:none so the toast never blocks clicks). Horizontal pan
@@ -5109,6 +5128,7 @@ body.bg-pattern-ascii-fireflies {
            --sidebar-bg. */
         background: var(--sidebar-bg, var(--panel)) !important;
         backdrop-filter: none !important;
+        padding: var(--safe-top) 0 var(--safe-bottom) var(--safe-left);
       }
       .sidebar.hidden {
         width: 80% !important;
@@ -5122,6 +5142,8 @@ body.bg-pattern-ascii-fireflies {
       .sidebar.right-side {
         left: auto; right: 0;
         box-shadow: -4px 0 20px rgba(0,0,0,0.5);
+        padding-left: 0;
+        padding-right: var(--safe-right);
       }
       html.ody-sidebar-off .sidebar,
       html.ody-mobile-startup-sidebar-hidden .sidebar {
@@ -5315,9 +5337,9 @@ body.bg-pattern-ascii-fireflies {
       .hamburger-btn {
         width: 44px;
         height: 44px;
-        top: 6px;
+        top: calc(6px + var(--safe-top));
         left: auto !important;
-        right: 4px !important;
+        right: calc(4px + var(--safe-right)) !important;
         -webkit-tap-highlight-color: transparent;
       }
       .hamburger-btn:hover,
@@ -5330,8 +5352,8 @@ body.bg-pattern-ascii-fireflies {
       .mobile-new-chat-btn {
         display: flex;
         position: fixed;
-        top: 12px;
-        left: 8px;
+        top: calc(12px + var(--safe-top));
+        left: calc(8px + var(--safe-left));
         z-index: 210;
         width: 32px;
         height: 32px;
@@ -5400,10 +5422,6 @@ body.bg-pattern-ascii-fireflies {
         padding: 6px !important;
         border-radius: 12px !important;
       }
-      /* Safe area padding for notched devices */
-      .chat-input-bar {
-        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
-      }
       /* Mode toggle — larger touch targets */
       .mode-toggle {
         height: 34px;
@@ -5447,15 +5465,15 @@ body.bg-pattern-ascii-fireflies {
            URL-bar show/hide. Order matters: later same-specificity rule
            wins, so dvh must come after vh. */
         max-height: 100vh !important;
-        max-height: 100dvh !important;
+        max-height: calc(var(--app-height) - var(--sheet-top)) !important;
         height: 100vh;
-        height: 100dvh;
+        height: calc(var(--app-height) - var(--sheet-top));
         border-radius: 14px 14px 0 0 !important;
         border: none !important;
         border-top: 1px solid var(--border) !important;
         box-shadow: none !important;
         padding: 6px !important;
-        padding-bottom: env(safe-area-inset-bottom, 6px) !important;
+        padding-bottom: var(--safe-bottom) !important;
         margin: 0 !important;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
@@ -5536,7 +5554,7 @@ body.bg-pattern-ascii-fireflies {
            (against the flex-sized grid) as a definite height, so grid/flex
            children never filled. An explicit px height is unambiguous. */
         margin: 0 !important;
-        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
+        padding: 8px 10px calc(8px + var(--safe-bottom)) !important;
         background: var(--bg) !important;
         /* Flex column. JS (_fillSkillCardHeight) sets EXPLICIT px heights on
            the preview + <pre>; in a flex column an explicit-height item
@@ -5615,7 +5633,7 @@ body.bg-pattern-ascii-fireflies {
       /* Small bottom padding now that the load-more no longer steals space —
          the action bar sits low, just clearing the home-indicator safe area. */
       #doclib-modal [data-doclib-panel="documents"] .doclib-card.doclib-card-expanded .doclib-card-preview {
-        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
+        padding-bottom: calc(18px + var(--safe-bottom)) !important;
       }
       #doclib-modal .doclib-card.doclib-card-expanded .doclib-card-preview pre,
       #doclib-modal .doclib-card.doclib-card-expanded .doclib-card-preview .doclib-card-pdf-frame,
@@ -6127,6 +6145,7 @@ body.bg-pattern-ascii-fireflies {
       z-index:250;
       backdrop-filter:none;
       pointer-events:none;
+      padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
     }
     /* Cookbook always sits above Gallery so the "Serve a model in
        Cookbook…" flow (and any other "open Cookbook from inside another
@@ -6160,6 +6179,17 @@ body.bg-pattern-ascii-fireflies {
            centered window glides instead of jumping when the nav toggles. */
         transition: left 0.25s ease, width 0.25s ease;
       }
+      /* A right-side nav reserves its width on the right instead */
+      body.hamburger-right :is(#calendar-modal, #gallery-modal, #tasks-modal, #memory-modal, #doclib-modal,
+        #compare-model-overlay, #research-overlay, #theme-modal, #settings-modal, #email-lib-modal) {
+        left: 0;
+      }
+      /* Windows never grow past the area between the nav and the safe areas */
+      :is(#calendar-modal, #gallery-modal, #tasks-modal, #memory-modal, #doclib-modal,
+        #compare-model-overlay, #research-overlay, #theme-modal, #settings-modal, #email-lib-modal)
+        > :is(.modal-content, .memory-modal-content, .settings-modal-content, .doclib-modal-content) {
+        max-width: calc(100vw - var(--safe-left) - var(--safe-right) - var(--icon-rail-w, 48px) - var(--sidebar-w, 0px));
+      }
     }
     .modal-content {
       background:var(--panel);
@@ -6689,8 +6719,8 @@ body.bg-pattern-ascii-fireflies {
     /* Agent indicator */
     #agent-indicator {
       position: fixed;
-      top: 20px;
-      right: 20px;
+      top: calc(20px + var(--safe-top));
+      right: calc(20px + var(--safe-right));
       background: var(--bg);
       color: var(--fg);
       border: 1px solid var(--border);
@@ -7016,7 +7046,7 @@ body.bg-pattern-ascii-fireflies {
     #compare-model-overlay .modal-content {
       display: flex;
       flex-direction: column;
-      max-height: min(720px, calc(100dvh - 48px));
+      max-height: min(720px, calc(var(--app-height) - 48px));
       overflow: hidden;
       min-height: 180px;
     }
@@ -7433,7 +7463,7 @@ body.bg-pattern-ascii-fireflies {
 
     #recording-indicator {
       position: fixed;
-      top: 10px;
+      top: calc(10px + var(--safe-top));
       left: 0;
       right: 0;
       background: rgba(0, 0, 0, 0.8);
diff --git a/static/css/02-compare.css b/static/css/02-compare.css
index ae04ba663..21fd7b555 100644
--- a/static/css/02-compare.css
+++ b/static/css/02-compare.css
@@ -172,9 +172,8 @@
            position:fixed; height:100% = the layout viewport, whose bottom sits
            UNDER Firefox Android's bottom URL bar — so flex-end parked the sheet
            (and its footer / Start button) beneath the bar. dvh excludes the bar
-           so the footer lands above it. Extra safe-area pad for iOS home bar. */
-        height: 100dvh;
-        padding-bottom: env(safe-area-inset-bottom, 0px);
+           so the footer lands above it. */
+        height: var(--app-height);
       }
       /* Confirm dialog stays centered, not a bottom sheet */
       #styled-confirm-overlay {
@@ -204,7 +203,7 @@
         border-radius: 14px 14px 0 0;
         border: none;
         border-top: 1px solid var(--border);
-        padding: 6px 12px 12px;
+        padding: 6px 12px calc(12px + var(--safe-bottom));
         animation: sheet-enter 0.2s ease-out forwards;
         overflow-y: hidden !important;
       }
@@ -252,12 +251,12 @@
       #email-lib-modal .modal-content,
       #doclib-modal .doclib-modal-content {
         max-height: 90vh !important;
-        max-height: 90dvh !important;
+        max-height: calc(var(--app-height) * 0.9) !important;
         height: auto !important;
         /* Reserve the iOS home-indicator / bottom-bar strip so an expanded
            skill card's footer (Delete / Edit / Run) isn't hidden under it.
            dvh already excludes the URL bar; this handles the safe area. */
-        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
+        padding-bottom: var(--safe-bottom) !important;
       }
       /* Grab handle pill on the non-standard content classes too. Memory's
          desktop rule defines a radial-glow ::before later in the file —
@@ -305,7 +304,7 @@
            visible viewport on Chrome/Safari mobile (URL bar covered the
            action buttons row). */
         max-height: 90vh !important;
-        max-height: 90dvh !important;
+        max-height: calc(var(--app-height) * 0.9) !important;
         height: auto !important;
       }
       /* Anchor those modals to the top so the full height is usable */
@@ -314,8 +313,11 @@
       #email-lib-modal,
       #doclib-modal,
       #gallery-modal,
-      #tasks-modal {
-        padding-top: 0 !important;
+      #tasks-modal,
+      #memory-modal,
+      #settings-modal {
+        padding-top: var(--sheet-top) !important;
+        padding-bottom: 0 !important;
         align-items: stretch !important;
       }
       /* Deep Research already gets the swipe grab-handle pill from the
diff --git a/static/css/03-agent-chat.css b/static/css/03-agent-chat.css
index 0536fe3b6..0e8c95f91 100644
--- a/static/css/03-agent-chat.css
+++ b/static/css/03-agent-chat.css
@@ -410,8 +410,8 @@ button.hamburger {
 /* Agent indicator */
 #agent-indicator {
   position: fixed;
-  top: 20px;
-  right: 20px;
+  top: calc(20px + var(--safe-top));
+  right: calc(20px + var(--safe-right));
   background: var(--sidebar-bg, var(--panel));
   color: var(--fg);
   border: 1px solid var(--border);
@@ -894,7 +894,7 @@ button.hamburger {
 /* Recording indicator */
 #recording-indicator {
   position: fixed;
-  top: 10px;
+  top: calc(10px + var(--safe-top));
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0.8);
diff --git a/static/css/05-documents.css b/static/css/05-documents.css
index b1bb54a22..c069c10cc 100644
--- a/static/css/05-documents.css
+++ b/static/css/05-documents.css
@@ -2666,11 +2666,13 @@ mark.doc-find-mark.current {
        render it as a narrow side pane ("sidebar") on a phone. */
     position: fixed !important;
     inset: 0 !important;
-    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
+    top: var(--sheet-top) !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
+    height: auto !important;
     max-width: 100% !important;
     width: 100% !important;
     flex: none !important;
     z-index: 170;
+    padding-bottom: var(--safe-bottom);
     /* Stroke the top edge so the rounded corners read as a curved sheet edge. */
     border: 1px solid var(--border);
     border-bottom: none;
diff --git a/static/css/06-admin-settings.css b/static/css/06-admin-settings.css
index 425b9ad6d..788470329 100644
--- a/static/css/06-admin-settings.css
+++ b/static/css/06-admin-settings.css
@@ -1181,8 +1181,8 @@ span[id$="-logo"] svg:not([width]) {
     opacity: 0;
     transform-origin: center center;
     position: absolute;
-    right: calc(16px + env(safe-area-inset-right, 0px));
-    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
+    right: calc(16px + var(--safe-right));
+    bottom: calc(18px + var(--safe-bottom));
     height: var(--fab-size);
     min-width: var(--fab-size);
     padding: 0 20px 0 18px;
@@ -1298,17 +1298,23 @@ span[id$="-logo"] svg:not([width]) {
    instead of becoming a side panel. */
 #doclib-modal.doclib-fullscreen:not(.modal-right-docked) .doclib-modal-content {
   position: fixed !important;
-  top: 0 !important;
-  left: calc(var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
-  right: 0 !important;
-  bottom: 0 !important;
+  top: var(--safe-top) !important;
+  left: calc(var(--safe-left) + var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
+  right: var(--safe-right) !important;
+  bottom: var(--safe-bottom) !important;
   width: auto !important;
   max-width: none !important;
-  height: 100vh !important;
-  max-height: 100vh !important;
+  height: auto !important;
+  max-height: none !important;
   border-radius: 0 !important;
   transform: none !important;
 }
+@media (min-width: 769px) {
+  body.hamburger-right #doclib-modal.doclib-fullscreen:not(.modal-right-docked) .doclib-modal-content {
+    left: var(--safe-left) !important;
+    right: calc(var(--safe-right) + var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
+  }
+}
 #doclib-modal.doclib-fullscreen .modal-header,
 #doclib-modal.doclib-fullscreen .lib-tabs,
 #doclib-modal.modal-right-docked .modal-header,
@@ -1415,10 +1421,10 @@ span[id$="-logo"] svg:not([width]) {
    panes reserve room with margins so left + right docks can be active at the
    same time without skewing the entire body box. */
 body.right-dock-active {
-  padding-right: 0;
+  padding-right: var(--safe-right);
 }
 body.left-dock-active {
-  padding-left: 0;
+  padding-left: var(--safe-left);
 }
 body.left-dock-active:not(.email-doc-split-active) .chat-container {
   margin-left: var(--left-dock-w, 0px);
diff --git a/static/css/07-documents.css b/static/css/07-documents.css
index ea843c0ca..acfa56ae8 100644
--- a/static/css/07-documents.css
+++ b/static/css/07-documents.css
@@ -447,13 +447,11 @@
    edges and let the inner body absorb the remaining height. */
 body:not(.email-doc-split-active) .email-window-modal.email-window-fullscreen .modal-content {
   position: fixed !important;
-  inset: 0 !important;
-  left: 0 !important;
-  top: 0 !important;
-  width: 100vw !important;
-  max-width: 100vw !important;
-  height: 100vh !important;
-  max-height: 100vh !important;
+  inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) !important;
+  width: auto !important;
+  max-width: none !important;
+  height: auto !important;
+  max-height: none !important;
   border-radius: 0 !important;
   transform: none !important;
   display: flex !important;
@@ -472,17 +470,23 @@ body:not(.email-doc-split-active) .email-window-modal.email-window-fullscreen .e
    one of the two CSS vars is 0 at any given time, set by init.js). */
 body:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.modal-right-docked) .modal-content {
   position: fixed !important;
-  top: 0 !important;
-  left: calc(var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
-  right: 0 !important;
-  bottom: 0 !important;
+  top: var(--safe-top) !important;
+  left: calc(var(--safe-left) + var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
+  right: var(--safe-right) !important;
+  bottom: var(--safe-bottom) !important;
   width: auto !important;
   max-width: none !important;
-  height: 100vh !important;
-  max-height: 100vh !important;
+  height: auto !important;
+  max-height: none !important;
   border-radius: 0 !important;
   transform: none !important;
 }
+@media (min-width: 769px) {
+  body.hamburger-right:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.modal-right-docked) .modal-content {
+    left: var(--safe-left) !important;
+    right: calc(var(--safe-right) + var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
+  }
+}
 /* Mobile: the /email route adds .email-lib-fullscreen, but the desktop full-
    bleed rule above squares off the corners and offsets the email by the icon
    rail. On phones the email should be the normal bottom-sheet — full width,
@@ -490,12 +494,14 @@ body:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.mod
    so it wins on mobile. */
 @media (max-width: 768px) {
   body:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.modal-right-docked) .modal-content {
-    left: 0 !important;
-    right: 0 !important;
-    width: 100vw !important;
-    max-width: 100vw !important;
-    height: 100dvh !important;
-    max-height: 100dvh !important;
+    top: var(--sheet-top) !important;
+    left: var(--safe-left) !important;
+    right: var(--safe-right) !important;
+    bottom: 0 !important;
+    width: auto !important;
+    max-width: none !important;
+    height: auto !important;
+    max-height: none !important;
     border-radius: 14px 14px 0 0 !important;
     border-top: 1px solid var(--border) !important;
   }
diff --git a/static/css/13-image-editor.css b/static/css/13-image-editor.css
index 257e2805e..1fb216bc2 100644
--- a/static/css/13-image-editor.css
+++ b/static/css/13-image-editor.css
@@ -4502,7 +4502,7 @@ button .spinner-whirlpool {
     left: 8px !important;
     right: 8px !important;
     top: auto !important;
-    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
+    bottom: calc(var(--safe-bottom) + 8px) !important;
     width: auto !important;
     min-width: 0 !important;
     max-width: calc(100vw - 16px) !important;
diff --git a/static/css/14-email.css b/static/css/14-email.css
index 0ef60aca4..f42f6b6d1 100644
--- a/static/css/14-email.css
+++ b/static/css/14-email.css
@@ -4638,13 +4638,14 @@ body.notes-view .chat-container { flex: 1; min-width: 0; }
 @media (max-width: 768px) {
   body.notes-view .notes-pane {
     position: fixed;
-    inset: 0;
+    inset: var(--sheet-top) 0 0;
     max-width: 100%;
     width: 100% !important;
     /* Desktop sets height: min(80vh, 820px) which wins over inset:0's bottom:0
        and leaves a gap at the bottom of the viewport. Force full height here. */
-    height: 100dvh !important;
-    max-height: 100dvh !important;
+    height: calc(var(--app-height) - var(--sheet-top)) !important;
+    max-height: calc(var(--app-height) - var(--sheet-top)) !important;
+    padding-bottom: var(--safe-bottom);
     z-index: 170;
     /* Bottom-sheet treatment like the document editor: stroked, rounded top,
        slides up from the bottom. */
diff --git a/static/css/17-research.css b/static/css/17-research.css
index d2fa2b1d1..c4de5cb75 100644
--- a/static/css/17-research.css
+++ b/static/css/17-research.css
@@ -1439,7 +1439,7 @@ body.theme-frosted .modal {
   /* Bottom-sheet: 90dvh tall (a touch smaller than full-screen) anchored to the
      bottom, so there's a small gap at the top and it reads as a sheet. The body
      still scrolls within the bounded height. */
-  #research-overlay { align-items: flex-end !important; justify-content: stretch !important; }
+  #research-overlay { align-items: flex-end !important; justify-content: stretch !important; padding-bottom: 0 !important; }
   #research-pane {
     height: 90dvh !important;
     max-height: 90dvh !important;
@@ -1451,7 +1451,7 @@ body.theme-frosted .modal {
      browser's bottom toolbar / safe area and can always be scrolled into view
      (otherwise the form fits the viewport and there's no room to reach them). */
   #research-pane .research-pane-body {
-    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 40px) !important;
+    padding-bottom: calc(var(--safe-bottom) + 40px) !important;
     touch-action: pan-y;
     overscroll-behavior: contain;
   }
diff --git a/static/index.html b/static/index.html
index 5fc386a5c..89836d27a 100644
--- a/static/index.html
+++ b/static/index.html
@@ -16,6 +16,13 @@
   <link rel="apple-touch-icon" href="/static/icons/icon-192.png">
   <script nonce="{{CSP_NONCE}}">
   window._odysseusLoadTime = Date.now();
+  // Stops iOS focus-zoom on every field; iOS still allows pinch-zoom, other platforms would not.
+  (function(){
+    var ua = navigator.userAgent || '';
+    var isIOS = /iPad|iPhone|iPod/.test(ua) || (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1);
+    var vp = document.querySelector('meta[name="viewport"]');
+    if (isIOS && vp) vp.setAttribute('content', vp.getAttribute('content') + ', maximum-scale=1');
+  })();
   (function(){
     try {
       var t = JSON.parse(localStorage.getItem('odysseus-theme'));
diff --git a/static/js/chat.js b/static/js/chat.js
index c42f5382b..7b0d70418 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -6929,13 +6929,6 @@ import { invalidateSettings } from './appConfig.js';
           }
         });
       }
-      // Smooth viewport resize when keyboard opens/closes
-      if (window.visualViewport) {
-        window.visualViewport.addEventListener('resize', () => {
-          document.documentElement.style.setProperty('--vh', window.visualViewport.height + 'px');
-        });
-        document.documentElement.style.setProperty('--vh', window.visualViewport.height + 'px');
-      }
     }
 
     // If the browser discarded and restored this tab, reload the current session
diff --git a/static/js/emailLibrary/index.js b/static/js/emailLibrary/index.js
index 82f76b0c5..2cba1edd6 100644
--- a/static/js/emailLibrary/index.js
+++ b/static/js/emailLibrary/index.js
@@ -22,7 +22,7 @@ import {
 } from './utils.js';
 import { state } from './state.js';
 import { getSettings } from '../appConfig.js';
-import { collapseSidebarToRail } from '../modalSnap.js';
+import { clampWindowLeft, collapseSidebarToRail, leftNavRight, safeInsetPx } from '../modalSnap.js';
 import { emailApiUrl } from '../emailShared.js';
 import {
   bindMenuDismiss,
@@ -823,7 +823,7 @@ function _readCssPx(name) {
 }
 
 function _emailSplitLeftEdge() {
-  return _readCssPx('--icon-rail-w') + _readCssPx('--sidebar-w');
+  return leftNavRight();
 }
 
 function _setEmailDocumentSplit(leftEdge, emailWidth) {
@@ -899,7 +899,8 @@ function _clearEmailDocumentSplit() {
 // rail. Used by the "try collapsing the sidebar first" path so we can decide
 // whether collapsing recovers enough room before minimizing email.
 function _emailSplitLeftEdgeIfSidebarCollapsed() {
-  return _readCssPx('--icon-rail-w');
+  const navOnRight = document.getElementById('sidebar')?.classList.contains('right-side');
+  return safeInsetPx('left') + (navOnRight ? 0 : _readCssPx('--icon-rail-w'));
 }
 
 function _hasDesktopRoomForEmailAndDocument(modal, opts = {}) {
@@ -2415,7 +2416,7 @@ export function openEmailLibrary(opts = {}) {
       requestAnimationFrame(() => {
         const w = content.offsetWidth;
         const refH = window.innerHeight * 0.85;
-        content.style.left = Math.max(20, (window.innerWidth - w) / 2) + 'px';
+        content.style.left = clampWindowLeft(Math.max(20, (window.innerWidth - w) / 2), w) + 'px';
         content.style.top = Math.max(20, (window.innerHeight - refH) / 2) + 'px';
         content.style.transform = 'none';
       });
diff --git a/static/js/emailLibrary/reader.js b/static/js/emailLibrary/reader.js
index b4765f870..6dc296185 100644
--- a/static/js/emailLibrary/reader.js
+++ b/static/js/emailLibrary/reader.js
@@ -11,6 +11,7 @@
 
 import spinnerModule from '../spinner.js';
 import * as Modals from '../modalManager.js';
+import { clampWindowLeft } from '../modalSnap.js';
 import { showToast } from '../ui.js?v=20260916largetoolscroll1';
 import { state } from './state.js';
 import { _esc, _extractName, _renderEmailSummaryError } from './utils.js';
@@ -428,7 +429,7 @@ export async function _openEmailWindow(em, folder) {
     requestAnimationFrame(() => {
       const w = content.offsetWidth, h = content.offsetHeight;
       const off = (_emailWindowSeq % 6) * 28;
-      content.style.left = Math.max(20, (window.innerWidth  - w) / 2 + off) + 'px';
+      content.style.left = clampWindowLeft(Math.max(20, (window.innerWidth  - w) / 2 + off), w) + 'px';
       content.style.top  = Math.max(20, (window.innerHeight - h) / 3 + off) + 'px';
     });
   }
diff --git a/static/js/features/notes/ui/panel.js b/static/js/features/notes/ui/panel.js
index 0a6031233..2265897c0 100644
--- a/static/js/features/notes/ui/panel.js
+++ b/static/js/features/notes/ui/panel.js
@@ -190,7 +190,7 @@ export function createPanel({
     // which left it as a side panel squeezing the chat).
     if (window.innerWidth <= 768) {
       pane.style.position = 'fixed';
-      pane.style.inset = '0';
+      pane.style.inset = 'var(--sheet-top) 0 0';
       pane.style.width = '100%';
       pane.style.maxWidth = '100%';
       pane.style.zIndex = '170';
diff --git a/static/js/init.js b/static/js/init.js
index e961a3d75..e554deaa7 100644
--- a/static/js/init.js
+++ b/static/js/init.js
@@ -369,6 +369,31 @@ document.addEventListener('DOMContentLoaded', markComposerUserEdited, { once: tr
 /* ---- Mobile viewport fix — keep chat visible when virtual keyboard opens ---- */
 {
   if (window.visualViewport) {
+    const root = document.documentElement;
+    // iOS overlays the keyboard without resizing the layout viewport and scrolls
+    // the page to reveal the field, leaving it shifted after the keyboard closes.
+    const _syncKeyboardViewport = function() {
+      const vv = window.visualViewport;
+      if (vv.scale > 1.01) return;
+      const keyboardOpen = window.innerHeight - vv.height > 120;
+      root.classList.toggle('keyboard-open', keyboardOpen);
+      if (keyboardOpen) root.style.setProperty('--keyboard-viewport-height', vv.height + 'px');
+      else root.style.removeProperty('--keyboard-viewport-height');
+      if (window.scrollY) window.scrollTo(0, 0);
+    };
+    // iOS fires visualViewport resize only once, mid-animation, and no focusin when
+    // the tapped field already had focus (e.g. the composer after a new chat)
+    const _syncThroughKeyboardAnimation = () => {
+      _syncKeyboardViewport();
+      for (const delay of [100, 300, 600, 1000]) setTimeout(_syncKeyboardViewport, delay);
+    };
+    _syncKeyboardViewport();
+    window.visualViewport.addEventListener('resize', _syncThroughKeyboardAnimation);
+    window.visualViewport.addEventListener('scroll', _syncKeyboardViewport);
+    document.addEventListener('focusin', _syncThroughKeyboardAnimation);
+    document.addEventListener('focusout', _syncThroughKeyboardAnimation);
+    window.addEventListener('scroll', () => { if (window.scrollY) window.scrollTo(0, 0); }, { passive: true });
+
     let _lastVVHeight = window.visualViewport.height;
     window.visualViewport.addEventListener('resize', function() {
       const vv = window.visualViewport;
diff --git a/static/js/modalSnap.js b/static/js/modalSnap.js
index 48b3922ac..d02bd8dd3 100644
--- a/static/js/modalSnap.js
+++ b/static/js/modalSnap.js
@@ -110,7 +110,7 @@ function _clampRightDockWidth(width) {
   const min = _minEdgeDockWidth();
   const navRight = _leftNavRight();
   const leftDockW = _activeDockWidth('left');
-  const maxByChat = window.innerWidth - navRight - leftDockW - MIN_CHAT_WIDTH;
+  const maxByChat = window.innerWidth - navRight - _rightNavInset() - leftDockW - MIN_CHAT_WIDTH;
   const max = Math.min(Math.round(window.innerWidth * 0.82), maxByChat);
   return _clampDockWidthToSpace(width, min, max);
 }
@@ -118,7 +118,7 @@ function _clampRightDockWidth(width) {
 function _clampLeftDockWidth(width, left = _leftNavRight()) {
   const min = _minEdgeDockWidth();
   const rightDockW = _activeDockWidth('right');
-  const available = Math.max(0, window.innerWidth - left - rightDockW);
+  const available = Math.max(0, window.innerWidth - left - _rightNavInset() - rightDockW);
   const max = Math.min(Math.round(available * 0.82), available - MIN_CHAT_WIDTH);
   return _clampDockWidthToSpace(width, min, max);
 }
@@ -170,13 +170,23 @@ function _shouldAutoCollapseSidebar(dockW) {
   return remaining < MIN_CHAT_WIDTH;
 }
 
+function _navOnRight() {
+  return !!document.getElementById('sidebar')?.classList.contains('right-side');
+}
+
+// Body padding carries the device safe-area insets (notch, Dynamic Island).
+function _bodyPaddingPx(side) {
+  return parseFloat(window.getComputedStyle(document.body)[side === 'left' ? 'paddingLeft' : 'paddingRight']) || 0;
+}
+
 // Right edge (px) of whatever left navigation is currently showing — the
 // expanded sidebar if visible, otherwise the icon rail. Used to anchor the
 // left dock so it always sits flush to the right of the nav.
 function _leftNavRight() {
   const sidebar = document.getElementById('sidebar');
   const rail = document.getElementById('icon-rail');
-  let x = 0;
+  let x = _bodyPaddingPx('left');
+  if (_navOnRight()) return x;
   if (sidebar && !sidebar.classList.contains('hidden')) {
     const r = sidebar.getBoundingClientRect();
     if (r.width) x = Math.max(x, r.right);
@@ -188,8 +198,36 @@ function _leftNavRight() {
   return x;
 }
 
+// Distance (px) from the viewport's right edge that a right-side nav and the
+// safe area occupy. The right dock sits flush to the left of it.
+function _rightNavInset() {
+  const sidebar = document.getElementById('sidebar');
+  const rail = document.getElementById('icon-rail');
+  let inset = _bodyPaddingPx('right');
+  if (!_navOnRight()) return inset;
+  if (sidebar && !sidebar.classList.contains('hidden')) {
+    const r = sidebar.getBoundingClientRect();
+    if (r.width) inset = Math.max(inset, window.innerWidth - r.left);
+  }
+  if (rail && window.getComputedStyle(rail).display !== 'none') {
+    const r = rail.getBoundingClientRect();
+    if (r.width) inset = Math.max(inset, window.innerWidth - r.left);
+  }
+  return inset;
+}
+
+export function leftNavRight() { return _leftNavRight(); }
+export function rightNavInset() { return _rightNavInset(); }
+export function safeInsetPx(side) { return _bodyPaddingPx(side); }
+
+// Keeps a floating window between the nav and the safe areas
+export function clampWindowLeft(left, width) {
+  const max = window.innerWidth - _rightNavInset() - width;
+  return Math.max(_leftNavRight(), Math.min(left, max));
+}
+
 function _clampEmailDocSplitWidth(width, left = _leftNavRight()) {
-  const available = Math.max(0, window.innerWidth - left);
+  const available = Math.max(0, window.innerWidth - left - _rightNavInset());
   if (!available) return 0;
   const compact = available < 760;
   const minEmail = compact ? 260 : 340;
@@ -235,7 +273,7 @@ function _applyEmailDocSplitGeometry(left, emailWidth) {
   if (!docPane || window.innerWidth <= 768) return;
   docPane.style.setProperty('position', 'fixed', 'important');
   docPane.style.setProperty('left', `${x}px`, 'important');
-  docPane.style.setProperty('right', 'var(--right-dock-w, 0px)', 'important');
+  docPane.style.setProperty('right', `calc(var(--right-dock-w, 0px) + ${_rightNavInset()}px)`, 'important');
   docPane.style.setProperty('top', '0px', 'important');
   docPane.style.setProperty('bottom', '0px', 'important');
   docPane.style.setProperty('width', 'auto', 'important');
@@ -497,7 +535,7 @@ function _applyDockInternal(modal, side, dockClass) {
   } else {
     w = _resolveRightDockWidth(modal, content);
     content.style.left = 'auto';
-    content.style.right = '0';
+    content.style.right = _rightNavInset() + 'px';
     content.style.width = w + 'px';
     content.style.maxWidth = w + 'px';
     document.body.classList.add('right-dock-active');
@@ -872,7 +910,7 @@ export function makeEdgeDockController(modal, side = 'right', dockClass) {
       w = _clampRightDockWidth(window.innerWidth - clientX);
       content._userDockWidth = w;
       content.style.left = 'auto';
-      content.style.right = '0';
+      content.style.right = _rightNavInset() + 'px';
       content.style.width = w + 'px';
       content.style.maxWidth = w + 'px';
       document.body.classList.add('right-dock-active');
diff --git a/static/js/sidebar-layout.js b/static/js/sidebar-layout.js
index 949ec532f..745c1e334 100644
--- a/static/js/sidebar-layout.js
+++ b/static/js/sidebar-layout.js
@@ -75,12 +75,15 @@ export function initSidebarLayout(Storage, opts) {
     _setSidebarModeClasses(mode);
   }
 
+  // Phones in landscape get the desktop layout, but the icon rail is too small to use there
+  const _phoneLandscape = window.matchMedia('(pointer: coarse) and (max-height: 500px)');
+
   function _syncRailSideCore() {
     const sidebar = document.getElementById('sidebar');
     if (!iconRail) return;
     const isRight = sidebar.classList.contains('right-side');
     const sidebarHidden = sidebar.classList.contains('hidden');
-    const railHidden = iconRail.classList.contains('rail-hidden');
+    const railHidden = iconRail.classList.contains('rail-hidden') || _phoneLandscape.matches;
     const isMobileMini = iconRail.classList.contains('mobile-mini');
     iconRail.classList.toggle('right-side', isRight);
     // On mobile mini mode, JS already set inline styles — don't touch
@@ -118,6 +121,7 @@ export function initSidebarLayout(Storage, opts) {
   // Set initial reference and expose globally
   _syncRailSideFn = _syncRailSideCore;
   window.syncRailSide = syncRailSide;
+  _phoneLandscape.addEventListener('change', () => syncRailSide());
 
   // Restore sidebar side preference
   if (Storage.get(Storage.KEYS.SIDEBAR_SIDE) === 'right') {
diff --git a/static/js/windowResize.js b/static/js/windowResize.js
index 6efdbfc2d..b71feac51 100644
--- a/static/js/windowResize.js
+++ b/static/js/windowResize.js
@@ -257,12 +257,19 @@ export function makeWindowResizable(content, options = {}) {
       try {
         const saved = JSON.parse(localStorage.getItem(storageKey) || 'null');
         if (saved && saved.w && saved.h) {
-          const w = Math.max(minW, Math.min(saved.w, window.innerWidth));
+          const bodyStyle = getComputedStyle(document.body);
+          const padLeft = parseFloat(bodyStyle.paddingLeft) || 0;
+          const padRight = parseFloat(bodyStyle.paddingRight) || 0;
+          const w = Math.max(minW, Math.min(saved.w, window.innerWidth - padLeft - padRight));
           const h = Math.max(minH, Math.min(saved.h, window.innerHeight));
           content.style.width = w + 'px';
           content.style.height = h + 'px';
           content.style.maxWidth = 'none';
           content.style.maxHeight = 'none';
+          const left = parseFloat(content.style.left);
+          if (Number.isFinite(left) && left + w > window.innerWidth - padRight) {
+            content.style.left = Math.max(padLeft, window.innerWidth - padRight - w) + 'px';
+          }
         }
       } catch (_) {}
     });

From 63e18a46c72b17e25fd716a49967dc2071e593ab Mon Sep 17 00:00:00 2001
From: PR #6029 Reviewer <reviewer@odysseus-review.local>
Date: Tue, 20 Oct 2026 01:01:35 +0100
Subject: [PATCH 2/2] test(css): update snapshots for iOS safe-area layout

---
 tests/css_snapshot/baseline.json | 90 ++++++++++++++++----------------
 1 file changed, 45 insertions(+), 45 deletions(-)

diff --git a/tests/css_snapshot/baseline.json b/tests/css_snapshot/baseline.json
index 41640ebeb..a144f9f53 100644
--- a/tests/css_snapshot/baseline.json
+++ b/tests/css_snapshot/baseline.json
@@ -1,10 +1,10 @@
 {
- "digest": "9868d50a542b7ad1",
+ "digest": "f7e60e4a567c46dc",
  "elements": {
   "app-shell": {
    "app-loader": "f04ad5bf6312d53f",
    "attach-strip": "a6474951e2481214",
-   "body": "58df17f0afa190b9",
+   "body": "4956f449e6a30e93",
    "chat-container": "b00a7c6be4e107b1",
    "chat-context-pill": "dd905b87245a9a71",
    "chat-history": "e65bdc51f4d1675f",
@@ -23,8 +23,8 @@
    "input-icon-btn": "3d1c773acd84a825",
    "memory-close-btn": "c3f4ba99098a6e4b",
    "memory-list": "da9a37a3de3c1a31",
-   "memory-modal": "5efc81537eab4526",
-   "memory-modal-content": "3cadc8581361436e",
+   "memory-modal": "e2f97b123dc9bc55",
+   "memory-modal-content": "5c5fe055c711e642",
    "memory-modal-header": "a8c822fe8c6d20e7",
    "memory-search-input": "8b0fbb33401750d4",
    "memory-toolbar-btn": "9f985efa7c896f90",
@@ -42,7 +42,7 @@
    "rail-new-chat": "f8f1c2f6be426ab9",
    "reasoning-effort-btn": "2a07cdd8ec2b4d26",
    "rename-session-modal": "9345624780009d14",
-   "root": "820190c144fda419",
+   "root": "a9f7ace2c1cefb24",
    "save-custom-preset": "443da70ef5fe9b88",
    "scroll-bottom-btn": "24602d72e2949991",
    "search-input": "53b94f3e5fdb384d",
@@ -54,7 +54,7 @@
    "settings-btn-sm": "c31bcb9bdfbae10d",
    "settings-fallbacks": "e339280590935fe3",
    "settings-logs-tab": "e470140373597143",
-   "settings-modal": "5efc81537eab4526",
+   "settings-modal": "e2f97b123dc9bc55",
    "settings-nav-search": "f4484b2980f2ccc5",
    "settings-row": "de568724268cec6e",
    "settings-select": "a96e8430b0ec6668",
@@ -69,7 +69,7 @@
    "theme-grid": "4d4b2aeb8952cc6f",
    "theme-io-btn": "859f222c79a8c721",
    "theme-modal": "0a65ca916656cdbb",
-   "theme-popup": "3aa65e6f313bbc65",
+   "theme-popup": "fb86cc5f81d0aaa6",
    "theme-tabs": "0cc4987f39876dce",
    "toast": "c60c6a60d4982005",
    "tool-indicator": "0dee45eaca8b703a",
@@ -83,7 +83,7 @@
    "#agent-indicator": "09a1b8d94b1487ee",
    "#agent-indicator.active": "67e2ad3fa48acd3b",
    "#compare-model-overlay .modal-body": "0b1ee357313551b9",
-   "#compare-model-overlay .modal-content": "56883147d181bd9c",
+   "#compare-model-overlay .modal-content": "9b2145292f439a88",
    "#cookbook-modal .cookbook-body": "20bd8a7268cee788",
    "#cookbook-modal .hwfit-cached-list.cookbook-serve-models-just-loaded > .doclib-card": "48f6787a3df3f19e",
    "#cookbook-modal .modal-content": "0c4e1e686df0990e",
@@ -101,7 +101,7 @@
    "#email-lib-modal .email-lib-sync-status": "6d1a0374a16cf7f4",
    "#email-lib-modal .email-reader-atts": "c5d68ecda3c14bb8",
    "#email-lib-modal .email-reader-header": "85afca11c8cbd38e",
-   "#email-lib-modal .modal-content": "d8b8fff38c613c95",
+   "#email-lib-modal .modal-content": "262753f287410717",
    "#email-lib-settings-btn": "9ae15bf04b6a22ce",
    "#email-unread-dot.sidebar-notif-dot": "c80f1e03592983b6",
    "#export-compact-btn": "7d0325a38e51134b",
@@ -686,44 +686,44 @@
  },
  "variants": {
   "app-shell": {
-   "desktop-dark-comfortable": "65b23a35b5a34126",
-   "desktop-dark-compact": "1bac3a0aa4467555",
-   "desktop-dark-spacious": "944583b1854fecbb",
-   "desktop-light-comfortable": "d279432f8c120b58",
-   "desktop-light-compact": "aa768c34ba3c7abc",
-   "desktop-light-spacious": "b74f53e95bfa1d82",
-   "laptop-dark-comfortable": "d98d16f3d60ed275",
-   "laptop-dark-compact": "c3eaf3c4278a0120",
-   "laptop-dark-spacious": "a085fe0f7d9eb66c",
-   "laptop-light-comfortable": "0d7c64f324bebe87",
-   "laptop-light-compact": "da50bf03b0f1be58",
-   "laptop-light-spacious": "a6789fd05a66bf5a",
-   "phone-dark-comfortable": "21b94f88da549eb5",
-   "phone-dark-compact": "b9aa7def2b85414e",
-   "phone-dark-spacious": "21b94f88da549eb5",
-   "phone-light-comfortable": "4a0cf45db775ea7d",
-   "phone-light-compact": "f7fbcb94d99c8730",
-   "phone-light-spacious": "4a0cf45db775ea7d",
-   "tablet-dark-comfortable": "e18256ce58398f11",
-   "tablet-dark-compact": "3cf3e52a10313d44",
-   "tablet-dark-spacious": "e18256ce58398f11",
-   "tablet-light-comfortable": "c2a45155c391f26c",
-   "tablet-light-compact": "9fa7dc03dd02b723",
-   "tablet-light-spacious": "c2a45155c391f26c"
+   "desktop-dark-comfortable": "0c9123117135e362",
+   "desktop-dark-compact": "c694f5d5118ac0e2",
+   "desktop-dark-spacious": "90a67613e8cfdf5d",
+   "desktop-light-comfortable": "17727a9945ccc77b",
+   "desktop-light-compact": "2a887c30d231e357",
+   "desktop-light-spacious": "94b4666734b87625",
+   "laptop-dark-comfortable": "26d334b139b653f2",
+   "laptop-dark-compact": "fea30bad6824357d",
+   "laptop-dark-spacious": "4fdb28deaaaec870",
+   "laptop-light-comfortable": "c7fc986a7e70aac8",
+   "laptop-light-compact": "147645431229ddff",
+   "laptop-light-spacious": "d513c285d30c8289",
+   "phone-dark-comfortable": "551761344bec8d09",
+   "phone-dark-compact": "293d66518c3ec994",
+   "phone-dark-spacious": "551761344bec8d09",
+   "phone-light-comfortable": "cb41acd3f9af3578",
+   "phone-light-compact": "dbef6e9e373e9c10",
+   "phone-light-spacious": "cb41acd3f9af3578",
+   "tablet-dark-comfortable": "0f682621b4ead393",
+   "tablet-dark-compact": "e6f3fece5e716a2c",
+   "tablet-dark-spacious": "0f682621b4ead393",
+   "tablet-light-comfortable": "6e398df9ca69c58b",
+   "tablet-light-compact": "dca75981c8675bfa",
+   "tablet-light-spacious": "6e398df9ca69c58b"
   },
   "bench": {
-   "desktop-dark-comfortable": "f9fa9d54db5ad45a",
-   "desktop-dark-compact": "7603a804cb2e23a2",
-   "desktop-dark-spacious": "b0c69306349fc078",
-   "desktop-light-comfortable": "d3e98c4c1e90686f",
-   "desktop-light-compact": "a04ae70088bc8b35",
-   "desktop-light-spacious": "4aa01a125f541429",
-   "laptop-dark-comfortable": "025e60ebe84e0f98",
-   "laptop-dark-compact": "53d6555bb7a6b5bb",
-   "laptop-dark-spacious": "c124d9ce1633d027",
-   "laptop-light-comfortable": "e8328c45f5127bb0",
-   "laptop-light-compact": "dc2da3534534c888",
-   "laptop-light-spacious": "abe5483724c987e0",
+   "desktop-dark-comfortable": "a9709cb47eec7544",
+   "desktop-dark-compact": "bfab96cb72fd6faf",
+   "desktop-dark-spacious": "25469178b443428a",
+   "desktop-light-comfortable": "2166794d643fae4c",
+   "desktop-light-compact": "81d8ab64407b1d9a",
+   "desktop-light-spacious": "d6d19f33476665af",
+   "laptop-dark-comfortable": "57169e64e1fb5324",
+   "laptop-dark-compact": "6ac903cd8a711bcf",
+   "laptop-dark-spacious": "a47535332e9c5de7",
+   "laptop-light-comfortable": "1e2b381de3556fac",
+   "laptop-light-compact": "6dbfb465121949c1",
+   "laptop-light-spacious": "1b8bfcd4bc4ed214",
    "phone-dark-comfortable": "67ca3c78e6b9495a",
    "phone-dark-compact": "ad6f3a9f5c8d81cd",
    "phone-dark-spacious": "1e6f66e56519ba5d",