Mobile friendly update

Author: sarahsturgeon

web/frontend/src/App.svelte

@@ -20,15 +20,24 @@
   const EDITOR_OPEN_KEY = "glua-editor-open";
 
   function updatePanelWidths() {
-    if (consolePanel && !resizing) {
-      if ($isEditorOpen) {
-        const savedWidth = localStorage.getItem(EDITOR_WIDTH_KEY) || "33%";
-        const consoleWidth = `calc(100% - ${savedWidth})`;
-        consolePanel.style.width = consoleWidth;
-        if (editorPanel) editorPanel.style.width = savedWidth;
-      } else {
-        consolePanel.style.width = "100%";
-      }
+    if (!consolePanel || resizing) return;
+
+    // On mobile, the layout is handled entirely by Tailwind responsive classes.
+    // Clear any inline widths so the CSS can take over when crossing the breakpoint.
+    const isDesktop = window.matchMedia("(min-width: 768px)").matches;
+    if (!isDesktop) {
+      consolePanel.style.width = "";
+      if (editorPanel) editorPanel.style.width = "";
+      return;
+    }
+
+    if ($isEditorOpen) {
+      const savedWidth = localStorage.getItem(EDITOR_WIDTH_KEY) || "33%";
+      const consoleWidth = `calc(100% - ${savedWidth})`;
+      consolePanel.style.width = consoleWidth;
+      if (editorPanel) editorPanel.style.width = savedWidth;
+    } else {
+      consolePanel.style.width = "100%";
     }
   }
 
@@ -49,8 +58,13 @@
         isEditorOpen.update((open) => !open);
       }
     };
+    const handleResize = () => updatePanelWidths();
     window.addEventListener("keydown", handleKeydown);
