merge: integrate latest upstream (fit view refactor, ttyd kill-by-port, mobile viewport fix)

muxplex/frontend/style.css

@@ -83,7 +83,8 @@ body {
    ============================================================ */
 
 .view {
-  height: 100vh;
+  height: 100vh;           /* fallback for browsers without dvh support */
+  height: 100dvh;          /* dynamic viewport height — adjusts for mobile browser chrome */
   overflow: hidden;
 }
 
@@ -593,7 +594,8 @@ body {
   top: 0 !important;
   left: 0 !important;
   width: 100vw !important;
-  height: 100vh !important;
+  height: 100vh !important;    /* fallback for browsers without dvh support */
+  height: 100dvh !important;   /* dynamic viewport height — adjusts for mobile browser chrome */
   border-radius: 0;
 }
 
@@ -1523,19 +1525,23 @@ body {
 /* Fit view — tiles fill viewport, no scroll */
 .session-grid--fit {
   overflow: hidden;
+  align-content: stretch;   /* let 1fr rows fill container height */
 }
 
-/* In fit mode, stretch pre to fill the full tile body height and anchor content to bottom */
-.session-grid--fit .tile-body pre {
-  top: 0;                   /* stretch to fill full tile body height in fit mode */
-  overflow-y: scroll;       /* enable scrollTop positioning (content anchored via JS scrollTop=scrollHeight) */
-  scrollbar-width: none;    /* Firefox: hide scrollbar */
-  -ms-overflow-style: none; /* IE/Edge: hide scrollbar */
+/* In fit mode, tiles must use height:auto so the CSS grid 1fr rows control sizing.
+   The base .session-tile uses var(--tile-height) which is a fixed pixel value —
+   overriding with height:auto lets the grid cell (from grid-template-rows: repeat(n,1fr))
+   determine the tile height instead. JS sets only grid-template-columns/rows, not inline heights. */
+.session-grid--fit .session-tile {
+  height: auto;
 }
 
-.session-grid--fit .tile-body pre::-webkit-scrollbar {
-  display: none;            /* Chrome/Safari: hide scrollbar */
-}
+/* In fit mode, tile body and pre use the base CSS:
+   .tile-body { position: relative; overflow: hidden; }
+   .tile-body pre { position: absolute; bottom: 0; left: 0; right: 0; }
+   The pre's natural height from 80 lines of content exceeds the tile height, so it
+   overflows from bottom:0 upward, and tile-body clips excess at the top — showing
+   the bottom-most content (the prompt area) just like a real terminal. */
 
 /* ============================================================
    Responsive overlay sidebar at <960px