Mobile layout (#5241)

* phase 2+3

* initial mobile plugin (phases 4 + 5 + 6)

* some bugfixes

* implement stage 7

* mobile interface improvements

* improve mobile pane/tab picker

* more ui improvements and fixes

* various mobile fixes

* some mobile fixes

* mobile keyboard triggering fix

* some cleanups

* initial plugin keyboard implementation

* improve keyboard hit zones

* improve keyboard

* pinch resize

* pinching fixes

* implement scrolling + panning

* initial keyboard resizing

* fix: mobile first render issues

* keyboard responsiveness

* fix some issues with the keyboard

* implement fit

* fix mobile scrolling

* add tilde cell to compact

* improve mobile keyboard

* fix starting mobile terminal font to natural keyboard size

* fix mobile resize blank screen flash

* shadow focus for mobile

* more keyboard fixes

* improve mobile status bar

* fix: render plugins to mobile clients

* allow opening new panes/tabs from the mobile plugin

* allow configuring

* fix dot slash

* improve mobile native soft keyboard interaction

* switch to native keyboard - initial implementation

* dirty hacks, but phone keyboard works now

* adjust keyboard help strip

* fix cursor in mobile

* fix keyboard and help line

* rename keyboard to modifier bar

* allow starting new session

* make clicking session name bring us to new session menu

* allow switching to desktop from the mobile ui

* mobile welcome screen initial implementation

* mobile welcome screen fixes

* various welcome screen fixes

* more mobile fixes

* moar mobile fixes

* mobile ui redesign

* fix: swallowed backspace bug

* switch session screen improvement

* touch up some interfaces

* refactor: move mobile state to own struct

* refactor: move fit resizing to the server

* remove dead flash code

* some cleanups

* refactor: clear fit on close

* refactor: improve fit api

* refactor: pane sync functions

* refactor: mouse

* refactor: break into modules

* some cleanups for the sessions screen

* fix scrolling and other stuff

* refactor: sessions screen

* refactor: panes screen

* refactor: new session screen

* refactor: menu screen

* refactor: render

* cleanups

* refactor: plugin structure

* remove unused welcome screen path

* Rename api

* refactor input.js

* cleanup useless comments

* fit/mobile refactoring

* take out the garbage

* remove more comments

* remove mobile flash on startup/attach

* fix: various mobile startup issues

* fix space bugs

* cleanup

* rustfmt

* fix windows build

* adjust modifier bar ui

* add pr

1 files changed, 19 insertions, 0 deletions

diff --git a/zellij-client/assets/style.css b/zellij-client/assets/style.css
index f267d0a8..f25084ab 100644
--- a/zellij-client/assets/style.css
+++ b/zellij-client/assets/style.css
@@ -1,14 +1,33 @@
 :root {
+    /* `100vh` is the fallback for browsers without `dvh` support. On
+       iOS Safari this is the *layout* viewport — it includes the
+       URL bar height, so the terminal element would be taller than
+       the visible canvas and xterm.js's grid would be initialised
+       too tall (the keyboard would render below the visible area).
+       The `@supports` block below upgrades to `100dvh` (dynamic
+       viewport) on every modern browser, which automatically tracks
+       URL-bar / soft-keyboard occlusion. The runtime
+       `updateViewportVars` handler still overrides `--dynamic-vh`
+       from `visualViewport.height` when pinch / visualViewport
+       resize events fire. */
     --dynamic-vh: 100vh;
     --dynamic-vw: 100vw;
 }
 
+@supports (height: 100dvh) {
+    :root {
+        --dynamic-vh: 100dvh;
+        --dynamic-vw: 100dvw;
+    }
+}
+
 html,
 body {
     height: var(--dynamic-vh, 100vh);
     width: var(--dynamic-vw, 100vw);
     margin: 0;
     overflow: hidden;
+    background: #000; /* TODO: this should be embedded as the user's theme background */
 }
 
 #terminal {