-    return () => window.removeEventListener("keydown", handleKeydown);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("keydown", handleKeydown);
+      window.removeEventListener("resize", handleResize);
+    };
   });
 
   afterUpdate(() => {
@@ -136,7 +150,7 @@
 </script>
 
 <ScriptViewer />
-<main class="flex flex-row h-screen overflow-hidden">
+<main class="flex flex-row h-dvh overflow-hidden relative">
   {#if view === "ip-limited"}
     <IPLimited limit={ipLimit} />
   {:else if view === "modal"}
@@ -172,8 +186,8 @@
     </div>
     {#if $isEditorOpen}
       <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-      <div id="resizer" on:mousedown={handleMouseDown} role="separator" aria-orientation="vertical"></div>
-      <div bind:this={editorPanel} class="h-full" style="width: 33%;">
+      <div id="resizer" class="hidden md:block" on:mousedown={handleMouseDown} role="separator" aria-orientation="vertical"></div>
+      <div bind:this={editorPanel} class="h-full absolute inset-0 z-30 md:relative md:inset-auto md:z-auto">
         <Editor {socket} />
       </div>
     {/if}

web/frontend/src/app.css

@@ -65,6 +65,23 @@ select {
 #status-panel .toggle-icon { transition: transform 0.3s ease; }
 #status-panel.collapsed .toggle-icon { transform: rotate(180deg); }
 
+/* Mobile: expanded panel-content overlays the console instead of pushing it down.
+   Anchored to #status-panel's inner wrapper, positioned just below the minimized bar. */
+@media (max-width: 767px) {
+  #status-panel > div {
+    position: relative;
+  }
+  #status-panel .panel-content {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: #1f2937;
+    border-bottom: 1px solid rgba(55, 65, 81, 0.5);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
+  }
+}
+
 #editor-panel {
   height: 100%;
   overflow: hidden;
@@ -93,6 +110,16 @@ select {
   background-color: #4f46e5;
 }
 
+/* On mobile the middle-right position overlaps the full-screen editor and the top status bar.
+   Move it to a thumb-friendly bottom-right. */
+@media (max-width: 767px) {
+  #editor-toggle-button {
+    top: auto;
+    bottom: 1rem;
+    transform: none;
+  }
+}
+
 #resizer {
   width: 8px;
   cursor: col-resize;

web/frontend/src/components/Console.svelte

@@ -199,7 +199,7 @@
         <div class="flex items-center border-t border-gray-700 pt-3">
             <span class="{inactive ? 'text-gray-600' : 'text-green-400'} mr-2 shrink-0">&gt;</span>
             <!-- svelte-ignore a11y-autofocus -->
-            <input type="text" bind:this={commandInput} bind:value={commandValue} maxlength={MAX_COMMAND_LENGTH} on:keydown={handleKeydown} class="w-full bg-transparent border-none focus:ring-0 focus:outline-none {inactive ? 'text-gray-600 placeholder-gray-600 cursor-not-allowed' : 'text-gray-200 placeholder-gray-500'}" placeholder="{inactive ? 'Session ended' : 'Enter command...'}" autocomplete="off" autofocus disabled>
+            <input type="text" bind:this={commandInput} bind:value={commandValue} maxlength={MAX_COMMAND_LENGTH} on:keydown={handleKeydown} class="w-full bg-transparent border-none focus:ring-0 focus:outline-none {inactive ? 'text-gray-600 placeholder-gray-600 cursor-not-allowed' : 'text-gray-200 placeholder-gray-500'}" placeholder="{inactive ? 'Session ended' : 'Enter command...'}" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" autofocus disabled>
             {#if showCounter}
                 <span class="ml-2 text-xs font-mono tabular-nums shrink-0 {counterColor}">{remaining}</span>
             {/if}

web/frontend/src/components/StatusPanel.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
-    import { sessionState, sessionMetadata, sessionTimer } from "../lib/stores";
+    import { sessionState, sessionMetadata, sessionTimeRemaining } from "../lib/stores";
     import { healthData } from "../lib/socket";
     import { formatTime } from "../lib/format";
     import { DISCORD_URL } from "../lib/links";
@@ -12,14 +12,20 @@
 
     export let socket: WebSocket | null;
 
-    let collapsed = false;
+    // Default to collapsed on mobile so the panel reads as a slim top bar; desktop keeps the
+    // floating card expanded by default.
+    let collapsed = window.matchMedia("(max-width: 767px)").matches;
     let sessionDuration = "";
 
     $: if ($sessionState === "closed" || $sessionState === "readonly") {
         computeDuration();
+        // Auto-expand when the session ends so the final metadata and New Session button
+        // are immediately visible on mobile without requiring a tap.
+        collapsed = false;
     }
 
     $: inactive = $sessionState === "closed" || $sessionState === "readonly";
+    $: minTimeRemaining = $sessionTimeRemaining > 0 ? formatTime($sessionTimeRemaining) : "—:—";
 
     function computeDuration() {
         const meta = $sessionMetadata;
@@ -29,9 +35,21 @@
     }
 </script>
 
-<div id="status-panel" class="absolute top-4 right-4 z-20 w-72" class:collapsed>
-    <div class="bg-gray-800 rounded-lg shadow-lg border border-gray-700/50">
-        <div class="w-full flex justify-between items-center p-3">
+<div id="status-panel" class="z-20 md:absolute md:top-4 md:right-4 md:w-72 relative w-full" class:collapsed>
+    <div class="bg-gray-800 md:rounded-lg md:shadow-lg md:border border-b border-gray-700/50">
+        <button
+            type="button"
+            on:click={() => collapsed = !collapsed}
+            class="md:hidden flex w-full items-center justify-between px-4 py-2.5 focus:outline-none"
+            aria-expanded={!collapsed}
+            aria-label="Toggle session status"
+        >
+            <span class="text-xs font-mono {inactive ? 'text-gray-400' : 'text-indigo-300'}">
+                {inactive ? "Session Ended" : `⏱ ${minTimeRemaining}`}
+            </span>
+            <svg class="toggle-icon w-5 h-5 text-gray-400" class:rotate-180={collapsed} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
+        </button>
+        <div class="hidden md:flex w-full justify-between items-center p-3">
             <button on:click={() => collapsed = !collapsed} class="flex-1 flex justify-between items-center text-left focus:outline-none pr-2">
                 <span class="font-bold text-sm {inactive ? 'text-gray-400' : 'text-white'}">{inactive ? "Session Ended" : "Session Status"}</span>
             </button>

web/frontend/src/lib/stores.ts

@@ -1,4 +1,4 @@
-import { writable } from "svelte/store";
+import { derived, readable, writable } from "svelte/store";
 import type { SessionMetadata, SessionTimerPayload, ScriptEntry } from "@glua/shared";
 
 export type SessionState = "connecting" | "provisioning" | "active" | "closed" | "readonly";
@@ -9,3 +9,13 @@ export const scriptMap = writable<Record<string, ScriptEntry>>({});
 export const viewingScript = writable<{ name: string; content: string } | null>(null);
 export const sessionMetadata = writable<SessionMetadata | null>(null);
 export const sessionTimer = writable<SessionTimerPayload | null>(null);
+
+const clock = readable(Date.now(), (set) => {
+    const id = setInterval(() => set(Date.now()), 1000);
+    return () => clearInterval(id);
+});
+
+export const sessionTimeRemaining = derived(
+    [sessionTimer, clock],
+    ([$t, $c]) => ($t ? Math.max(0, $t.endTime - $c) : 0),
+);