mobile usability improvements

Still quite bad, unfortunately. getting variable height windows to act
like mobile apps is not easy, it turns out.

Author: iansinnott

src/lib/utils.ts

@@ -84,3 +84,8 @@ export function mapKeys<T extends Record<string, any>, K extends string>(
 ): Record<K, T[keyof T]> {
   return Object.fromEntries(Object.entries(obj).map(([k, v]) => [f(k as keyof T), v])) as any;
 }
+
+export const isMobile = () => {
+  // detect ios, android, etc
+  return /Mobi|Android/i.test(navigator.userAgent);
+};

src/routes/+layout.svelte

@@ -88,15 +88,16 @@
 </svelte:head>
 
 <div
-  class={classNames("min-h-screen overflow-hidden text-white bg-[#1B1B1B] border border-zinc-700", {
+  class={classNames("overflow-hidden text-white bg-[#1B1B1B] border border-zinc-700", {
     "rounded-lg": sys.isTauri,
   })}
 >
   {#if appReady}
     <slot />
     <SettingsModal />
   {:else}
-    <div class="flex items-center justify-center h-screen">
+    <!-- adding both heights for fallback. not every browser likes svh -->
+    <div class="flex items-center justify-center h-screen" style="height: 100svh;">
       <div class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-zinc-700" />
     </div>
   {/if}

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from "svelte";
+  import { onDestroy, onMount, tick } from "svelte";
   import {
     currentThread,
     currentChatThread,
@@ -21,11 +21,39 @@
   import { slide } from "svelte/transition";
   import IconClose from "$lib/components/IconClose.svelte";
   import CloseButton from "$lib/components/CloseButton.svelte";
+  import { isMobile } from "$lib/utils";
 
   const sys = getSystem();
   let message = "";
   let textarea: HTMLTextAreaElement | null = null;
 
+  let windowHeight = window.innerHeight;
+  function updateWindowHeight() {
+    const element = document.querySelector(".your-element");
+    const innerHeight = window.innerHeight; // Get viewport height in pixels
+    const targetPct = 100;
+    windowHeight = innerHeight * (targetPct / 100);
+    console.log({ windowHeight });
+  }
+
+  onMount(() => {
+    if (!isMobile()) {
+      return;
+    } else {
+      console.warn("Mobile browser. Manually managing window height.");
+    }
+    window.addEventListener("DOMContentLoaded", updateWindowHeight, false);
+    window.addEventListener("resize", updateWindowHeight, false);
+    window.addEventListener("orientationchange", updateWindowHeight, false);
+  });
+
+  onDestroy(() => {
+    if (!isMobile()) return;
+    window.removeEventListener("DOMContentLoaded", updateWindowHeight, false);
+    window.removeEventListener("resize", updateWindowHeight, false);
+    window.removeEventListener("orientationchange", updateWindowHeight, false);
+  });
+
   const resizeChatInput = () => {
     if (!textarea) return;
 
@@ -82,7 +110,13 @@
   )}`;
 </script>
 
-<div class:dev-container={dev} class={classNames("app-container", {})}>
+<div
+  class:dev-container={dev}
+  class={classNames("app-container", {
+    "rounded-lg": sys.isTauri,
+  })}
+  style={isMobile() ? `height: ${windowHeight}px;` : ""}
+>
   <header data-tauri-drag-region class="app-header p-4 pr-3 border-b border-zinc-700 w-full">
     <div class="Left flex items-center space-x-4">
       {#if sys.isTauri}
@@ -259,6 +293,7 @@
       "bottom";
 
     /* Not sure where the extra height is from, but the specific calc fixes the layout */
+    /* NOTE This will be overwritten on mobile. See the manual height code above */
     height: calc(100vh - 2px);
   }
   .app-header {